給video添加自定義進度條

時間 2019-12-07

標籤 video 添加自定義進度简体版

原文原文鏈接

思路：html

　　1.進度條，首先要知道視頻的總長度，和視頻的當前進度，與其對應的即是進度條的總長度和當前的長度，二者比值相等web

　　2.獲取視頻的總長度（單位是秒），獲取當前進度ide

　　3.要實現的功能，首先是進度條根據視頻播放的進度，不斷的增長。意思就是不斷的獲取視頻的當前進度，而後去除以視頻的總長度，拿這個比值乘以進度條的總長度，就獲得經度條當前的長度，賦值。spa

　　4.拖動經度條，視頻在相應的位置播放。反過來，先獲取進度條的當前位置，除以進度條的總長度，拿這個比值乘以視頻的總長度，就獲得視頻當前應該播放的進度，賦值。code

上面稍後有時間，把代碼整理出來貼給你們。另外再添加一個效果，當用戶有操做時，控制條就顯示，幾秒以內沒有操做，控制條則消失。視頻

 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>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。