给video添加自定义进度条
思路：
1.进度条，首先要知道视频的总长度，和视频的当前进度，与其对应的便是进度条的总长度和当前的长度，两者比值相等
2.获取视频的总长度（单位是秒），获取当前进度
3.要实现的功能，首先是进度条根据视频播放的进度，不断的增加。意思就是不断的获取视频的当前进度，然后去除以视频的总长度，拿这个比值乘以进度条的总长度，就得到经度条当前的长度，赋值。
4.拖动经度条，视频在相应的位置播放。反过来，先获取进度条的当前位置，除以进度条的总长度，拿这个比值乘以视频的总长度，就得到视频当前应该播放的进度，赋值。
上面稍后有时间，把代码整理出来贴给大家。另外再添加一个效果，当用户有操作时，控制条就显示，几秒之内没有操作，控制条则消失。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>video test</title> 6 </head> 7 <body> 8 <style> 9 body{ 10 background-color: #ccc; 11 } 12 #container{ 13 width: 100%; 14 height:100px; 15 background-color:#000; 16 position: fixed; 17 left: 0; 18 bottom: 0; 19 20 color: #fff; 21 text-align: center; 22 } 23 #box{ 24 width: 100%; 25 height:100px; 26 background-color: #fff; 27 position: fixed; 28 left: 0; 29 bottom: -50px; 30 opacity: 0; 31 -webkit-transition: all .5s ease-in; 32 -moz-transition: all .5s ease-in; 33 transition: all .5s ease-in; 34 35 color: #000; 36 text-align: center; 37 } 38 #box.move{ 39 opacity: 1; 40 bottom: 0px; 41 } 42 </style> 43 <div id="container"> 44 鼠标移入试试 45 <div id="box">控制条(无操作，3秒后消失)</div> 46 </div> 47 <script> 48 var now,timer; 49 // 首先获取一次，最后时间 50 var lastTime=new Date().getTime(); 51 // 获取元素 52 var container=document.getElementById("container"); 53 var box=document.getElementById("box"); 54 //当鼠标移入控制条区域时，控制条显示出来 55 container.onmousemove=function(){ 56 //记录一次lastTime的时间 57 lastTime=new Date().getTime(); 58 // 返回结果为毫秒数 59 box.classList.add("move"); 60 } 61 62 // 每搁一秒检查一次，如果无操作超过3秒，则控制条消失 63 timer=setInterval(function(){ 64 // 获取最新的时间 65 now=new Date().getTime(); 66 //如果now的时间-lastTime超过3秒; 67 //就将div隐藏 68 if(now-lastTime>3000){ 69 box.classList.remove("move"); 70 } 71 },1000) 72 73 </script> 74 </body> 75 </html>
