<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}小程序
