# video

Mini games can use wx.createVideo() to insert video on the interface.

const src ='http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&dfileparam=302c02010104253020420ef32e20302020457

const video = wx.createVideo({
  x: 10,
  y: 76,
  width: 300,
  height: 200,
  // Show the default video controls
  controls: true,
  // incoming
  src
})

The video level is higher than the canvas, so the content drawn on the canvas will be obscured by the video. Mini games do not support cover-view/cover-image, so other custom UI elements cannot be overlaid on the video.

Multiple videos can be inserted in the mini game. The video level inserted later is higher than the level inserted first.

# Control the video

The Video object returned by wx.createVideo() has methods to control video playback, pause, progress jump, full screen, and exit full screen.

Play video

video.play()

Pause video

video.pause()

Progress Jump

video.seek(10)

# Monitoring events

Video also provides a monitoring interface for events such as video buffering, pause, playback progress, etc.

video.onTimeUpdate(res => {
  console.log('Current progress', res.currentTime)
  console.log('Total video duration', res.duration)
})

video.onEnded(res => {
  console.log('The video has finished playing')
})

# Cancel listening event

Each on* event monitoring interface has a corresponding off* interface, which is used to cancel the event monitoring. The on* interface pushes the callback function into the callback function queue of the event. When the event occurs, the callback function queue will be traversed, and the functions in it will be executed one by one. The off* interface removes the callback function from the callback function queue of the event. When the event occurs, there is no such function in the queue, so the function will not be executed.

let callback = res => {
  console.log('Current progress', res.currentTime)
  console.log('Total video duration', res.duration)

  // When playing to the third second, call off* interface to cancel the monitoring of the event, the callback function will no longer be executed
  if (res.currentTime >= 3) {
    video.offTimeUpdate(callback)
  }
}

video.onTimeUpdate(callback)

There is a common misunderstanding of the off* interface, as follows

video.onTimeUpdate(res => {
  console.log('Current progress', res.currentTime)
  console.log('Total video duration', res.duration)
})

video.play()

setTimeout(() => {
  video.offTimeUpdate(res => {
    console.log('Current progress', res.currentTime)
    console.log('Total video duration', res.duration)
  })
}, 3000)

Although the two functions passed into the on* interface and off* interface have the same code, they are two different function instances. Therefore, the off* interface cannot find this instance in the callback function queue, so it is impossible to remove this function from the callback function queue.

# Destroy the video

When you no longer need to use the video, you can destroy the created video

video.destroy()