<swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{flag}}" interval="5000" duration="{{duration}}" current="{{indexCurrent}}" bindchange=\'onSlideChangeEnd\' {{indexCurrent}}\'>
<block wx:for="{{videos}}" wx:for-index="index" wx:key="index">
<swiper-item class=\'video-item\'>
<video 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
}