微信小程序 同一页面多个视频只让选中的这个播放 其他都暂停 只播放一个视频

微信小程序 同一页面多个视频只让选中的这个播放 其他都暂停 只播放一个视频

使用 wx.createVideoContext创建对应视频的实体，并对此实体做播放和暂停操作 直接上代码

js

//定义变量indexCurrent:null
 data：{
	  indexCurrent:null,
	}

  video_play(e) {
    var curIdx = e.currentTarget.id;
    // 没有播放时播放视频
    console.log(curIdx)
    if (!this.data.indexCurrent) {
      this.setData({
        indexCurrent: curIdx
      })
      var videoContext = wx.createVideoContext(curIdx,this) //这里对应的视频id
      videoContext.play()
    } else { // 有播放时先将prev暂停，再播放当前点击的current
      var videoContextPrev = wx.createVideoContext(this.data.indexCurrent,this)//this是在自定义组件下，当前组件实例的this，以操作组件内 video 组件（在自定义组件中药加上this，如果是普通页面即不需要加）
      if (this.data.indexCurrent != curIdx) {
        videoContextPrev.pause()
        this.setData({
          indexCurrent: curIdx
        })
        var videoContextCurrent = wx.createVideoContext(curIdx,this)
        videoContextCurrent.play()
      }
    }
  },

wxml

<view class="main" wx:for="{{list}}" wx:for-index="index" wx:key="index">
	<view class="video" >
    	<video src="xxx.mp4" id="video{{index}}" bindtap="video_play"></video>
	</view>
</view>

主要就是用id来标识现在播放的视频

即curIdx与indexCurrent来进行标识