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 相关文章推荐
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 Javascript
js生成的验证码的实现与技术分析
Sep 17 Javascript
理解javascript回调函数
Dec 28 Javascript
js实现刷新iframe的方法汇总
Apr 27 Javascript
JavaScript运算符小结
Jun 03 Javascript
15位和18位身份证JS校验的简单实例
Jul 18 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 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中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
基于php验证码函数的使用示例
2013/05/03 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
python的几种开发工具介绍
2007/03/07 Python
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
高校毕业生自我鉴定
2013/10/27 职场文书
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
教学实习自我评价
2014/01/28 职场文书
员工培训邀请函
2014/02/02 职场文书
家长对孩子的感言
2014/03/10 职场文书
学校开学标语
2014/10/06 职场文书
投标承诺函范文
2015/01/21 职场文书
运动与健康自我评价
2015/03/09 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android