js禁止用户通过video标签自带的进度条进行快进（包括键盘方向键快进），允许快退，下次播放时从上次观看时长继续播放。
今天遇到一个需求，用户观看视频时不允许快进（包括键盘方向键的默认事件），允许快退，并且下次进入时从上次播放的时长继续播放。
以下是实现代码文章来源：https://www.toymoban.com/news/detail-523725.html
<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，通过自己编写样式以及功能实现控制条播放、全屏等等，看了一大圈，还是这个方法比较符合现有的业务逻辑，有什么更好的实现方法，欢迎大家讨论。文章来源地址https://www.toymoban.com/news/detail-523725.html
到了这里，关于js禁止用户通过video标签自带的进度条进行快进（包括键盘方向键快进），允许快退，下次播放时从上次观看时长继续播放。的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
