小程序 swiper 轮播图滚动图片 + 视频
直奔代码主题
wxml：
<view class="test_box">
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" >
<swiper-item>
<view class='ceng'>
<image src="{{mdc_videofenmian}}" hidden="{{xiaoshi}}"/>
<view class='btn'><image src="/img/play.png" hidden="{{xiaoshi}}" bindtap="bindPlay" /></view>
<video src="{{mdc_video}}" objectFit="cover" bindtouchmove="mdc_move1" controls >
<cover-view class='mdc_return' bindtap='returnquanping'>退出全屏</cover-view>
</video>
</view>
</swiper-item>
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}"/>
</swiper-item>
</block>
</swiper>
</view>
wxss：
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
//swiper循环图片地址路径
imgUrls: [
'/img/01.jpg',
'/img/02.jpg',
'/img/03.jpg'
],
indicatorDots: false,
autoplay: false,
interval: 5000,
duration: 1000,
//视频路径
mdc_video:'https://cloud.video.taobao.com/play/u/576446681/p/1/e/6/t/1/50140370746.mp4',
//替换视频的封面图
mdc_videofenmian:'/img/f2.png',
// 视频的封面图显示消失的参数
xiaoshi:false,
// 视频显示消失的参数
mdc_show:true,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
// 封面点击的时候相应的操作 获取视频在JS里的参数属性
//重点：点击图片接下来视频进行播放，但是视频播放后直接触发了视频的pause() 结局的方案是，延时150ms后再进行视频的播放，就完美解决了
bindPlay:function(e){
var that =this;
that.videoContext = wx.createVideoContext('mdcVideo');
// that.videoContext.play()
that.videoContext.pause();
setTimeout(function () {
that.videoContext.play()
}, 150);
that.setData({
xiaoshi:true,
mdc_show:false
})
},
//安卓系统能检测到 video touchemove 滑动的x距离，已此作为切换的swiper的凭证
//ios系统，检测不到video touchemove 滑动的x距离，通过cover-view 点击事件进行切换
mdc_move1: function (e) {
var that = this;
console.log(e)
console.log(e.touches[0].pageX)
that.videoContext = wx.createVideoContext('mdcVideo');
if (e.touches[0].clientX > 20) {
console.log(5555555555555555)
// that.videoContext.pause();
that.setData({
xiaoshi: false,
mdc_show: true,
})
}
},
returnquanping:function(e){
var that = this;
that.setData({
xiaoshi: false,
mdc_show: true,
})
}
})
以上代码亲测可用