微信小程序 多个视频同时只播放一个

微信小程序 多个视频同时只播放一个

// wxml
<view class="flex">
	<view wx:for='{{list}}' class="videoList">
		<view class="videoTitle">{{item.title}}</view>
		<video src="{{item.path}}"  id="myVideo{{index}}" bindtap="videoPlay" data-index='{{index}}'  bindwaiting='waitting' binderror='error'></video>
	</view>

</view>
// js
videoPlay: function (e) {
  var that = this;
  var curIdx = e.currentTarget.dataset.index;
  console.log(curIdx)
  
  // 有播放时先将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()
    if(curIdx ==that.data.indexCurrent ){
      videoContextPrev.pause()

    }
  } else {  // 没有播放时播放视频
    that.setData({
      indexCurrent: curIdx
    })
    var videoContext = wx.createVideoContext('myVideo' + curIdx) //这里对应的视频id
    videoContext.play()
  }
},
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页