uniapp video组件禁止进度条拖动实现完整代码

实现两个功能:

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>

猜你喜欢

转载自blog.csdn.net/qq_35713752/article/details/130732654