实现两个功能:
1.禁止拖动进度条快进
2.视频播放完成后触发奖励
<video id="myVideo" :src="sectionInfo.type_config.video_url" @timeupdate="bindtimeupdate"></video>
<script>
export default {
data() {
return {
historyTime: 0,
}
},
methods:{
// 监听播放进度
bindtimeupdate(e) {
var currentTime = e.detail.currentTime; //当前进度
var duration = e.detail.duration; //视频时长
//视频播放完成后触发奖励保存接口
// let percent = 100;//播放进度百分比,可以改成 80 或者90等其它数字,到达时触发奖励保存
let percent = this.sectionInfo.type_config.video_complate_rate;
let upper = duration * (percent / 100);
if (currentTime >= upper) {
if (this.isTo) {
this.isTo = false; //isTo 奖励加锁,进入页面只能触发一次
console.log('触发奖励请求接口');
this.$request(this.$api.Weike.sectionComplete, this.options).then((res) => {});
}
}
// 禁止拖动进度条快进
if (currentTime - this.historyTime > 2) {
uni.showToast({
title: '不能快进哦',
icon: 'none',
});
let videoContext = wx.createVideoContext('myVideo');
videoContext.seek(this.historyTime);
}
this.historyTime=currentTime;
},
}
}
</script>