JS禁止用户通过video标签自带的进度条进行快进(允许快退,下次播放时从上次观看时长继续播放)
作者:什么当当当啊
今天遇到一个需求,用户观看视频时不允许快进(包括键盘方向键的默认事件),允许快退,并且下次进入时从上次播放的时长继续播放,下面给大家分享实现代码,感兴趣的朋友一起看看吧
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标签禁止快进内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!