微信小程序实现只能播放一个视频其他视频暂停-小程序实现视频播放-视频播放小程序-即速应用

微信小程序实现只能播放一个视频其他视频暂停-小程序实现视频播放-视频播放小程序

浏览量：1389 时间：2020-04-06 来源：子义间

原理：1.点击当前视频，先判断是否有视频正在播放，如果没有，立即播放，如果有，则暂停其他视频，再播放当前视频1.
话不多说，直接看代码
2.
js
data:{list:[1,2,3,4],name:'',test:'test',tag:false,left:0,indexCurrent:null,},methods:{video_play(e){varcurIdxe.currentTarget.id;//没有播放时播放视频//console.log(curIdx)if(!this.data.indexCurrent){this.setData({indexCurrent:curIdx})varvideoContextwx.createVideoContext(curIdx,this)//这里对应的视频idvideoContext.play()}else{//有播放时先将prev暂停，再播放当前点击的currentvarvideoContextPrevwx.createVideoContext(this.data.indexCurrent,this)//this是在自定义组件下，当前组件实例的this，以操作组件内video组件（在自定义组件中药加上this，如果是普通页面即不需要加）if(this.data.indexCurrent!curIdx){console.log(123)videoContextPrev.pause()this.setData({indexCurrent:curIdx})varvideoContextCurrentwx.createVideoContext(curIdx,this)videoContextCurrent.play()}}},}3.
wxss
viewclass"main"wx:for"list"wx:for-index"index"wx:key"index"wx:for-index"index"viewclass"video"videosrc"http://1253438777.vod2.myqcloud.com/e21e1ff6vodtransgzp1253438777/b237ff415285890793696679612/v.f20.mp4"class"video_video"show-fullscreen-btnid"video{{index}}"bindtap"video_play"/video/view/view4.
在这里css样式就不写了，防止扰乱自己，