- index.html
<view style="padding:0" data-e="{{e}}" bindtouchstart="start" bindtouchend="end">
<swiper wx:if="{{!videoSrc}}" current="{{current}}" class="swiper" circular="{{true}}" indicator-dots="{{true}}" data-e="{{e}}" bindchange="changeCurrent">
<view wx:for="{{info}}" wx:key="this">
<swiper-item>
<image src="{{item.img}}" class="banner" mode='aspectFill' />
<image class="play" wx:if="{{item.type == 'video'}}" src='/images/play.png'
bindtap="play" data-item="{{item}}"/>
</swiper-item>
</view>
</swiper>
<!-- 视频的autoplay和controls属性要加上,不加有的安卓手机在缓冲的时候没有loading效果 -->
<video enable-progress-gesture="{{false}}" custom-catch="{{false}}" wx:if="{{videoSrc}}" class="video" autoplay="{{true}}" src="{{videoSrc}}" controls="controls" bindpause="handleStop" ></video>
</view>
- index.js
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
info: [],
videoSrc:'',
videoImg:'',//视频封面,缓冲时会出现黑屏,加视频封面会提升用户体验
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 > 2*absY){
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数据
let info = [{
id: '1',
img: 'http://img4.imgtn.bdimg.com/it/u=3882508552,2527877926&fm=26&gp=0.jpg',
type: 'video',
video: 'https://interface.sina.cn/wap_api/video_location.d.html?cid=37766&table_id=36885&did=icezueu6231605&vt=4&creator_id=1001&vid=30447305701&video_id=304473057&r=video.sina.cn%2Fnews%2F2019-09-16%2Fdetail-iicezueu6231605.d.html&wm=30490005525198963&time=1577412073497&rd=0.018419081320328656'
},
{
id: '2',
img: 'http://img2.imgtn.bdimg.com/it/u=3355791600,110151422&fm=26&gp=0.jpg',
type: 'img',
video: ''
},
{
id: '3',
img: 'http://img3.imgtn.bdimg.com/it/u=2846566051,411513524&fm=26&gp=0.jpg',
type: 'img',
video: ''
}
]
this.setData({info})
},
onHide:function(){
//小程序进入后台禁止轮播,防止swiper出现抽搐的bug
this.setData({
autoplay:false,
videoSrc:'',
})
}
})
- index.wxss
.swiper{
width:100%;
height:450rpx;
}
.banner{
width:100%;
height:100%;
}
.play{
width:100rpx;
height:100rpx;
position:absolute;
top:175rpx;
left:50%;
margin-left:-50rpx;
}
.video{
width:100%;
height:450rpx;
position:absolute;
top:0;
}
- 效果图
github 项目地址:https://github.com/kesixin/VideoDemo