微信小程序的轮播图+视频+图片（swiper）

项目简介：一个商城小程序
需求场景：在首页加一个轮播图，轮播图包含多个视频和多张图片，视频播放，图片页面跳转页面
实现技术：swiper
思路（一）：刚开始写的时候，用的是将video直接嵌套在swiper-item里面，这种写法带来的问题就是，1，一个页面里面最多出现3个video标签，但是我的需求的video是不确定的，所以bug在视频多的情况下就会出现，2，轮播图切换时视频停止播放，当轮播图回到该视频或者手动划到该视频，无法播放视频，一直处于加载中的状态，3，video组件的封面在视频播放之后就不会再次出现，但是我的需求是播放完了视频封面要出现，这里的封面问题在苹果的一些机型上就会重新出现，4，刚刚进入页面，视频有的有封面有的没有，5，跳转页面时，video.context.pause()或者stop（）无效，视频依然播放，6，视频播放时，轮播图停止滚动，播放结束之后，轮播图开始滚动，但是视频不能重新播放（微信版本号7.0.8，调试库版本号2.8.3）
思路（二）：在swiper里面装的全是图片，若某条的数据的类型是视频，则在该图片上加一个播放按钮，点击播放按钮swiper隐藏，记录当前的current，同层的video出现自动播放，监听视频的播放进度，视频暂停swiper出现，video隐藏
代码：

//index.js
//获取应用实例
const app = getApp()

Page({
data: {
info: [],
videoSrc:’’,
videoImg:’’,//视频封面，缓冲时会出现黑屏，加视频封面会提升用户体验，但是ios手机封面图会闪现，不知道怎么解决
autoplay:true,
touchX:0,//手指按下时x的坐标
touchY:0,//手指按下时y的坐标
interval:null,//计时器
time:0,//按下到松开的时间
current:0//swiper的当前轮播图下标
},
//事件处理函数
play: function(val) {
this.setData({ videoSrc: val.currentTarget.dataset.item.video, autoplay: false, videoImg: val.currentTarget.dataset.item.img})
},
//禁止视频的手动控制进度属性，监听手指移动去滑动轮播图（手指滑动轮播图和控制视频进度事件冲突）
//手指开始触屏
start:function(e){
//获取触摸的原始点
this.setData({
touchX: e.touches.length>0 ? e.touches[0].pageX : 0,
touchY: e.touches.length > 0 ? e.touches[0].pageY : 0
})
let timeNew=this.data.time
//开始记录时间
this.data.interval=setInterval(()=>timeNew++,100)
this.setData({time:timeNew})
},
//手指结束触屏
end:function(e){
let touchX = e.changedTouches.length > 0 ? e.changedTouches[0].pageX : 0
let touchY = e.changedTouches.length > 0 ? e.changedTouches[0].pageY : 0
let tmX = touchX - this.data.touchX
let tmY = touchY - this.data.touchY
if(this.data.time < 10){
let absX = Math.abs(tmX)
let absY = Math.abs(tmY)
if(absX > 2absY){
console.log(‘5555’)
//滑动swiper，视频停止播放
this.setData({
autoplay:true,
videoSrc:’’,
videoImg:’’
})
if(tmX < 0){
//左滑
console.log(‘左滑’)
this.setData({
current : this.data.current == (this.data.info.length-1) ? 0 : this.data.current+1
})
}else{
//右滑
console.log(‘右滑’)
this.setData({
current : this.data.current>0 ? this.data.current-1 : this.data.info.length-1
})
}
}
}
clearInterval(this.data.interval)
this.setData({time:0})
},
handleStop:function(){
this.setData({ videoSrc: ‘’, autoplay: true, videoImg:’’})
},
changeCurrent:function(e){
//手指滑动轮播图已经在视频播放的时候做了，这里只需要做轮播图自动滚动，但是不停的调用setData可能会出现一些未知的bug，可根据需求场景设置
if(e.detail.source == ‘autoplay’){
this.setData({current:e.detail.current})
}
},
onShow: function() {
//从后台拿回数据，写在onshow里面是因为返回此页面时，根据需求去判断是否拿swiper数据
//后台返回的数据
this.setData({info})
},
onHide:function(){
//小程序进入后台禁止轮播，防止swiper出现抽搐的bug
this.setData({
autoplay:false,
videoSrc:’’,
})
}
})*

现在的这种方式能实现需求，但是有一个问题就是视频缓冲很慢，我们加了cdn，custom-catch=“{{false}}”官方已经说不用了，但是苹果机如果不用的话视频就不会缓冲出来，这个是我用的微信开发者工具写的demo，实际开发中应该用其他的编辑器，第一次写，还有许多地方需要完善完整，有指教的地方请留言哦！！
demo完整代码（https://github.com/Lagger-Wq/video）