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 相关文章推荐
jquery操作select option 的代码小结
Jun 21 Javascript
使用js显示当前时间示例
Mar 02 Javascript
jQuery内部原理和实现方式浅析
Feb 03 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
深入理解setTimeout函数和setInterval函数
May 20 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
浅析JS中常用类型转换及运算符表达式
Jul 23 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
Vue.js的复用组件开发流程完整记录
Nov 29 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 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中var_export与var_dump的区别分析
2010/08/21 PHP
php动态实现表格跨行跨列实现代码
2012/11/06 PHP
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
老生常谈javascript的面向对象思想
2017/08/22 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
python默认参数调用方法解析
2020/02/09 Python
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
英国领先的在线高尔夫设备零售商:Golfgeardirect
2020/12/11 全球购物
银行求职信个人范文
2013/12/16 职场文书
证婚人经典证婚词
2014/01/09 职场文书
服务员岗位责任制
2014/02/11 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
体育教师个人工作总结
2015/02/09 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
解决go在函数退出后子协程的退出问题
2021/04/30 Golang
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android