微信小程序多video播放暂停问题
<swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{flag}}" interval="5000" duration="{{duration}}" current="{{indexCurrent}}" bindchange='onSlideChangeEnd' id='{{indexCurrent}}'> <block wx:for="{{videos}}" wx:for-index="index" wx:key="index"> <swiper-item class='video-item'> <video id="myVideo{{index}}" src='{{item}}' controls="{{controls}}" custom-cache="{{cache}}" object-fit='cover' show-center-play-btn="{{playBtn}}" autoplay='{{true}}' wx:if='{{index==indexCurrent}}'></video> <image class='video-play-btn' wx:if='{{index!=indexCurrent}}' mode='widthFix' data-index='{{index}}' bindtap='videoPlay' src='/pages/images/bofang.png'></image> </swiper-item> </block> </swiper>
//获取应用实例 var app = getApp(); Page({ /** * 页面的初始数据 */ data: { indicatorDots: true, controls: true, playBtn: false, duration: 1000, cache: false, indexCurrent: null, videos:['.....','....','.....'] }, videoPlay: function (e) { var curIdx = e.currentTarget.dataset.index; // 没有播放时播放视频 if (!this.data.indexCurrent) { this.setData({ indexCurrent: curIdx }) var videoContext = wx.createVideoContext('myVideo' + curIdx) //这里对应的视频id videoContext.play() } else { // 有播放时先将prev暂停,再播放当前点击的current var videoContextPrev = wx.createVideoContext('myVideo' + this.data.indexCurrent) if (this.data.indexCurrent != curIdx) { videoContextPrev.pause() } this.setData({ indexCurrent: curIdx }) var videoContextCurrent = wx.createVideoContext('myVideo' + curIdx) videoContextCurrent.play() } } } })
.video-item{
position: relative;
width: 100%;
height: 420rpx;
}
.video-item .video-play-btn {
position: absolute;
width: 100rpx;
height: 100rpx;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto
}
亦心晗