<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
}
请发表评论