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

本文链接：https://blog.csdn.net/youtiankeng/article/details/108547610

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

使用 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>