需求要求：app端視頻播放可以滑動，記錄觀看時間

分析：采用swiper中內嵌video方法

遇到的坑

1.直接使用vue頁面在APP端不顯示，解決：swiper內嵌視頻需要使用nvue ，視頻需要使用nvue組件

2.視頻滑動出現滑動幾次才切換bug，解決：禁用swiper touch 使用touchstart和touchend，判斷切換

注意：nvue頁面調用方法需要使用uni.request,外部封裝的無法使用，下方代碼只供參考，cv需要注意一下

詳細代碼：
video組件：

<template><div class="video"><video @timeupdate="timeupdate" @pause="pause" :style="style" :initial-time="times" class="myVideo" @error="videoErrorCallback" :id="`video_${index}`" :src="src":enable-play-gesture="true" :enable-progress-gesture="false" :show-fullscreen-btn="false" :show-center-play-btn="true" show-mute-btn title="xxxxxxxx"></video><div class="title"><text style="color: #ffffff;">{{title}}</text></div></div> </template><script>export default {props: {index: {type: Number,default: 0},src: {type: String,default: ""},play: {type: Boolean,default: false},title:{type: String,default: ""},times:{type: Number,default: 0}},data() {return {videoContext: null,style: '',time:0,duration:0}},watch: {play(newVal, oldVal) {this.videoPlay();}},created() {this.videoContext = uni.createVideoContext('video_' + this.index);try {const res = uni.getSystemInfoSync();this.style = "height:" + res.windowHeight + "px;"} catch (e) {// error}},methods: {videoErrorCallback(e) {},timeupdate(event){this.duration = event.detail.durationif(!this.play) returnif(this.time>=this.duration) this.time=0 this.time = event.detail.currentTime},videoPlay() {if (this.play) {this.videoContext.play();} else {this.videoContext.pause();// this.$emit('pause',this.time)}},pause(e){// console.log(e);this.$emit('pause',this.time);}}} </script><style scoped>.myVideo {width: 750rpx;position: relative;}.title {width: 700rpx;position: absolute;bottom: 100px;left: 20px;} </style>

視頻播放代碼：

<template><div class="sw"><swiper disable-touch class="swiper" :style="style" vertical :current="wrapIndex" @change="swperChange" duration="300" @touchstart="touchStart" @touchend="touchEnd"><swiper-item class="swiper-item" v-for="(item,index) in list"><gvideo :index="index" :src="item.src" :play="item.play" :times="item.times?item.times:0":title="item.title" @pause="pause" /></swiper-item></swiper></div> </template><script>import config from "../../../config";import gvideo from "./components/gvideo"export default {components: {gvideo},data() {return {style: "",//視頻對象數組videoContext: [],//字符串名，用于拼接video IDmyVideo: "myVideo",//視頻下標current: 0,//視頻數據,數據格式可以自己定義,一下僅供參考list: [{id:"xx",src:"xxxx",play:false,time:"xxx"}],params: {},count: 0,movesh: "",wrapIndex: 0,pageStartY:0,pageEndY:0}},created() {//獲取視頻數據 方法已省略,自己處理try {const res = uni.getSystemInfoSync();this.style = "height:" + res.windowHeight + "px;"// this.getList();} catch (e) {// error}},onBackPress() {if (this.count == 0) {this.list[this.current].play = false;uni.showToast({title: "再點一次返回",icon: "none"})this.count = 1;return true;}},methods: {swperChange(e) {this.wrapIndex = e.detail.current;this.show = false;this.list[this.current].play = false;this.params.VideoId = this.list[this.current].idthis.list[e.detail.current].play = true;//重置下標this.current = e.detail.current;},//記錄時間pause(e) {console.log(config.domain.newCnn);this.params.Duration = e + '';let that = thisuni.request({url:"xxxxxxxxxx",method: "POST",data: that.params,success: res => {console.log(res)console.log(that.params);},fail: (r) => {console.log(r)}})},touchStart(res) {this.pageStartY = res.changedTouches[0].pageY;// console.log("touchStart：" + this.pageStartY);},touchEnd(res) {this.pageEndY = res.changedTouches[0].pageY;// console.log("touchEnd：" + this.pageEndY);let platform = uni.getSystemInfoSync().platform;if (platform == 'android') {if ((this.pageStartY - this.pageEndY) > 60) {// console.log("向上滑動:");if (this.wrapIndex < (this.list.length - 1)) {this.wrapIndex = this.wrapIndex + 1}} else if ((this.pageStartY - this.pageEndY) < -60) {// console.log("向下滑動:",this.wrapIndex);if (this.wrapIndex >= 1) {this.wrapIndex = this.wrapIndex - 1}}}}}} </script> <style lang="scss" scoped>.sw {color: #ffffff;.swiper {.swiper-item {// width: 750rpx;height: 100%;border-bottom: 1rpx solid #ffffff;}}}.touch {width: 750rpx;position: fixed;top: 0;left: 0;z-index: 999999;background-color: #333333;opacity: 0.5;}.image {width: 100rpx;height: 100rpx;position: fixed;bottom: 30rpx;right: 20rpx;} </style>

好了,基本就是這些了,如果有什么問題可以私信一下.共同成長

總結

以上是生活随笔為你收集整理的uniapp app手机端视频滑动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。