小程序视频只播放一个

最新推荐文章于 2021-05-20 16:48:50 发布

·那场烟花雨淋湿了梦境·

最新推荐文章于 2021-05-20 16:48:50 发布

阅读量122

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/weixin_51501187/article/details/115494461

版权

该博客内容涉及在JavaScript中管理多个视频播放的实现，通过`bindtap`事件和`wx.createVideoContext`来控制视频播放。当有视频正在播放时，如果用户点击了其他视频，当前播放的视频会被暂停，新选中的视频开始播放。如果没有视频正在播放，则直接播放用户点击的视频。此实现确保了同一时间只有一个视频在播放。

摘要由CSDN通过智能技术生成

标签内加上
id="myVideo{{index}}" bindtap="videoPlay" data-index='{{index}}'

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()
  }
},