思路：

　　1.进度条，首先要知道视频的总长度，和视频的当前进度，与其对应的便是进度条的总长度和当前的长度，两者比值相等

　　2.获取视频的总长度（单位是秒），获取当前进度

　　3.要实现的功能，首先是进度条根据视频播放的进度，不断的增加。意思就是不断的获取视频的当前进度，然后去除以视频的总长度，拿这个比值乘以进度条的总长度，就得到经度条当前的长度，赋值。

　　4.拖动经度条，视频在相应的位置播放。反过来，先获取进度条的当前位置，除以进度条的总长度，拿这个比值乘以视频的总长度，就得到视频当前应该播放的进度，赋值。

上面稍后有时间，把代码整理出来贴给大家。另外再添加一个效果，当用户有操作时，控制条就显示，几秒之内没有操作，控制条则消失。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>video test</title>

 </head>

 <body>

     <style>

         body{

             background-color: #ccc;

         }

         #container{

             width: 100%;

             height:100px;

             background-color:#000;

             position: fixed;

             left: 0;

             bottom: 0;

             color: #fff;

             text-align: center;

             }

         #box{

             width: 100%;

             height:100px;

             background-color: #fff;

             position: fixed;

             left: 0;

             bottom: -50px;

             opacity: 0;

             -webkit-transition: all .5s ease-in;

             -moz-transition: all .5s ease-in;

             transition: all .5s ease-in;  

             color: #000;

             text-align: center;

             }

         #box.move{

             opacity: 1;

             bottom: 0px;

         }

     </style>

     <div id="container">

         鼠标移入试试

         <div id="box">控制条(无操作，3秒后消失)</div>

     </div>

     <script>

         var now,timer;

         // 首先获取一次，最后时间

         var lastTime=new Date().getTime();

         // 获取元素

         var container=document.getElementById("container");

         var box=document.getElementById("box");

         //当鼠标移入控制条区域时，控制条显示出来

         container.onmousemove=function(){

             //记录一次lastTime的时间

             lastTime=new Date().getTime();

             // 返回结果为毫秒数

             box.classList.add("move");

         }

         // 每搁一秒检查一次，如果无操作超过3秒，则控制条消失

         timer=setInterval(function(){

             // 获取最新的时间

             now=new Date().getTime();

             //如果now的时间-lastTime超过3秒;

             //就将div隐藏

             if(now-lastTime>3000){

                 box.classList.remove("move");

             }

         },1000)

     </script>

 </body>

 </html>

给video添加自定义进度条的更多相关文章

  1. 阿里播放器踩坑记录 进度条重构 video loadByUrl失效解决方案

    如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 文档地址:https://player.alicdn.com/aliplayer/index. ...

  2. html5 实现video标签的自定义播放进度条

    现在随着html5的渐热,越来越多的web开发者都开始选择使用html5写出一些比较好的web应用. html代码: <!DOCTYPE html> <html lang=" ...

  3. HTML5实现video标签的自定义播放进度条

    现在随着html5的渐热,越来越多的web开发者都开始选择使用html5写出一些比较好的web应用. html代码: <!DOCTYPE html> <html lang=" ...

  4. cocos2d-x视频控件VideoPlayer的用户操作栏进度条去除(转载)

    目前遇到两个问题: (1)视频控件移除有问题,会报异常. (2)视频控件有用户操作栏,用户点击屏幕会停止视频播放. 对于第一个问题,主要是移除控件时冲突引起的,目前简单处理是做一个延时处理,先stop ...

  5. Flex4/Flash多文件上传(带进度条)实例分享

    要求 必备知识 本文要求基本了解 Adobe Flex编程知识和JAVA基础知识. 开发环境 MyEclipse10/Flash Builder4.6/Flash Player11及以上 演示地址 演 ...

  6. ajax 异步上传视频带进度条并提取缩略图

    最近在做一个集富媒体功能于一身的项目.需要上传视频.这里我希望做成异步上传,并且有进度条,响应有状态码,视频连接,缩略图. 服务端响应 { "thumbnail": "/ ...

  7. html5 vedio 播放器，禁掉进度条快进快退事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. BootStrap学习(4)_分页&标签&缩略图&警告&进度条

    一.分页 分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页.  .pagination     --添加该 class 来在页面上显示分页. .disa ...

  9. Bootstrap 警告、进度条、列表组、面板

    摘要:该部分包括警告.进度条.列表组.面板等部分. 1.警告(alert) 1.1 基本的警告(.alert) 警告的基类是 .alert .和其他样式类一块使用.例如: .alert-success ...

随机推荐

  1. iStatistica Pro for mac(mac系统监视器)

    iStatistica Pro for mac是一款运行在Mac平台上的mac系统监视器,你可以使用iStatistica pro for mac破解版轻松查看PAM使用情况.CPU信息.磁盘信息.本 ...

  2. 【JVM】-NO.113.JVM.1 -【JDK11 HashMap详解-4-resize()】

    Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total Hours:1 Degree Of Diffculty:5 Degree Of ...

  3. stm32_ADC定时器采样（DMA均值处理数据）

    在有些要求高的场合,需要用到定时器采样.本人在网上没找到合适的源码,于是将自己的思路分享出来,欢迎大家提出意见. 确定ADC采用的通道对应的通道 确定采样对应的引脚(这个在规格书的引脚定义部分可以找到 ...

  4. Adaboost总结

    一.简介 Boosting 是一类算法的总称,这类算法的特点是通过训练若干弱分类器,然后将弱分类器组合成强分类器进行分类.为什么要这样做呢?因为弱分类器训练起来很容易,将弱分类器集成起来,往往可以得到 ...

  5. Xamarin 自定义 ToolbarItem 溢出菜单实现(Popover/Popup) 弹出下拉效果

    使用  Rg.Plugins.Popup 插件 1.  新建 PopupMenu.xaml <?xml version="1.0" encoding="utf-8& ...

  6. Linux 7.x 防火墙&端口

    Linux 7.x 防火墙&端口 查看当前防火墙的状态: # firewall-cmd --state 也可以使用指令:systemctl status firewall.service 启动 ...

  7. linux 系统管理11 ——系统安全及应用

    一.基本安全措施 1.系统账号清理 (1).将非登陆用户的shell设为/sbin/nologin 方法一.usermod -s 方法二.chsh命令,交互式修改 方法三.chsh -s usermo ...

  8. Python socket的客户端

    做一个socket客户端1.声明一个实例2.绑定端口号和地址3.循环发送和接收响应其中要注意粘包的产生,为了防止粘包的产生,应该在服务器端先测出要发送信息的大小,然后发送响应至客户端,等到服务器上一条 ...

  9. 自定义Win10右键“发送到”菜单

    打开Win10文件资源管理器窗口(打开“这台电脑”或任一文件夹即可),然后在资源管理器窗口的地址栏中输入 shell:sendto ,回车或点击地址栏右侧的“转到”箭头即可打开“SendTo(发送到) ...

  10. 韩顺平Linux学习笔记

    第 一 章    Linux开山篇 1.1 Linux课程的内容介绍 1.2Linux的学习方向 1.2.1. Linux运维工程师:主要做大公司中的电脑系统维护,保证服务器的正常运行,如服务器的优化 ...