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文件的小脚本
Jun 28 Javascript
js option删除代码集合
Nov 12 Javascript
js获取当前日期代码适用于网页头部
Jun 27 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
vue实现验证码输入框组件
Dec 14 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
微信小程序实现按字母排列选择城市功能
Nov 25 Javascript
微信小程序实现星星评分效果
Nov 01 Javascript
vantUI 获得piker选中值的自定义ID操作
Nov 04 Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 07 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
DC的38部超级英雄动画电影
2020/03/03 欧美动漫
php 获取远程网页内容的函数
2009/09/08 PHP
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
2019/12/04 Javascript
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
Python中模拟enum枚举类型的5种方法分享
2014/11/22 Python
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
python3使用GUI统计代码量
2019/09/18 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
初婚未育未抱养证明
2014/01/12 职场文书
开业主持词
2014/03/21 职场文书
大学生见习报告总结
2014/11/04 职场文书
步步惊心观后感
2015/06/12 职场文书
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS