微信小程序实现当前页面多个视频文件只能播放一个视频，其他视频暂停

文章来自：码奴生来只知道前进~

实现的效果就是当前页面是一个视频列表，如果不处理的话，就会出现同时播放多个视频文件 效果图如下 同时播放了3个

videoPlay: function (e) {
    // console.log(e,'videoPlay')
    var that = this;
    var curIdx = e.currentTarget.dataset.index;
    
    // 有播放时先将prev暂停，再播放当前点击的current
    if (that.data.indexCurrent != null) {
      var videoContextPrev = wx.createVideoContext('myVideo' + that.data.indexCurrent)
      if (that.data.indexCurrent != curIdx) {
        videoContextPrev.pause()
      }
      that.setData({
        indexCurrent: curIdx
      })
      var videoContextCurrent = wx.createVideoContext('myVideo' + curIdx)
      videoContextCurrent.play()
    } else {  // 没有播放时播放视频
      that.setData({
        indexCurrent: curIdx
      })
      var videoContext = wx.createVideoContext('myVideo' + curIdx) //这里对应的视频id
      videoContext.play()
    }
  },
  play(e) {
    var that = this;
    var id = e.currentTarget.id;
    for (var i = 0; i < that.data.VideoList.length; i++) {
      if (id === 'myVideo' + i) {
        // console.log('播放视频不做处理');
      } else {
        // console.log('暂停其他正在播放的视频');
        var videoContext = wx.createVideoContext("myVideo"+i, that);
        videoContext.pause();
      }
    }
  },
  
  <video id="my-video" show-center-play-btn='{{true}}' style="width: 100%;" src="{{item.VideoUrl}}" bindtap="videoPlay" data-index='{{index}}' id="myVideo{{index}}"></video>