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 相关文章推荐
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
基于jQuery的左右滚动实现代码
Dec 03 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 Javascript
AngularJS入门教程之静态模板详解
Aug 18 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
认识less和webstrom的less配置方法
Aug 02 Javascript
JavaScript实现星级评价效果
May 17 Javascript
vue 实现用户登录方式的切换功能
Apr 14 Javascript
js cavans实现静态滚动弹幕
May 21 Javascript
JavaScript动态生成表格的示例
Nov 02 Javascript
JavaScript执行机制详细介绍
Dec 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
MySQL修改密码方法总结
2008/03/25 PHP
PHP 加密与解密的斗争
2009/04/17 PHP
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
php常用Output和ptions/Info函数集介绍
2013/06/19 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
php post换行的方法
2020/02/03 PHP
文本框回车提交与禁止提交示例
2013/09/27 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
详解vue组件基础
2018/05/04 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
深入解析Python中的变量和赋值运算符
2015/10/12 Python
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
python表格存取的方法
2018/03/07 Python
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
使用python实现名片管理系统
2020/06/18 Python
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
聊城大学毕业生自荐书
2014/02/01 职场文书
优秀辅导员事迹材料
2014/02/16 职场文书
《太阳》教学反思
2014/02/21 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技