第21课 微信小程序视频标签显示弹幕

第21课 微信小程序视频标签显示弹幕

效果图如下:

wxml代码如下：

<video
  src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
  danmu-list="{{danmu}}"
  danmu-btn
  enable-danmu
  style='width:100vw'
></video>
<!-- src视频地址 danmu-list弹幕列表/ danmu-btn显示弹幕按钮/ enable-danmu显示弹幕  -->

js代码如下：

Page({
  data: {
    danmu: [
      {
        text: '这是一条弹幕',   //弹幕内容
        color: '#ff0000', //弹幕颜色
        time: ~~(Math.random() * 3) //弹幕播放的时间s 必须是整数
      },
      {
        text: '这是一条弹幕',
        color: '#00f',
        time: ~~(Math.random() * 3)
      },
      {
        text: '这是一条弹幕',
        color: '#0f0',
        time: ~~(Math.random() * 3)
      }
    ]
  },
})