WeChat applet solves multiple videos playing at the same time

Solve the problem of simultaneous playback of multiple videos in the Mini Program

Ideas:
1. After clicking play, if there is no video currently playing, just play it directly.
2. Pause if there is a video being played, and then play the current video.
3. Of course, it is necessary to judge whether it is the same video.

Directly on the code below

data: {
    
    
//正在播放的视频ID
      PrevideoID:''
  },
 <video id = "{
    
    {
    
    item.data.urlInfo.id}}" bindplay="handlePlay" class="videoitem" src="{
    
    {
    
    item.data.urlInfo.url}}"  >
handlePlay(event){
    
    
  //当前即将要播放的视频ID
  let videoID = event.currentTarget.id
  console.log(videoID)
  //判断是否正在有视频播放
  if(this.data.PrevideoID)
  {
    
    
    //有正在播放的视频
    //判断和上一个视频是否是同一个视频
    if(this.data.PrevideoID != videoID)
    {
    
    
      //不是同一个视频就暂停上一个视频播放
      wx.createVideoContext(this.data.PrevideoID).stop()
      //播放当前视频
      wx.createVideoContext(videoID).play()
      //更新prevideoID
      this.setData({
    
    
        PrevideoID:videoID
      })
    }
  }
  //没有正在播放的视频就直接保存videoID
  else{
    
    
    this.setData({
    
    
      PrevideoID:videoID
    })
  }
},

Guess you like

Origin blog.csdn.net/qq_44606064/article/details/113934931