思路：
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>