video.js 实现视频只能后退不能快进的思路详解


Posted in Javascript onAugust 09, 2018

主要思路是点击进度条需要获取拖动前的时间点,我用mouseup事件去处理的,获得到了oldTime 就好办,然后根据需求限制拖动快进快退,因为项目允许回看,不允许快进,所以得记录maxTime,记录用户正常情况观看视频最大的那个时间点,不允许超过maxTime

var isMousedown = false;
var oldTime=0,newTime=0,maxTime=0;
//拖动进度条会先执行这个事件
$(".vjs-progress-holder").mouseup(function() {
  isMousedown = true;
  oldTime = vid1.currentTime();
});
//vid1就是videojs对象
vid1.on('timeupdate', function(){
 if(isMousedown){
   if(vid1.currentTime() > maxTime) {
     vid1.currentTime(oldTime);
   }
   isMousedown=false;
 }else{
   if(vid1.currentTime() > maxTime) {
     maxTime = vid1.currentTime();
   }
 }
 });

总结

以上所述是小编给大家介绍的video.js 实现视频只能后退不能快进的思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
window.location.hash 属性使用说明
Mar 20 Javascript
js replace正则表达式应用案例讲解
Jan 17 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
jquery中each遍历对象和数组示例
Aug 05 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
javascript中闭包(Closure)详解
Jan 06 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 #Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 #Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 #Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 #Javascript
基于bootstrap页面渲染的问题解决方法
Aug 09 #Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 #Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 #Javascript
You might like
php 文件上传类代码
2011/08/06 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
EXT中xtype的含义分析
2010/01/07 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
Python获取当前函数名称方法实例分享
2018/01/18 Python
python实现雨滴下落到地面效果
2018/06/21 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
世界排名第一的万圣节服装店:Spirit Halloween
2018/10/16 全球购物
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
条幅标语大全
2014/06/20 职场文书
党建工作汇报材料
2014/12/24 职场文书
手术室护士个人总结
2015/02/13 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
初中班主任工作随笔
2015/08/15 职场文书
Spring Boot实现文件上传下载
2022/08/14 Java/Android