微信小程序播放当前视频暂停其他视频
发表时间:2020-10-7
发布人:葵宇科技
浏览次数:65
微信小程序播放当前视频 暂停其他视频
微信小程序播放当前视频 暂停其他视频
微信开发文档
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:''}]