需求要求: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.duration
if(!this.play) return
if(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 ID
myVideo: "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].id
this.list[e.detail.current].play = true;
//重置下标
this.current = e.detail.current;
},
//记录时间
pause(e) {
console.log(config.domain.newCnn);
this.params.Duration = e + '';
let that = this
uni.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>
好了,基本就是这些了,如果有什么问题可以私信一下.共同成长