uniapp video 视频未播放完成禁止拖拽进度条快进
html:
<view class="content">
<video
id="myVideo"
class="video"
@timeupdate="timeUpdate"
@ended="ended"
:initial-time="initialTime"
:src="courseMsg.videos"
:poster="courseMsg.img"
/>
</view>
js:
export default {
data() {
return {
videoTime: 0, // 视频时间长度
videoContext: '', // 用来存储video对象
watchTime: 0, // 实际观看时间
videoRealTime: 0, // 实时播放进度
initialTime: 0, //该用户看到的位置
courseMsg: {
videos:
'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
img: 'https://img1.baidu.com/it/u=2374708084,3068058562&fm=26&fmt=auto'
}
};
},
onReady() {
// 视频唯一ID
this.videoContext = uni.createVideoContext('myVideo');
},
onLoad() {
// 调用接口取到该用户播放的位置(秒)
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);
uni.showToast({
title: '未完整看完该视频,不能快进',
icon: 'none',
duration: 2000
});
} 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();
}
}
}
};
css:
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.video {
width: 100%;
}
其中的watchTime和initialTime是从后台接口获取的,每一次的播放记录存储在后台,每一次打开都会去获取到上次的播放记录和已播完的部分,这样就可以轻松解决视频未播放完成不能跳过的问题了!
希望大佬看到有不对的地方,提出博主予以改正!

浙公网安备 33010602011771号