小程序 video视频滑动切换（滑动的其实是图片，然后根据下标来更改视频）
小程序video视频滑动切换效果，只创建三个，根据滑动来切换video
话不多说，
如果滑动时候图片滑动不够流畅可以试着加一下mode属性，小程序image的mode属性，4种缩放，9中剪裁，总有一款适合你呀
//index.wxml
<view class="container" catchtap="multipleTap" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" bindtouchcancel="touchCancel">
<view class="video_dialog" ></view>
<block >
<view class='coverPic {
{videoImg}}'>
<view class='prevCoverImgCon {
{prevCoverStatus}}'>
<image class='prevCoverImg' src='{
{prevCoverImg}}' animationend="testEvent"></image>
</view>
<view class='curCoverImgCon {
{curCoverStatus}}'>
<image class='curCoverImg' src='{
{curCoverImg}}' animationend="testEvent"></image>
</view>
<view class='nextCoverImgCon {
{nextCoverStatus}}' animationend="testEvent">
<image class='nextCoverImg' src='{
{nextCoverImg}}'></image>
</view>
</view>
<video poster="{
{videos[videoIndex].video_thum}}" class="vvideo video {
{videoStatus}}" bindtimeupdate="bindtimeupdate" bindwaiting="bindwaiting" id="kdvideo" autoplay="{
{autoplay}}" hidden="{
{animationShow}}" objectFit="cover" src="{
{videos[videoIndex].video_name}}" bindplay="bindplay" controls="{
{controls}}" loop="true"></video>
<image class="play-btn" wx:if="{
{!playState && !animationShow}}" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2612838814,1844730233&fm=26&gp=0.jpg"></image>
<progress class="progress " percent="{
{percent}}" activeColor="#ffffff" backgroundColor="#A9A9A9" stroke-width="1" wx:if="{
{!waiting}}" />
<image class="loadgif wx:if="{
{
waiting}}" src="/wap/test/wap/xcxImg/a.gif?90"></image>
</block>
</view>
//css
.container {
height: 100vh;
width: 100vw;
}
.video_dialog {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 10;
background-color: rgba(194, 88, 88, 0);
}
/* 封面格式 */
.coverPic {
width: 100%;
height: 100%;
position: fixed;
top: 0rpx;
}
.coverPic .prevCoverImgCon {
width: 100%;
height: 100%;
position: fixed;
}
.coverPic .nextCoverImgCon {
width: 100%;
height: 100%;
position: fixed;
}
.coverPic .curCoverImgCon {
width: 100%;
height: 100%;
position: fixed;
}
.coverPic image {
width: 100%;
height: 100%;
top: 100%;
transform: translateY(-100%);
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.coverPic .prevCoverImgCon {
top: -100%;
}
.coverPic .nextCoverImgCon {
bottom: -100%;
}
.coverPic .curCoverImgCon {
top: 0%;
}
.nextCoverImgCon.up {
animation: nextCoverUp 1s;
}
@keyframes nextCoverUp {
from {
bottom: -100%;
display: block;
}
to {
bottom: 0;
display: none;
}
}
.prevCoverImgCon.down {
animation: prevCoverDown 1s;
}
@keyframes prevCoverDown {
from {
top: -100%;
display: block;
}
to {
top: 0;
display: none;
}
}
.video.up {
height: 0rpx;
}
.video.down {
height: 0rpx;
}
.video.now {
height: 100%;
}
.curCoverImgCon.up {
animation: videoUp 1s;
}
.curCoverImgCon.down {
animation: videoDown 1s;
}
@keyframes videoShow {
from {
opacity: 0;
}
to {
opacity: 100%;
}
}
@keyframes videoUp {
from {
top: 0rpx;
display: block;
}
to {
top: -100%;
display: none;
}
}
@keyframes videoDown {
from {
top: 0rpx;
display: block;
}
to {
top: 100%;
display: none;
}
}
.coverPic.hide {
display: none;
}
.play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 128rpx;
width: 128rpx;
}
.progress {
position: absolute;
left: 0;
bottom: 98rpx;
height: 4px;
width: 100vw;
}
.loadgif {
width: 750rpx;
height: 2rpx;
position: fixed;
left: 0;
bottom: 98rpx;
z-index: 100
}
.vvideo {
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
}
//js
var up;
var down;
var moveFlag = true; // 判断执行滑动事件
Page({
/**
* 页面的初始数据
*/
data: {
videos: [{
video_name: "/video/obls65cvkffxu3sbjfcharkekbjdkwlkmrat2pi.mp4?v=1587801722",
video_thum: "/video_thum/ofkts23okvbum3t2gj2w2ytimzstimlkmntt2pi.jpg?v=1587801722",
},{
video_name: "/video/irvwi6teirstm6skofwxunsooj2vmscelb3t2pi.mp4?v=1586598963",
video_thum: "/video_thum/ijdcwy3boviwi2lrfnufezcconsdk6scf5tt2pi.jpg?v=1586598963",
},{
video_name: "/video/knxeuwkkm5we62tli5rww5zumq2vuk2qnr3t2pi.mp4?v=1586590877",
video_thum: "/video_thum/kvje62sopezeqm3xo5zdq2jsongei22mo5at2pi.jpg?v=1586590877",
},{
video_name: "/video/f4zfi6cof5cfanl2lbmguqkinq2ewvlhlbit2pi.mp4?v=1586589783",
video_thum: "/video_thum/mjbu4sbsmzixq5lemrruq33pgqxuwttojzat2pi.jpg?v=1586589783",
},{
video_name: "/video/nbrg22lipfsecwddjfxeo3zlindxc6tkgbat2pi.mp4?v=1586586809",
video_thum: "/video_thum/fnjtg2kgoj3hs52wgrwhg222n5yge3crmjat2pi.jpg?v=1586586809",
},
],
waiting: true,
playState: true,
animationShow: false,
touchStartTime: 0,
// 触摸结束时间
touchEndTime: 0,
// 最后一次单击事件点击发生时间
lastTapTime: 0,
// 单击事件点击后要触发的函数
lastTapTimeoutFunc: null,
autoplay: true,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
//videoIndex 当前播放的视频的下标
that.setData({
videoIndex:0
})
},
/// 单击、双击
multipleTap: function (e) {
var that = this
// 控制点击事件在350ms内触发，加这层判断是为了防止长按时会触发点击事件
if (that.touchEndTime - that.touchStartTime < 350) {
// 当前点击的时间
var currentTime = e.timeStamp
var lastTapTime = that.lastTapTime
// 更新最后一次点击时间
that.lastTapTime = currentTime
// 如果两次点击时间在300毫秒内，则认为是双击事件
if (currentTime - lastTapTime < 300) {
// 成功触发双击事件时，取消单击事件的执行
clearTimeout(that.lastTapTimeoutFunc);
that.setData({
navShow: !that.data.navShow
})
// wx.showToast({
// title: '双击事件被触发',
// icon:'none',
// duration:1000
// })
} else {
// 单击事件延时300毫秒执行，这和最初的浏览器的点击300ms延时有点像。
that.lastTapTimeoutFunc = setTimeout(function () {
that.changePlayStatus();
// wx.showToast({
// title: '单击事件被触发',
// icon:'none',
// duration:1000
// })
}, 300);
}
}
},
touchStart(e) {
var that = this;
that.touchStartTime = e.timeStamp
//console.log(e.touches[0].clientY)
that.setData({
touchstartY: e.touches[0].clientY,
touchstartX: e.touches[0].clientX
})
this.data.touchstartY = e.touches[0].clientY;
this.data.touchstartX = e.touches[0].clientX;
up = false;
down = false;
},
//触摸移动事件
touchMove: function (e) {
// console.log(e)
let touchendY = e.touches[0].clientY;
let touchstartY = this.data.touchstartY;
let touchendX = e.touches[0].clientX;
let touchstartX = this.data.touchstartX;
//向上滑动
if (touchendY - touchstartY <= -40) {
// console.log("向上滑动");
up = true;
down = false;
}
//向下滑动
if (touchendY - touchstartY >= 40) {
// console.log("向下滑动");
up = false;
down = true;
}
if (moveFlag) {
if (touchstartX - touchendX > 50 && Math.abs(touchendY - touchstartY) < 70) {
moveFlag = false;
this.changePlayStatus2();
return;
}
}
},
//触摸结束事件
touchEnd: function (e) {
var that = this;
var videoList = that.data.videos;
that.touchEndTime = e.timeStamp
var videopage = that.data.videoIndex
moveFlag = true
// 向上滑动（下滑）
if (up === true) {
if (videopage >= videoList.length - 2) {
wx.showToast({
title: "已经最后一个了",
icon: 'none',
duration: 1000
})
// 也可重新请求接口，
// 比如
// videopage++;
// that.XXX()
return;
} else {
videopage++;
}
that.animate(videopage, down, up);
}
// 向下滑动（上滑）
if (down === true) {
if (videopage == 0) {
if (videoList.length > 0) {
// videopage = videoList.length - 1;
wx.showToast({
title: "已经是第一个了",
icon: 'none',
duration: 1000
})
return;
}
} else {
videopage--;
}
that.animate(videopage, down, up);
}
if (up === true || down === true) {
let curVideo = that.data.videos[videopage];
console.info("当前视频", curVideo);
that.setData({
curVideo: curVideo,
// videoIndex: videopage,
});
up = false;
down = false;
// that.playVideo();
}
},
//动画效果
animate: function (videopage, down, up) {
var that = this;
var videopage = videopage;
var videoList = that.data.videos;
var down = down;
var up = up;
var prevCoverImg, nextCoverImg, curCoverImg;
var videoIn = videopage
// start 上下滑动画
if (up)
videopage = (videopage + videoList.length - 1) % videoList.length;
if (down)
videopage = videopage + 1;
var preIndex = (videopage + videoList.length - 1) % videoList.length;
var nextIndex = (videopage + 1) % videoList.length;
console.info("当前页", videopage, "上一页", preIndex, "下一个", nextIndex);
prevCoverImg = videoList[preIndex].video_thum;
curCoverImg = videoList[videopage].video_thum;
nextCoverImg = videoList[nextIndex].video_thum;
console.info("上一个封面", prevCoverImg)
console.info("当前的封面", curCoverImg)
console.info("下一个封面", nextCoverImg)
that.setData({
prevCoverImg: prevCoverImg,
nextCoverImg: nextCoverImg,
curCoverImg: curCoverImg,
playState: true,
})
if ((!prevCoverImg && (up === true)) || (!nextCoverImg && (down === true))) {
} else {
if (up === true) {
that.setData({
nextCoverStatus: 'up',
curCoverStatus: 'up',
videoStatus: 'up',
videoIndex: videoIn,
})
} else if (down === true) {
that.setData({
prevCoverStatus: 'down',
curCoverStatus: 'down',
videoStatus: 'down',
videoIndex: videoIn,
})
}
setTimeout(function () {
that.setData({
nextCoverStatus: '',
prevCoverStatus: '',
curCoverStatus: '',
videoStatus: 'now',
});
}, 1000)
// that.playVideo();
}
//end 上下滑动画
},
// 暂停，播放
changePlayStatus() {
let playState = !this.data.playState
if (!this.data.waiting) {
if (playState) {
this.vvideo.play()
} else {
this.vvideo.pause()
}
this.setData({
playState: playState
})
}
},
// 跳转时候关闭视频
changePlayStatus2() {
let playState = !this.data.playState
if (!this.data.waiting) {
if (!playState) {
this.vvideo.pause()
this.setData({
playState: playState
})
}
}
},
bindtimeupdate(e) {
let percent = (e.detail.currentTime / e.detail.duration) * 100
this.setData({
percent: percent.toFixed(2)
})
},
bindwaiting: function () {
this.setData({
waiting: true
})
},
bindplay() {
this.setData({
waiting: false
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
this.vvideo = wx.createVideoContext("kdvideo", this)
this.animation = wx.createAnimation({
duration: 500,
transformOrigin: '0 0 0'
})
this.setData({
topHeight: wx.getMenuButtonBoundingClientRect().top
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
、、、、希望对大家有所帮助