# 视频

小游戏可以使用 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()