视频

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

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

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

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

控制视频

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

播放视频

  1. video.play()

暂停视频

  1. video.pause()

进度跳转

  1. video.seek(10)

监听事件

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

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

取消监听事件

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

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

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

  1. video.onTimeUpdate(res => {
  2. console.log('当前进度', res.currentTime)
  3. console.log('视频总时长', res.duration)
  4. })
  5. video.play()
  6. setTimeout(() => {
  7. video.offTimeUpdate(res => {
  8. console.log('当前进度', res.currentTime)
  9. console.log('视频总时长', res.duration)
  10. })
  11. }, 3000)

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

销毁视频

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

  1. video.destroy()