新闻中心

记录团队成长点滴以及对技术、理念的探索,同时我们乐于分享!

微信小程序多个video组件,只播放当前视频,其余暂停

2020-08-13 08:49:22 分类:技术学堂

在开发微信小程序的时候,使用了多个video组件,点击当前播放视频,其他暂停其他视频


 // 绑定在video标签的bindplay
 setPlayIndex: function (e) {
    let index = e.currentTarget.dataset.index
    this.setData({
      playIndex: index
    })
  },
 // 绑定在封面图的image标签上bindtap
 bindplayHandle: function (self, e) {
    var id = e.currentTarget.id         //点击id
    if (!self.data.playIndex) { // 没有播放时播放视频
      self.setData({
        playIndex: id
      })
      var videoContext = wx.createVideoContext(id)
      videoContext.play()
    } else {                    // 有播放时先将prev暂停,再播放当前点击的current
      var videoContextPrev = wx.createVideoContext(self.data.playIndex)
      if (self.data.playIndex != id) {                  //不知道为什么,不加这个判断的时候这个视频会一直在播放和暂停之间切换
        videoContextPrev.pause()
      }
      self.setData({
        playIndex: id
      })
      var videoContextCurrent = wx.createVideoContext(self.data.playIndex)
      videoContextCurrent.play()
    }
  },