微信小程序实现只能播放一个视频，其他视频暂停

最新推荐文章于 2024-08-01 21:09:24 发布

子义间

最新推荐文章于 2024-08-01 21:09:24 发布

阅读量2.5w

点赞数 5

分类专栏：小程序

本文链接：https://blog.csdn.net/D_Z_Yong/article/details/101060465

版权

小程序专栏收录该内容

6 篇文章 0 订阅

订阅专栏

原理：1.点击当前视频，先判断是否有视频正在播放，如果没有，立即播放，如果有，则暂停其他视频，再播放当前视频

话不多说，直接看代码

data: {
	list:[1,2,3,4],
    name:'',
    test:'test',
    tag: false,
    left:0,
    indexCurrent: null,
  },

methods: {
  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) {
          console.log(123)
          videoContextPrev.pause()
          this.setData({
            indexCurrent: curIdx
          })
          var videoContextCurrent = wx.createVideoContext(curIdx,this)
          videoContextCurrent.play()
        }
      }
    },
}

wxss

<view class="main" wx:for="list" wx:for-index="index" wx:key="index" wx:for-index="index">
	<view class="video" >
    	<video src="http://1253438777.vod2.myqcloud.com/e21e1ff6vodtransgzp1253438777/b237ff415285890793696679612/v.f20.mp4" class="video_video" show-fullscreen-btn id="video{{index}}" bindtap="video_play"></video>
	</view>
</view>