微信小程序之高级视频弹幕

微信小程序之视频实时弹幕的制作

1、流程构思图

图形解析
1、作为用户端，主要任务就是在观看视频的时候发弹幕，其他的什么都不需要管
2、作为服务端，要做的就是记录用户发送弹幕的时间，即发送弹幕的时间实在视频的哪个时间点上，以实现当别人也在看此视频的此时间点时，能实时地看到别人的弹幕，以便于交流，可能会稍有延时。

刚开始对于如何获取视频上的时间点毫无思路，经仔细研究开发文档时，发现了新大陆，如下图

发现在bindtimeupdate事件发生时会返回一个值，也就是我们需要的时间点，有了这个思路，我们就很容易地获取视频上的时间点，再结合弹幕发送的事件，就可以制作出实时弹幕了（通过上传text, time, color 数据到云存储， 然后在播放时再不断监测云存储中的数据，与当前时间点进行对比，如果时间相等，则将记录从云存储get下来，并发送弹幕到video），下面贴出部分代码

2、代码区

// 官网给出的获取随机颜色的函数
function getRandomColor() {
  const 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('')
}

//发送弹幕
onReady: function () {
    this.videoContext = wx.createVideoContext('myVideo')
  },
  ...
  send_danmu: function () {
    this.videoContext.sendDanmu({
      text: this.data.danmu_content,
      color: getRandomColor()
    })
  },

//获取实时的视频时间，便于后续使用
  bindtimeupdate: function(res) {
    this.currentTime = res.detail['currentTime']
  },

分享到此，其他自行百度，或参考开发文档。