视频

小游戏可以使用 wx.createVideo() 在界面上插入视频。

const src = 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
const video = wx.createVideo({
  x: 10,
  y: 76,
  width: 300,
  height: 200,
  // 显示默认的视频控件
  controls: true,
  // 传入
  src
})

视频的层级比画布高，因此在画布上绘制的内容会被视频遮盖。小游戏不支持 cover-view/cover-image，所以无法在视频上覆盖其他自定义 UI 元素。

小游戏中可以插入多个视频。后插入的视频层级比先插入的层级高。

控制视频

wx.createVideo() 返回的 Video 对象有控制视频进行播放、暂停、进度跳转、全屏、退出全屏的方法。

播放视频

video.play()

暂停视频

video.pause()

进度跳转

video.seek(10)

监听事件

Video 也提供了对视频缓冲、暂停、播放进度等事件的监听接口

video.onTimeUpdate(res => {
  console.log('当前进度', res.currentTime)
  console.log('视频总时长', res.duration)
})
video.onEnded(res => {
  console.log('视频播放完了')
})

取消监听事件

每个 on 事件监听接口都有对应的 off 接口，用来取消对事件的监听。on 接口将回调函数压入事件的回调函数队列，当事件发生时，回调函数队列会被遍历，其中的函数会被逐个执行。off 接口将回调函数从事件的回调函数队列中移除，当事件发生时，队列中没有该函数，于是该函数便不会执行。

let callback = res => {
  console.log('当前进度', res.currentTime)
  console.log('视频总时长', res.duration)
  // 当播放到第 3 秒时，调用 off* 接口取消对该事件的监听，callback 函数将不再执行
  if (res.currentTime >= 3) {
    video.offTimeUpdate(callback)
  }
}
video.onTimeUpdate(callback)

对于 off* 接口有一种常见的错误理解，如下

video.onTimeUpdate(res => {
  console.log('当前进度', res.currentTime)
  console.log('视频总时长', res.duration)
})
video.play()
setTimeout(() => {
  video.offTimeUpdate(res => {
    console.log('当前进度', res.currentTime)
    console.log('视频总时长', res.duration)
  })
}, 3000)

这里传入 on 接口和 off 接口的两个函数虽然代码一样，但是是两个不同的函数实例。因此 off* 接口在回调函数队列中找不到这个实例，也就做不到把这个函数从回调函数队列中移除了。

销毁视频

当不再需要使用视频时，可以将创建的视频销毁

video.destroy()