video播放器禁用or启用拖动进度条

做视频教育网站客户提出一个需求: 视频学习完毕时,在观看视频能够拖动进度条.未观看完毕时,禁止拖动视频进度条,只能倍速播放;

用的插件的 videojs一开始用的是 disableProcess.js 插件,但是很快发现一个bug;

BUG:第一个视频播放时能够禁止拖动进度条,ok,这个没问题,当切换到第二个视频的时候,视频会出现卡死,然后控制台无限出现 this.videojs.disableProcess is not function 这个错误, 导致视频卡在这里,播放不了;

通过测试发现对于一个 video 的标签上面 disableProcess 插件的对进度条的处理只能够处理一次,不能够多次对同一个 video 标签处理;

最后想到一个办法就是利用 css 的 pointerEvents 属性放在进度条的 css 样式上面

pointer-events是css3的一个属性，
指定在什么情况下元素可以成为鼠标事件的target（包括鼠标的样式）

通过添加pointerEvents属性来禁止鼠标的滑动

//禁用拖动
document.querySelector(".vjs-progress-control").style.pointerEvents ="none";
//启用拖动
document.querySelector(".vjs-progress-control").style.pointerEvents ="auto";

当然这个方法是没有 disableProcess.js 的插件效果好但是在我的场景下是很好用的
手机全屏是测试也是ok的;

最后附上disableProcess.js插件的内容，直接在html里面引入就行，会自动加入到videojs插件的

(function(vjs) {var/*** Copies properties from one or more objects onto an original.*/extend = function(obj /*, arg1, arg2, ... */) {var arg, i, k;for (i = 1; i < arguments.length; i++) {arg = arguments[i];for (k in arg) {if (arg.hasOwnProperty(k)) {obj[k] = arg[k];}}}return obj;},// define some reasonable defaults for this sweet plugindefaults = {autoDisable: false},// plugin initializerdisableProgress = function(options) {var// save a reference to the player instanceplayer = this,state = false,// merge options and defaultssettings = extend({}, defaults, options || {});// disable / enable methodsplayer.controlProgress = {disable: function() {state = true;player.controlBar.progressControl.seekBar.off("mousedown");player.controlBar.progressControl.seekBar.off("touchstart");player.controlBar.progressControl.seekBar.off("click");},enable: function() {state = false;player.controlBar.progressControl.seekBar.on("mousedown",  player.controlBar.progressControl.seekBar.handleMouseDown);player.controlBar.progressControl.seekBar.on("touchstart", player.controlBar.progressControl.seekBar.handleMouseDown);player.controlBar.progressControl.seekBar.on("click", player.controlBar.progressControl.seekBar.handleClick);},getState: function(){return state;}};if(settings.autoDisable){player.controlProgress.disable();}};// register the plugin with video.jsvjs.plugin('disableProgress', disableProgress);}(window.videojs));

使用

this.videojs.disableProgress(disable)

结束!

video播放器禁用or启用拖动进度条相关推荐

android 播放mp3 倒计时,Android实战 - 音心播放器（MusicActivity - 倒计时，进度条实现）...
1.背景还是音乐播放界面,实现倒计时和进度条功能,基本实现过程: 当打开MusicActivity 的时候,MusicService会发送广播给MusicActivity ,后开始当前播放的时间进度 ...
android倒计时水平进度条,Android实战 - 音心播放器（MusicActivity - 倒计时，进度条实现）...
1.背景还是音乐播放界面,实现倒计时和进度条功能,基本实现过程: 当打开MusicActivity 的时候,MusicService会发送广播给MusicActivity ,后开始当前播放的时间进度 ...
video视频标签怎么禁止用户拖动进度条快进
昨天经理给我一个需求 , 让我查一下h5播放视频怎么禁止用户快进, 然后刚刚搜了下, 实现了出来,代码如下 , 效果就是我点进度条想快进的话 , 会强制退回去, 这样用户就不能快进了 <body ...
异常：谷歌浏览器video标签播放视频不能拖动进度条
谷歌浏览器video标签播放视频不能拖动进度条当前端video的src不是直接使用视频文件的地址,而是通过后台下载接口返回文件流时,后台返回流因为没为response的header设置一些参数,会在 ...
Video 全屏播放、禁止拖动进度条、禁止下载
全屏播放 ios:默认全屏播放模式,不做处理: 安卓:默认小屏播放模式,特殊处理,以下是实现代码: /** * @description 安卓全屏播放模式 * @video DOM节点 */ fu ...
Android播放器拖动进度条的小图预览
播放器拖动预览,让用户提前了解视频的波澜迭起情节,先走马观花看一遍精彩部分,满足一下好奇心,这就是拖动预览的意义所在.那么我们该如何打造高性能.高效率.高可靠的拖动预览呢?首先,小图预览强调足够小,因 ...
html如何设置视频不能拖动,video标签播放视频不能拖动进度条(示例代码)
因为你的video的src不是直接使用视频文件的地址,而是通过后台接口返回文件流,后台返回流的时候没为response的header设置一些参数,否则会在部分浏览器有问题 String rangeSt ...
模拟video播放器
更新: 关于第二点,也就是说计算进度条拖放按钮定位的问题. 很感谢 batsing 同学提供了更好的方案: 滑块左偏量 = (进度条长 - 滑块长) * (已播时间/总时长) 尝试过之后发现除了拖曳滑 ...
【网页上视频无法拖动进度条，如何进行加速播放操作以及网页失焦后如何可继续播放】
面对网页视频无法加速时如何进行加速播放遇到一 zhengzhi 刷题任务时 ,发现无法拖动进度条,也没有加速播放并且鼠标一失焦就会自动暂停时,让我乖乖看完是不可能,因此找了一个解决方案快速完成该任务 ...

video播放器禁用or启用拖动进度条

video播放器禁用or启用拖动进度条相关推荐

最新文章

热门文章