WeChat applet vidao implements video playback and barrage functions

Implementation of WeChat applet vidao video playback and barrage functions.

vidao

The official document I see now does not have the danmu (barrage) attribute. It existed before, but now this attribute can still take effect. To control the status of the video, you can get an object instance based on the unique id of the video tag. The video component does not have the action attribute and cannot be controlled through action.

.wxml

<view class="section tc">
 <video src="{{src}}"  controls ></video>
 <view class="btn-area">
  <button bindtap="bindButtonTap">获取视频</button>
 </view>
</view>
 
<!--
 danmu-list:弹幕列表
 enable-danmu:是否显示弹幕
 danmu-btn:弹幕按钮
 controls:是否显示视频控件，并没有什么用
 -->
<view class="section tc">
 <video id="myVideo" 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">
  <button bindtap="bindButtonTap">获取视频</button>
  <input bindblur="bindInputBlur"/>
  <button bindtap="bindSendDanmu">发送弹幕</button>
 </view>
</view>
 
<!-- 现在的video就下面三个属性 -->
<video src="" binderror="" hidden></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 ? &#39;0&#39; + color : color
  rgb.push(color)
 }
 return &#39;#&#39; + rgb.join(&#39;&#39;)
}
 
Page({
 onReady: function (res) {
  this.videoContext = wx.createVideoContext(&#39;myVideo&#39;)
 },
 inputValue: &#39;&#39;,
  data: {
    src: &#39;&#39;,
  danmuList: [
   {
    text: &#39;第 1s 出现的弹幕&#39;,
    color: &#39;#ff0000&#39;,
    time: 1
   },
   {
    text: &#39;第 3s 出现的弹幕&#39;,
    color: &#39;#ff00ff&#39;,
    time: 3
   }
  ]
  },
 bindInputBlur: function(e) {
  this.inputValue = e.detail.value
 },
  bindButtonTap: function() { //视频下载
    var that = this
    wx.chooseVideo({
      sourceType: [&#39;album&#39;, &#39;camera&#39;],
      maxDuration: 60,
      camera: [&#39;front&#39;,&#39;back&#39;],
      success: function(res) {
        that.setData({
          src: res.tempFilePath
        })
      }
    })
  },
 bindSendDanmu: function () {
  this.videoContext.sendDanmu({
   text: this.inputValue,
   color: getRandomColor()
  })
 },
  videoErrorCallback: function(e) {
   console.log(&#39;视频错误信息:&#39;);
   console.log(e.detail.errMsg);
  }
})

Effect