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 相关文章推荐
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
Mar 31 Javascript
javascript实现检验的各种规则
Jul 31 Javascript
JQuery实现图片轮播效果
Sep 15 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
Oct 31 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
React中this丢失的四种解决方法
Mar 12 Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 Javascript
JavaScript中工厂函数与构造函数示例详解
May 06 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递归复制、移动目录的自定义函数分享
2014/11/18 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
php显示时间常用方法小结
2015/06/05 PHP
php实现点击可刷新验证码
2015/11/07 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
几个有趣的Javascript Hack
2010/07/24 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
extjs两个tbar问题探讨
2013/08/08 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
Javascript实现字数统计
2015/07/03 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
两种方法解决javascript url post 特殊字符转义 + & #
2016/04/13 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
2018/02/22 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
Python break语句详解
2014/03/11 Python
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
python去重,一个由dict组成的list的去重示例
2019/01/21 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
计算机应用专业毕业生求职信
2013/10/24 职场文书
留学推荐信怎么写
2014/01/25 职场文书
将相和教学反思
2014/02/04 职场文书
幼儿园元旦家长感言
2014/02/27 职场文书
会员活动策划方案
2014/08/19 职场文书
优秀教师单行材料
2014/12/16 职场文书
父亲节活动总结
2015/02/12 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python