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 相关文章推荐
利用js跨页面保存变量做菜单的方法
Jan 17 Javascript
Javascript常考语句107条收集
Mar 09 Javascript
写js时遇到的一些小问题
Dec 06 Javascript
JQuery文本框高亮显示插件代码
Apr 02 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
JavaScript中的console.trace()函数介绍
Dec 29 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
js+canvas实现刮刮奖功能
Sep 13 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
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
js打造数组转json函数
2015/01/14 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
一系列Bootstrap导航条使用方法分享
2016/04/29 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
Webpack如何引入bootstrap的方法
2017/06/17 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
Sanic框架应用部署方法详解
2018/07/18 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
python创建子类的方法分析
2019/11/28 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
联想C++笔试题
2012/06/13 面试题
祖国在我心中演讲稿500字
2014/05/04 职场文书
干部对照检查材料范文
2014/08/26 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
高中班主任培训心得体会
2016/01/07 职场文书