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

})

}

})

以上代码亲测可用

参考文章：http://blog.chinaunix.net/uid-30029642-id-5787093.html