小程序解决多个视频同时播放

思路:
1:点击视频播放后,如果没有正在播放的视频就直接播放该视频,有正在播放的视频就判断是否是同一个视频,不是就暂停正在播放的视频,然后播放点击的视频
小程序 VideoContexti:
VideoContext 实例,可通过
wx.createVideoContext 获取。
VideoContext 通过 id 跟一个 video 组件绑定,操作对应的 video 组件。

**方法:**
 VideoContext.play() 播放视频

 VideoContext.pause() 暂停视频

 VideoContext.stop() 停止视频
data:{
  PrevideoID:'',//存放视频id
}
  <video  src="{{n_item.url]}}"  bindplay="handlePlay" id="{{n_item.id}}"
       controls></video>
  handlePlay(event) {
    //这里的vid是视频的id
     let vid = event.currentTarget.id;
     if(this.data.PrevideoID){
       if(this.data.PrevideoID != vid){
         //判断当前播放视频和上一个播放视频是否是同一个,
         //暂停上一个播放的
         wx.createVideoContext(this.data.PrevideoID).stop()
          //播放当前视频
           wx.createVideoContext(vid).play()
          //更新prevideoID
          this.setData({
            PrevideoID:vid
          })
       }
     }else{
      console.log('false')
      this.setData({
        PrevideoID:vid
      })
     }
   },
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值