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 this 的一些学习总结
Aug 02 Javascript
JS判断变量是否为空判断是否null
Jul 25 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
全屏js头像上传插件源码高清版
Mar 29 Javascript
一个简单不报错的summernote 图片上传案例
Jul 11 Javascript
Vue filter介绍及其使用详解
Oct 21 Javascript
JavaScript实现单例模式实例分享
Dec 22 Javascript
Angular Renderer (渲染器)的具体使用
May 03 Javascript
实例讲解JS中pop使用方法
Jan 27 Javascript
详解项目升级到vue-cli3的正确姿势
Jan 28 Javascript
JavaScript函数定义方法实例详解
Mar 05 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 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的ob_start来生成静态页面的方法分析
2011/03/09 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
php实现文件下载实例分享
2014/06/02 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
js带前后翻页的图片切换效果代码分享
2015/09/08 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
vue实现简单跑马灯效果
2020/05/25 Javascript
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
使用python实现rsa算法代码
2016/02/17 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
房屋租赁协议书
2014/04/10 职场文书
秘书英文求职信
2014/04/16 职场文书
超市优秀员工事迹材料
2014/05/01 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
运动会方队口号
2014/06/07 职场文书
Node实现搜索框进行模糊查询
2021/06/28 Javascript
PHP中多字节字符串操作实例详解
2021/08/23 PHP