微信小程序播放当前视频暂停其他视频 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

微信小程序播放当前视频暂停其他视频

发表时间:2020-10-7

发布人:葵宇科技

浏览次数:45

微信小程序播放当前视频 暂停其他视频

微信小程序播放当前视频 暂停其他视频
微信开发文档
VideoContext
video
wx.createVideoContext(string id, Object this)

video标签中的id要和wx.creatVideoContext(id)中的id保持一致

注意!!!这里的index和循环里面的i的值是一致的 就没有写index传到js中去
wxml代码

<view>
  <view wx:for="{{videos}}" class="mainV">
	//id为modelV{{index}}
    <video id='modelV{{index}}' src="{{item.src}}" binderror="videoErrorCallback" data-index="{{index}}" catchpause="bindpause" catchended="bindended" catchplay="bindplay" show-progress="true" >
    </video>
  </view>
</view>

js代码

 bindplay(e) {
    var that=this;
    for(var i=0;i<that.data.videos.length;i++){
      that.setData({
        [`videos[${i}].modelV`]: wx.createVideoContext('modelV'+i)
      })
    }
    console.log('监听播放');
    that.setData({
      playIndex:e.currentTarget.dataset.index
    })
    var playIndex=that.data.playIndex;
    var id=e.currentTarget.dataset.id;
    
     // 暂停其他视频逻辑----------------------
     for (var i=0;i<that.data.videos.length;i++) {
      if (i != playIndex) {
        console.log(that.data.videos[i].modelV);
        that.data.videos[i].modelV.pause();
      }
    }
  },

附上data中数组videos

 videos:[{src:'https://connect-cdn-prd-cn.unitychina.cn/20190530/videos/0ca3f3b3-2e35-4805-8796-ea67f931f830_20190529_HDRP_PostProcessing.mp4',name:'教学',title:'教师',modelV:''}
    {src:'https://connect-cdn-prd-cn.unitychina.cn/20190530/videos/0ca3f3b3-2e35-4805-8796-ea67f931f830_20190529_HDRP_PostProcessing.mp4',name:'还不错',title:'很好',modelV:''},
    {src:'https://connect-cdn-prd-cn.unitychina.cn/20190530/videos/0ca3f3b3-2e35-4805-8796-ea67f931f830_20190529_HDRP_PostProcessing.mp4',name:'还不错',title:'很好',modelV:''}]

相关案例查看更多