微信小程序看视频发送弹幕功能

一.html

	     <!-- 视频播放器 -->
	<video id="myVideo" controls src="{{src}}" enable-danmu danmu-btn></video>
	<!-- 弹幕 -->
	<view class="Area">
	<input type="text" placeholder="请输入弹幕内容" bindinput="getDanmu"></input>
	<button bindtap="sendDanmu">发送弹幕</button>
	</view>
	<!-- 视频列表 -->
	<view class="videoList">
	<view class="videoBar" wx:for ="{{list}}" wx:key ="{{index}}" data-url="{{item.videoUrl}}" bindtap="playVideo">
	<image src="/images/play.jpg"></image>
	<text>{{item.title}}</text>
	</view>
	</view>

二.css

     video{
  width: 100%
}
.Area{
  display: flex;
  flex-direction: row;
}
input{
  border: 1rpx solid #987938;
  height: 100rpx;
  flex-grow: 1;/*扩张多余空间*/
}
button{
  color: white;
  background: #987938
}
.videoList{
  width: 100%;
  min-height: 400rpx;
}
.videoBar{
  width: 95%;
  display: flex;
  flex-direction: row;
  border-bottom: 1rpx solid #987938;
  margin: 10rpx;
}
image{
  width: 70rpx;
  height: 70rpx;
  margin: 20rpx;
}
text{
  font-size: 45rpx;
  color: #987938;
  margin: 20rpx;
  flex-grow: 1;
}

三.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:{
   list:[
     {
       id:'111',
       title:'大娃',
       videoUrl:'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
     },
     {
       id: '222',
       title: '二娃',
       videoUrl: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
     },
     {
       id: '333',
       title: '三娃',
       videoUrl: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
     },
     {
       id: '444',
       title: '四娃',
       videoUrl: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
     }
   ],
   src:'',
   danmuTxt:''
 },
  getDanmu:function(event){
    this.setData({
      danmuTxt:event.detail.value
    })
  },
  sendDanmu:function(event){
    let text = this.data.danmuTxt
    this.videoCtx.sendDanmu({
    text:text,
      color:getRandomColor()
    })
  },
  playVideo:function(event){
    this.videoCtx.stop()
    //停止播放之前正在播放的视频
    this.setData({
      src:event.currentTarget.dataset.url
    })
    //更新视频地址
    this.videoCtx.play()
    //播放新的视频
  },
  onLoad: function (options) {
    this.videoCtx = wx.createVideoContext('myVideo')
  },
  
})