直奔代碼主題
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 id="mdcVideo" style="width:100%;height:100% " hidden="{{mdc_show}}" >
<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,
})
}
})
以上代碼親測可用