<swiper class="swiper" indicator-dots autoplay interval="4000" duration="1000" circular>
<block wx:for="{{movies}}" wx:for-index="index">
<swiper-item>
<image src="{{item}}" class="slide-image" mode="aspectFill"/>
</swiper-item>
</block>
<block wx:for="{{videolist}}">
<swiper-item>
<!-- 视频图片层 如果固定只有一个视频其实不用写-->
<!-- 这个是为了防止 如果多个视频播放了其中一个再次去播放其他的就前一个视频也还在播放，就会有多个视频都在播放-->
<view data-id="{{index}}" class="video-image-box" style="display: {{ _index == index ? 'none' : 'block' }};" bindtap="getvideoplay">
<view class="video-cover-box">
<image class="video-image" src="https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640" mode="aspectFit">
</image>
</view>
<!-- 视频按钮 -->
<image class="video-image-play" src="../../static/img/锁@2x.png" mode="scaleToFill"></image>
</view>
<!-- 视频路径 -->
<video src='{{item}}' data-id="{{index}}" wx:if="{{index == _index}}" objectFit='contain' controls class="video"></video>
</swiper-item>
</block>
</swiper>
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
movies: ["图片链接"],
videolist: ["视频链接"],
},
onLoad: function() {
},
/**
* banner里面的视频图片层
*/
getvideoplay: function(e) {
console.log(e)
var _index = e.currentTarget.dataset.id;
this.setData({
_index: _index
})
//停止正在播放的视频
var videoContextPrev = wx.createVideoContext(_index + "")
videoContextPrev.stop();
setTimeout(function() {
//将点击视频进行播放
var videoContext = wx.createVideoContext(_index + "")
videoContext.play();
}, 500)
},
})
//样式自己看着办
.video{
width:100% !important;
height:204px !important;
}
.video-cover-box{
height: 204px;
width: 100%;
background: #000;
text-align: center;
}
.video-image-play {
position: absolute !important;
width: 80rpx !important;
height: 80rpx !important;
top: calc(50% - 40rpx) !important;
left: calc(50% - 40rpx) !important;
z-index: 100 !important;
}
