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 相关文章推荐
JavaScript实现继承的4种方法总结
Oct 16 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
jquery中radio checked问题
Mar 16 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 Javascript
关于Vue.js一些问题和思考学习笔记(1)
Dec 02 Javascript
Centos6.8下Node.js安装教程
May 12 Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 Javascript
countUp.js实现数字滚动效果
Oct 18 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 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中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
PHP使用递归生成文章树
2015/04/21 PHP
PHP基于phpqrcode类生成二维码的方法示例详解
2020/08/07 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
Three.js基础部分学习
2017/01/08 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
完美实现js焦点轮播效果(一)
2017/03/07 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
react项目从新建到部署的实现示例
2021/02/19 Javascript
使用python实现生成用户信息
2017/03/20 Python
python如何统计序列中元素
2020/07/31 Python
python实现log日志的示例代码
2018/04/28 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
TheFork葡萄牙:欧洲领先的在线餐厅预订平台
2019/05/27 全球购物
岗位职责的定义
2013/11/10 职场文书
应届大专生自荐书
2014/06/16 职场文书
村级个人对照检查材料
2014/08/22 职场文书
领导班子对照检查材料
2014/09/22 职场文书