video禁止拖拽进度条(uni-app)

需求:

用户不可以快进视频,但是看过的就可以快进。记录用户观看时间,下次打开视频跳转到指定位置


解决思路描述:

这里使用了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版权协议,转载请附上原文出处链接和本声明。