快捷導(dǎo)航

JS禁止用戶通過video標(biāo)簽自帶的進度條進行快進(允許快退,下次播放時從上次觀看時長繼續(xù)播放)

更新時間：2025年06月23日 14:19:53 作者：什么當(dāng)當(dāng)當(dāng)啊

今天遇到一個需求,用戶觀看視頻時不允許快進（包括鍵盤方向鍵的默認事件）,允許快退,并且下次進入時從上次播放的時長繼續(xù)播放,下面給大家分享實現(xiàn)代碼,感興趣的朋友一起看看吧

js禁止用戶通過video標(biāo)簽自帶的進度條進行快進（包括鍵盤方向鍵快進），允許快退，下次播放時從上次觀看時長繼續(xù)播放。

今天遇到一個需求，用戶觀看視頻時不允許快進（包括鍵盤方向鍵的默認事件），允許快退，并且下次進入時從上次播放的時長繼續(xù)播放。
以下是實現(xiàn)代碼

<template>
	<video
	    ref="my_videos"
	    class="video-dom-content"
	    autoplay
	    :src="playVideo.address"
	    controls
  	/>
</template>
<script>
	data(){
		return {
			playVideo:{
				watchMaxTime:0,	//當(dāng)前可快進到的最大時長	單位為s
				copyCurrentTime:0, //下次進入時繼續(xù)播放的時長  單位為s
				address:"",  //視頻路徑
			}
		}
	},
	mounted() {
	    this.$nextTick(() => {
	      let that = this
	      let myVideo = that.$refs.my_videos	//當(dāng)前播放器
	      myVideo.currentTime = this.playVideo.copyCurrentTime		//從上次播放的時間繼續(xù)播放
	      myVideo.addEventListener("timeupdate", () => {
	          //記錄視頻已經(jīng)播放時長
	          if (myVideo.currentTime > that.playVideo.watchMaxTime) {
	            //但如果相差1秒就證明是往后拖時間了 正常來說是每次時長更新相差0.3s
	            var num = parseFloat(myVideo.currentTime) - parseFloat(that.playVideo.watchMaxTime)
	            if (num < 1) {	//正常播放時，記錄當(dāng)前播放時間
	              that.playVideo.watchMaxTime = myVideo.currentTime
	              that.playVideo.copyCurrentTime = myVideo.currentTime
	            } else {	// 差值大于1s時，視為拖動，將上一次記錄的播放時間賦值給當(dāng)前播放器的播放時間
	              myVideo.currentTime = that.playVideo.watchMaxTime
	              that.playVideo.copyCurrentTime = that.playVideo.watchMaxTime
	            }
	          }
	        })
	        //監(jiān)聽鍵盤方向右鍵
	        myVideo.addEventListener("keydown", (event) => {
	          if (event.keyCode === 39) {
	            //不允許通過方向鍵快進至超過當(dāng)前播放的最大視頻時間，超過時，將當(dāng)前播放的最大視頻時間賦值給當(dāng)前播放器播放時間，小于時，不做操作
	            if (
	              myVideo.currentTime > that.playVideo.watchMaxTime
	            ) {
	              myVideo.currentTime = that.playVideo.watchMaxTime
	            }
	          }
	        })
	    })
	  }
  </script>

看網(wǎng)上好多說用css來實現(xiàn)或者干掉video標(biāo)簽的controls，通過自己編寫樣式以及功能實現(xiàn)控制條播放、全屏等等，看了一大圈，還是這個方法比較符合現(xiàn)有的業(yè)務(wù)邏輯，有什么更好的實現(xiàn)方法，歡迎大家討論。

補充：js video.js - 禁止拖動進度條，禁止快進。

if(!isDrag) {
var isMousedown = false;
videoPlayer.on('pause', function() {
if(isMousedown == false) {
　oldTime = videoPlayer.currentTime();
}
});
videoPlayer.on('play', function() {
isMousedown = false;
newTime = videoPlayer.currentTime();
if(newTime < maxTime) {
videoPlayer.currentTime(newTime);
} else {
videoPlayer.currentTime(oldTime);
};
});
$(".vjs-progress-holder").mousedown(function() {
isMousedown = true;
oldTime = videoPlayer.getCache().currentTime;
});
videoPlayer.on('timeupdate', function() {
if(videoPlayer.currentTime() > maxTime && !isMousedown) {
maxTime = videoPlayer.currentTime();
}
});
}

到此這篇關(guān)于js禁止用戶通過video標(biāo)簽自帶的進度條進行快進（包括鍵盤方向鍵快進），允許快退，下次播放時從上次觀看時長繼續(xù)播放。的文章就介紹到這了,更多相關(guān)js video標(biāo)簽禁止快進內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: