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

生而为人 谁不付出 谁不努力

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

下面是关键方法代码

//indexCurrent:null 这个是定义在page里面
videoPlay: function (e) {
    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()
    }
  }

<video src="{{item.url}}" title="{{item.title}}" style="width:100%;height:332rpx;"  id="myVideo{{index}}"  data-index='{{index}}' bindplay="play" ></video>





//视频切换暂停播放
  play(e) {
    var that = this;
    var id = e.currentTarget.id;
    for (var i = 0; i < that.data.healthKjList.length; i++) {
      if (id === 'myVideo' + i) {
        //console.log('播放视频不做处理');
      } else {
        //console.log('暂停其他正在播放的视频');
        var videoContext = wx.createVideoContext("myVideo"+i, that);
        videoContext.pause();
      }
    }
  },

下面是xml文件代码  healthKjList是你的视频列表 

<block wx:for="{{healthKjList}}" wx:key="{{index}}">
                    <li wx:if="{{index<2}}">
                        <video src="{{item.url}}" style="width:100%;height:332rpx;"    id="myVideo{{index}}" bindtap="videoPlay" data-index='{{index}}' ></video>
                        <p>{{item.title}}</p>
                    </li>
                    </block>

 主要属性和方法选中部分

还可以增加弹幕  danmu-list

danmuList: [
      {
        text: '第 1s 出现的弹幕',
        color: '#ff0000',
        time: 1
      },
      {
        text: '第 3s 出现的弹幕',
        color: '#ff00ff',
        time: 3
      }]