需求:
用户不可以快进视频,但是看过的就可以快进。记录用户观看时间,下次打开视频跳转到指定位置
解决思路描述:
这里使用了UNI中video组件,该组件中有@timeupdate方法播放进度变化时触发。
用户拖拽进度条的时候一定会触发,通过对进度条变化的大小可以得到是自然播放还是用户操作,
// id:唯一标识,@timeupdate进度条变化的事件,@ended进度条到最后的事件,initial-time指定视频初始播放位置,
<video id="myVideo" class="video" @timeupdate="timeUpdate" @ended="ended" :initial-time="initialTime" :src="courseMsg.videos"
:poster="courseMsg.img" :danmu-list="danmuList" enable-danmu danmu-btn></video>
export default {
data() {
return {
videoTime:0,// 视频时间长度
videoContext :'',// 用来存储video对象
watchTime:0,// 实际观看时间
videoRealTime:0,// 实时播放进度
initialTime:0,//该用户看到的位置
}
},
onReady(){
// 视频唯一ID
this.videoContext = uni.createVideoContext('myVideo')
},
onshow(){
// 调用接口取到该用户播放的位置(秒)
// 这里的60代指从接口放回的时间
this.watchTime = 60
this.initialTime = 60
},
methods: {
timeUpdate(e) {
//视频时长
this.videoTime = parseInt(e.detail.duration)
// 记录用户当前视频进度
var jumpTime = parseInt(e.detail.currentTime)
// 判断用户当前视频进度比实际观看时间差别,这里只判断了用户快进
if(jumpTime-this.watchTime > 3){
// 差别过大,调用seek方法跳转到实际观看时间
this.videoContext.seek(this.watchTime)
}else{
this.videoRealTime = parseInt(e.detail.currentTime)
if(this.videoRealTime > this.watchTime){
this.watchTime = this.videoRealTime
}
},
ended(){
// 用户把进度条拉到最后,但是实际观看时间不够,跳转回去会自动暂停。
// 这里加个判断。
if(this.watchTime < this.videoTime){
this.videoContext.play()
}
},
},
}
}
总结:
代码没有在多平台测试,个人感觉问题不大,毕竟方法是多平台支持的。
版权声明:本文为long19981231原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。