小程序video发送弹幕

wxml

<!--index.wxml-->
<view class="section tc">
  <video id="myVideo" style="height:{{videoHeight}}px;width:{{videoWidth}}px" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" binderror="videoErrorCallback" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>
  <view class="btn-area">
     <view class="weui-cell weui-cell_input">
                <view class="weui-cell__bd">
                    <input class="weui-input" placeholder="请输入弹幕" bindblur="bindInputBlur" />
                </view>
            </view>
  
    <button style="margin:30rpx;" bindtap="bindSendDanmu">发送弹幕</button>
  </view>
</view>
      <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_switch">
                <view class="weui-cell__bd">随机颜色</view>
                <view class="weui-cell__ft">
                    <switch checked bindchange="switchChange" />
                </view>
   </view>
   </view>
<view class="colorstyle"  bindtap="selectColor">
<text>选择颜色</text>
<view style="height:80rpx;width:80rpx;line-height: 100rpx;margin:10rpx;background-color:{{numberColor}}"></view>
</view>
  

wxss

/**index.wxss**/
.weui-cells {
  position: relative;
  margin-top: 1.17647059em;
  background-color: #FFFFFF;
  line-height: 1.41176471;
  font-size: 17px;
}
.weui-cells:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1rpx solid #D9D9D9;
  color: #D9D9D9;
  
}
.weui-cells:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1rpx solid #D9D9D9;
  color: #D9D9D9;
}
.weui-cells_after-title {
  margin-top: 0;
}
.weui-cell__bd {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
}
.weui-cell__ft {
  text-align: right;
  color: #999999;
}

.weui-cell {
  padding: 10px 10px;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.weui-cell:before {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1rpx solid #D9D9D9;
  color: #D9D9D9;
  left: 15px;
}
.weui-cell:first-child:before {
  display: none;
}
.colorstyle{
    border-top: 2px solid #eee;
    border-bottom: 2px solid #eee;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 17px;
    line-height: 100rpx;
    display: flex;
    flex-direction: row;
    justify-content:space-between;
}
.vertical {
					height: 40px;
					position: absolute;
					top: 50%;
					margin-top: -20px;
	}
			

js

// pages/video.js

function getRandomColor(){
  let rgb=[]
  for(let i=0;i<3;i++){
    let color=Math.floor(Math.random()*256).toString(16) 
    color = color.length===1?'0'+color:color;
    rgb.push(color)
  }
  return '#'+rgb.join('')
}
Page({
  
  /**
   * 页面的初始数据
   */
  data: {
    inputValue: '',//输入的弹幕
    isRandomColor: true,//默认随机
    src: '',
    numberColor: "#ff0000",//默认黑色
    danmuList: [
      {
        text: '第 1s 出现的红色弹幕',
        color: '#ff0000',
        time: 1
      },
      {
        text: '第 2s 出现的绿色弹幕',
        color: '#00ff00',
        time: 2
      }
    ]

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this;
    wx:wx.getSystemInfo({
      success: (result) => {
        var videoWidth= result.windowWidth;
        var videoHeight=(255 / 300) * videoWidth
        that.setData({
          videoWidth:videoWidth,
          videoHeight:videoHeight
        })
        console.log(result)
      },
     
    })
  },

  onReady:function(res){
    this.videoContext=wx.createVideoContext('myVideo')
  },
 
  onShow:function(res){
    var that = this
    wx.getStorage({
      key: 'numberColor',
      success:function(res){
        that.setData({
          numberColor:res.data
        })
      }
    })
  },
 
  bindInputBlur:function(res){
    this.setData({
      inputValue:res.detail.value
    })
    console.log(res)
  },
  bindSendDanmu:function(res){
     if(this.data.isRandomColor){
       var color = getRandomColor();
     }else{
       var color = this.data.numberColor; 
     }

     this.videoContext.sendDanmu({
       text:this.data.inputValue,
       color:color
     })
  },

  videoErrorCallback:function(res){
    console.log(res)
  },
 
 //switch是否选中
switchChange:function(e){
  this.setData({
    isRandomColor:e.detail.value
  })
},



  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  

  /**
   * 生命周期函数--监听页面显示
   */
  

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})