经过长时间的研究和实验,终于发明一种新的兼容app、小程序的通用短视频上下滑动解决方案,该方案未使用swiper来实现,而是全新的方式,方案如下:
点击查看全文
<template>
<view @touchstart="onTouchStart" @touchend="onTouchEnd" @tap="ontap" @touchmove="onTouchmove"
:style="'width: 750rpx; height:'+screenHeight+'rpx;overflow: hidden; position: relative;'">
<!-- 适合小程序h5 app同时兼容的上下滑动视频播放器 -->
<block v-for="(item,index) in shortvideolist">
<image v-if="index==nowindex-1" :src="item.videoimg"
:style="'width: 750rpx; height: '+screenHeight+'rpx;position: absolute;top:'+((scrollTop*(nowindex+1))-screenHeight)+'rpx;z-index:1;'"
mode="aspectFill"></image>
<video @timeupdate="timeupdate" id="myVideo" v-if="index==nowindex" :poster="item.videoimg"
:src="item.videourl" loop
:style="'width: 750rpx; height: '+screenHeight+'rpx;position: absolute;top:'+(scrollTop*(nowindex+1))+'rpx;z-index:1;'"
object-fit="cover">
<cover-view
style="position: absolute;right: 10rpx; bottom: 20rpx;background-color: black;color: white;font-size: 40rpx;text-align: center;">
底部文字
</cover-view>
<cover-view style="position: absolute;top:0rpx;">
<cover-view>推荐</cover-view>
</cover-view>
</video>
<image v-if="index==nowindex+1" :src="item.videoimg"
:style="'width: 750rpx; height: '+screenHeight+'rpx;position: absolute;top:'+((scrollTop*(nowindex+1))+screenHeight)+'rpx;z-index:1;'"
mode="aspectFill">
</block>
<!-- <view style="position: absolute;z-index:123123;background-color: black;width: 750rpx;height: 100rpx;transform: translateY(100rpx);">dddd</view> -->
<!-- </view> -->
</view>
</template>
<script>
import {
proxyRefs
} from "vue";
export default {
data() {
return {
shortvideolist: [],
nowindex: 0,
screenHeight: 0,
scrollTop: 0,
isseting: false,
isdrag: false,
touchNum: 0,
movenum: 0,
}
},
onLoad() {
var that = this;
uni.getSystemInfo({
success: function(res) {
that.screenHeight = res.windowHeight / (uni.upx2px(100) / 100)-300;
}
});
setTimeout(function() {
that.shortvideolist = [{
"videoid": 3,
"video_autoplay": true,
"video_is_muted": false,
"video_is_player": true,
"videoimg": "https://repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_450,h_900,/quality,q_90",
"videoname": "风景非常好,春天来13242,让我们一起来踏春吧!!!!",
"videourl": "https://repo.bfw.wiki/bfwrepo/video/62298b73015fb.mp4"
}, {
"videoid": 7,
"video_is_player": true,
"video_autoplay": true,
"video_is_muted": false,
"videoimg": "https://repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_450,h_900,/quality,q_90",
"videoname": "风景非常好,春天来了,让我们一起来踏春吧!!!!",
"videourl": "https://repo.bfw.wiki/bfwrepo/video/62298b60d3996.mp4"
}, {
"videoid": 2325,
"video_autoplay": true,
"video_is_muted": false,
"video_is_player": true,
"videoimg": "https://repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_450,h_900,/quality,q_90",
"videoname": "风景非常好,春天来了,让我们一起来踏春吧!!!!",
"videourl": "https://repo.bfw.wiki/bfwrepo/video/62298b941b881.mp4"
}, {
"videoid": 53,
"video_autoplay": true,
"video_is_player": true,
"video_is_muted": false,
"videoimg": "https://repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_450,h_900,/quality,q_90",
"videoname": "风景非常好,春天来了,让我们一起来踏春吧!!!!",
"videourl": "https://repo.bfw.wiki/bfwrepo/video/62298b941b881.mp4"
}, {
"videoid": 225,
"video_is_player": true,
"video_autoplay": true,
"video_is_muted": false,
"videoimg": "https://repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_450,h_900,/quality,q_90",
"videoname": "风景非常好,春天来了,让我们一起来踏春吧!!!!",
"videourl": "https://repo.bfw.wiki/bfwrepo/video/62298b941b881.mp4"
}, {
"videoid": 15,
"video_is_player": true,
"video_autoplay": true,
"video_is_muted": false,
"videoimg": "https://repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_450,h_900,/quality,q_90",
"videoname": "风景非常好,春天来了,让我们一起来踏春吧!!!!",
"videourl": "https://repo.bfw.wiki/bfwrepo/video/62298b941b881.mp4"
}, {
"videoid": 125,
"video_is_player": true,
"video_autoplay": true,
"video_is_muted": false,
"videoimg": "https://repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_450,h_900,/quality,q_90",
"videoname": "风景非常好,春天来了,让我们一起来踏春吧!!!!",
"videourl": "https://repo.bfw.wiki/bfwrepo/video/62298b941b881.mp4"
}];
setTimeout(function() {
that.videocxt = uni.createVideoContext("myVideo", that);
that.videocxt.play();
}, 400);
}, 500);
},
methods: {
playv() {
var that = this;
setTimeout(function() {
if (that.shortvideolist[that.nowindex].playedtime > 0) {
console.log("current" + that.shortvideolist[that.nowindex].playedtime)
that.videocxt.seek(parseInt(that.shortvideolist[that.nowindex].playedtime));
that.videocxt.play();
} else {
that.videocxt.play();
}
}, 400);
},
onChange(e) {
this.nowindex = e.detail.current;
},
upper: function(e) {
console.log(e)
},
lower: function(e) {
console.log(e)
},
scroll: function(e) {
var that = this;
if (this.isseting) {
return;
}
this.isseting = true;
console.log(e)
this.nowindex = parseInt((e.detail.scrollTop + 580) / 580) - 1;
this.scrollTop = this.nowindex * 580;
console.log(this.nowindex)
console.log(this.scrollTop)
setTimeout(function() {
that.isseting = false;
}, 2000);
},
onTouchStart: function(e) {
const {
pageY
} = e.changedTouches[0]; //记录手指位置
this.isdrag = true;
this.startY = pageY;
},
timeupdate(e) {
if(Math.trunc(e.detail.currentTime)==Math.trunc(e.detail.duration)){
console.log("播放技术");
}
this.shortvideolist[this.nowindex].playedtime = e.detail.currentTime;
console.log(e.detail)
},
ontap() {
console.log("dddddddddddd")
// let videoid = 'video-' + this.videoidx;
// console.log(videoid);
let nowvideo = uni.createVideoContext("myvideo", this);
if (nowvideo != undefined) {
if (this.nowplaying) {
nowvideo.pause();
this.nowplaying = false;
} else {
nowvideo.play();
this.nowplaying = true;
}
} // this.videoContext = wx.createVideoContext('video');
},
onTouchmove(e) {
const {
startY
} = this;
if (this.isdrag) {
//this.movenum=parseInt(e.changedTouches[0].pageY);
//console.log(e.changedTouches[0].pageY)
this.scrollTop = parseInt(e.changedTouches[0].pageY - startY);
}
},
onTouchEnd: function(e) {
this.isdrag = false;
this.scrollTop = 0;
// this.movenum=0;
let thresholdValue = 100;
const {
startY
} = this;
let movey = e.changedTouches[0].pageY;
let changeY = movey - startY;
this.touchNum++
setTimeout(() => {
if (this.touchNum == 1) {
console.log('单击')
}
if (this.touchNum >= 2) {
console.log('双击')
}
this.touchNum = 0
}, 250)
if (changeY > 0) {
if (changeY >= thresholdValue) {
this.nowindex = this.nowindex >= 1 ? this.nowindex - 1 : 0;
this.playv();
console.log('手指向下滑动,往上切换视频');
}
} else {
let abschangeY = Math.abs(changeY);
if (abschangeY >= thresholdValue) {
console.log('向上滑动,往下切换视频');
this.playv();
if (this.shortvideolist.length - this.nowindex == 4) {
console.log("加载更多");
}
if (this.shortvideolist.length <= this.nowindex + 1) {
uni.showToast({
title: "没有更多了",
icon: "none"
})
console.log("没有了");
} else {
this.nowindex = this.nowindex + 1;
}
}
}
}
}
}
</script>
<style>
</style> 网友回复


