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是从后台接口获取的,每一次的播放记录存储在后台,每一次打开都会去获取到上次的播放记录和已播完的部分,这样就可以轻松解决视频未播放完成不能跳过的问题了!
希望大佬看到有不对的地方,提出博主予以改正!