JS禁止用户通过video标签自带的进度条进行快进(允许快退,下次播放时从上次观看时长继续播放)

 更新时间:2025年06月23日 14:19:53   作者:什么当当当啊  
今天遇到一个需求,用户观看视频时不允许快进(包括键盘方向键的默认事件),允许快退,并且下次进入时从上次播放的时长继续播放,下面给大家分享实现代码,感兴趣的朋友一起看看吧

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,通过自己编写样式以及功能实现控制条播放、全屏等等,看了一大圈,还是这个方法比较符合现有的业务逻辑,有什么更好的实现方法,欢迎大家讨论。

补充: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();
}
});
}

到此这篇关于js禁止用户通过video标签自带的进度条进行快进(包括键盘方向键快进),允许快退,下次播放时从上次观看时长继续播放。 的文章就介绍到这了,更多相关js video标签禁止快进内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js实现文本框中焦点在最后位置

    js实现文本框中焦点在最后位置

    本篇文章主要是对js实现文本框中焦点在最后位置的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所 帮助
    2014-03-03
  • 浅谈JS中的常用选择器及属性、方法的调用

    浅谈JS中的常用选择器及属性、方法的调用

    下面小编就为大家带来一篇浅谈JS中的常用选择器及属性、方法的调用。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 简单实现轮播图效果的实例

    简单实现轮播图效果的实例

    下面小编就为大家带来一篇简单实现轮播图效果的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 深入浅析ES6 Class 中的 super 关键字

    深入浅析ES6 Class 中的 super 关键字

    本文给大家收藏整理了ES6 Class 中的 super 关键字,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-10-10
  • 谈谈对JavaScript原生拖放的深入理解

    谈谈对JavaScript原生拖放的深入理解

    拖放(drag-and-drop,DnD)其实是两个动作——拖和放。所以,它涉及到两个元素。一个是被拖的元素,称为拖放源;另一个是要放的目标,称为拖放目标。本文将通过拆分这两个概念来详细介绍原生拖放,感兴趣的朋友一起学习吧
    2016-09-09
  • Bootstrap页面缩小变形的快速解决办法

    Bootstrap页面缩小变形的快速解决办法

    bootstrap布局是应用得很广泛的一种网页布局方法,下面通过本文给大家介绍bootstrap页面缩小变形的快速解决办法,需要的朋友参考下吧
    2017-02-02
  • JS实现的二叉树算法完整实例

    JS实现的二叉树算法完整实例

    这篇文章主要介绍了JS实现的二叉树算法,结合完整实例形式分析了基于JS定义、创建二叉树及常用的各种遍历、访问二叉树操作技巧,需要的朋友可以参考下
    2017-04-04
  • js弹出窗口简单实现代码

    js弹出窗口简单实现代码

    这篇文章主要为大家详细介绍了js弹出窗口的简单实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • JavaScript检查变量类型的常用方法

    JavaScript检查变量类型的常用方法

    在 JavaScript 开发中,变量类型的检查是一个常见且重要的需求,无论是调试还是数据校验,了解变量的类型可以帮助我们编写更加健壮的代码,本文将详细讲解 JavaScript 中用于检查变量类型的多种方法,并分析它们的优缺点以及适用场景
    2025-04-04
  • JavaScript中Number对象的toFixed() 方法详解

    JavaScript中Number对象的toFixed() 方法详解

    下面小编就为大家带来一篇JavaScript中Number对象的toFixed() 方法详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09

最新评论