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 相关文章推荐
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
Jquery 自定义动画概述及示例
Mar 29 Javascript
JS实现简单的Canvas画图实例
Jul 04 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
JavaScript小技巧整理
Dec 30 Javascript
AngularJS中$interval的用法详解
Feb 02 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 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
合作指挥官:孟斯克
2020/03/16 星际争霸
整合了前面的PHP数据库连接类~~做成一个分页类!
2006/11/25 PHP
PHP高自定义性安全验证码代码
2011/11/27 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
php实现的简单日志写入函数
2015/03/31 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
php字符集转换
2017/01/23 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
php测试kafka项目示例
2020/02/06 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
ES6概念 Symbol toString()方法
2016/12/25 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
python中的字典使用分享
2016/07/31 Python
浅谈Python处理PDF的方法
2017/11/10 Python
详解python多线程之间的同步(一)
2019/04/03 Python
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
2015年幼儿园后勤工作总结
2015/04/25 职场文书
民事上诉状范文
2015/05/22 职场文书
博物馆观后感
2015/06/05 职场文书
工商行政处罚决定书
2015/06/24 职场文书
2016年基层党组织创先争优承诺书
2016/03/25 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
话题作文之生命的旋律
2019/12/17 职场文书
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js