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 数组循环引起的思考
Jan 01 Javascript
Javascript中的delete操作符详细介绍
Jun 06 Javascript
jquery实现倒计时效果
Dec 14 Javascript
实例详解jQuery表单验证插件validate
Jan 18 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
JavaScript实现下拉列表
Jan 20 Javascript
JS前端轻量fabric.js系列之画布初始化
Aug 05 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利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
PHP源码之explode使用说明
2011/08/05 PHP
openflashchart 2.0 简单案例php版
2012/05/21 PHP
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
PHP中header和session_start前不能有输出原因分析
2013/01/11 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
php中Ctype函数用法详解
2014/12/09 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
显示、隐藏密码
2006/07/01 Javascript
Js中sort()方法的用法
2006/11/04 Javascript
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
2013/10/23 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
2018/10/24 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
微信小程序利用云函数获取手机号码
2019/12/17 Javascript
python之DataFrame实现excel合并单元格
2021/02/22 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
django rest framework使用django-filter用法
2020/07/15 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
EJB的基本架构
2016/09/22 面试题
员工考核管理制度
2014/02/02 职场文书
挂职自我鉴定
2014/02/26 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
2014年团支书工作总结
2014/11/14 职场文书
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis