Exception handling - when video/audio audio and video are played, the previous one is not stopped and the current one is also playing, causing multiple files to play at the same time

WeChat applet exchange (QQ group: 769977169 )

When using video or audio components to play audio and video, click to play A file, and then click B file to play, it may cause A and B to play at the same time. The reason for this is that the playback of the A file is not stopped when the B file is played.

The specific solution is to bind the event in the video or audio component, and improve the processing logic in the wxjs file. The code example is as follows:

Binding events in the xxx.wxml file

<audio ... catchtap='audioPlay'></audio>

<video ... catchtap='videoPlay'></video>

Implemented in xxx.wxjs file

audioPlay: function(even) {
    console.log(even)

    // stop the playback of the previous video
    if (this.videoContext) {
      this.videoContext.pause()
    }
    // stop playback of the previous audio
    if (this.audioContext) {
      this.audioContext.pause()
    }
    this.audioContext = wx.createAudioContext(even.currentTarget.id, this)
  }

  videoPlay: function (even) {
    console.log(even)
    // stop playback of the previous audio
    if (this.audioContext) {
      this.audioContext.pause()
    }

    // stop the playback of the previous video
    if (this.videoContext) {
      this.videoContext.pause()
    }
    this.videoContext = wx.createVideoContext(even.currentTarget.id, this)
  }