js禁止用户通过video标签自带的进度条进行快进(包括键盘方向键快进),允许快退,下次播放时从上次观看时长继续播放。

今天遇到一个需求,用户观看视频时不允许快进(包括键盘方向键的默认事件),允许快退,并且下次进入时从上次播放的时长继续播放。
以下是实现代码

<template>
	<video
	    ref="my_videos"
	    class="video-dom-content"
	    autoplay
	    :src="playVideo.address"
	    controls
  	/>
</template>
<script>
	data(){
		return {
			playVideo:{
				watchMaxTime:0,	//当前可快进到的最大时长	单位为s
				copyCurrentTime:0, //下次进入时继续播放的时长  单位为s
				address:"",  //视频路径
			}
		}
	},
	mounted() {
	    this.$nextTick(() => {
	      let that = this
	      let myVideo = that.$refs.my_videos	//当前播放器
	      myVideo.currentTime = this.playVideo.copyCurrentTime		//从上次播放的时间继续播放
	      myVideo.addEventListener("timeupdate", () => {
	          //记录视频已经播放时长
	          if (myVideo.currentTime > that.playVideo.watchMaxTime) {
	            //但如果相差1秒就证明是往后拖时间了 正常来说是每次时长更新相差0.3s
	            var num = parseFloat(myVideo.currentTime) - parseFloat(that.playVideo.watchMaxTime)
	            if (num < 1) {	//正常播放时,记录当前播放时间
	              that.playVideo.watchMaxTime = myVideo.currentTime
	              that.playVideo.copyCurrentTime = myVideo.currentTime
	            } else {	// 差值大于1s时,视为拖动,将上一次记录的播放时间赋值给当前播放器的播放时间
	              myVideo.currentTime = that.playVideo.watchMaxTime
	              that.playVideo.copyCurrentTime = that.playVideo.watchMaxTime
	            }
	          }
	        })
	        //监听键盘方向右键
	        myVideo.addEventListener("keydown", (event) => {
	          if (event.keyCode === 39) {
	            //不允许通过方向键快进至超过当前播放的最大视频时间,超过时,将当前播放的最大视频时间赋值给当前播放器播放时间,小于时,不做操作
	            if (
	              myVideo.currentTime > that.playVideo.watchMaxTime
	            ) {
	              myVideo.currentTime = that.playVideo.watchMaxTime
	            }
	          }
	        })
	    })
	  }
  </script>

  看网上好多说用css来实现或者干掉video标签的controls,通过自己编写样式以及功能实现控制条播放、全屏等等,看了一大圈,还是这个方法比较符合现有的业务逻辑,有什么更好的实现方法,欢迎大家讨论。

Logo

一座年轻的奋斗人之城,一个温馨的开发者之家。在这里,代码改变人生,开发创造未来!

更多推荐