经过长时间的研究和实验,终于发明一种新的兼容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>
网友回复
为啥所有的照片分辨率提升工具都会修改照片上的图案细节?
js如何在浏览器中将webm视频的声音分离为单独音频?
微信小程序如何播放第三方域名url的mp4视频?
ai多模态大模型能实时识别视频中的手语为文字吗?
如何远程调试别人的chrome浏览器获取调试信息?
为啥js打开新网页window.open设置窗口宽高无效?
浏览器中js的navigator.mediaDevices.getDisplayMedia屏幕录像无法录制SpeechSynthesisUtterance产生的说话声音?
js中mediaRecorder如何录制window.speechSynthesis声音音频并下载?
python如何直接获取抖音短视频的音频文件url?
js在浏览器中如何使用MediaStream与MediaRecorder实现声音音频多轨道混流?