視訊標籤<video></video>是H5中新增的標籤，它自帶播放按鈕等控制元件，但在實際開發中我們是不會用標籤中自帶的控制元件屬性的，一般我們都會自定義控制元件。

　　首先我們來看看視訊標籤自帶的控制元件效果：

　　　雖然總體來說，這些控制元件都有，但是往往我們見到的都不會是這樣的，一般我們都會自己設計。

　　　　以下是我自己做的一個簡單的案例，自定義一些控制元件並實現它的功能，效果如下：

　　　　　現在我們可以來具體講講以上這些播放暫停全屏按鈕都是如何自定義實現其功能的：

　　　　步驟：

　　　　　　1、首先我們把所需要的素材準備好：一個簡短視訊，播放按鈕的圖片，暫停按鈕的圖片，全屏按鈕的圖片

　　　　　　2、播放暫停全屏等按鈕是圖片，進度條使用的是progress標籤，視屏總時長和播放的當前時間是用span標籤裝的，內容先初始化為0。這些排列的順序可以自己調整擺放，這裡我　　　　　　　使用的是定位

　　　　　　佈局程式碼：

 1 　　　　<div id="container">
 2             <video poster="img/oceans-clip.png">
 3                 <source src="video/oceans-clip.mp4"></source>
 4                 <
 
source src="video/oceans-clip.ogv"></source>
 5                 <source src="video/oceans-clip.webm"></source>
 6             </video>
 7             <div class="pos">
 8                 <img src=" img/on.png" width="40px" id="playBtn" />
 9                 <progress  
 
value="0" id="progress"></progress>
10                 <div class="timebox">
11                     <span id="time1">
12                         00:00:00
13                     </span>/
14                     <span id="time2">
15                         00:00:00
16                     </span>
17                 </div>
18                 <img src="img/expand.jpg" width="35px" id="full"/>
19             </div>
20         </div>

　　　　　　CSS樣式：

 1 <style type="text/css">
 2             body,div,img{
 3                 margin: 0;
 4                 padding: 0;
 5                 border: 0;
 6             }
 7             #container{
 8                 width: 640px;
 9                 /*height: 400px;*/
10                 border: 1px solid pink;
11                 /*position: relative;*/
12             }
13             
14             .pos{
15                 width: 640px;
16                 height: 60px;
17                 background: #242424;
18                 margin-top: -7px;
19                 position: relative;
20                 
21             }
22             #playBtn{
23                 position:absolute;
24                 top: 10px;
25                 left: 20px;
26                 cursor: pointer;
27             }
28             #progress{
29                 height: 12px;
30                 width: 320px;
31                 position:absolute;
32                 top: 24px;
33                 left: 80px;
34                 cursor: pointer;
35                 
36             }
37             .timebox{
38                 position:absolute;
39                 top: 20px;
40                 left: 420px;
41                 cursor: pointer;
42                 color: white;
43             }
44             
45             #full{
46                 position:absolute;
47                 top: 12px;
48                 right: 20px;
49                 cursor: pointer;
50             }
51             
52         </style>

　　3.實現播放按鈕功能：播放按鈕繫結點選事件，視屏狀態為暫停時，點選播放，狀態為播放時，點選暫停，同時切換按鈕背景圖片，

　　　　實現程式碼如下：

 1 var video = document.querySelector("video");
 2             var playBtn = document.getElementById("playBtn");
 3             playBtn.onclick = function(){
 4                 if(video.paused){
 5                     video.play();
 6                     playBtn.src = "img/pause.png";
 7                 }else{
 8                     video.pause();
 9                     playBtn.src = "img/on.png";
10                 }
11             }

　　4.實現全屏效果，因為瀏覽器的核心不同，所以會加一些瀏覽器核心字首，程式碼也會很多：

 1 var full = document.getElementById("full");
 2             var container = document.getElementById("container");
 3             var i = 1;//定義一個變數，用於記錄是否為全屏狀態
 4             full.onclick = function(){
 5                 i++；
　　　　　　　　　　　//對2取餘，為0則全屏，否則關閉全屏
 6                 if(i%2==0){
　　　　　　　　　　　　　　//點選開啟全屏
 7                     if(container.requestFullScreen){
 8                      container.requestFullScreen()
 9                     }else if(container.webkitRequestFullScreen){
10                          container.webkitRequestFullScreen()//谷歌
11                     }else if(container.mozRequestFullScreen){
12                          container.mozRequestFullScreen()//火狐
13                     }else if(div01.msRequestFullscreen){
14                          container.msRequestFullscreen()//ie
15                     }
16                 }else{
　　　　　　　　　　　　　　//關閉全屏
17                     if(document.cancelFullscreen){
18                          document.cancelFullscreen();
19                     }else if(document.webkitCancelFullScreen){
20                          document.webkitCancelFullScreen();
21                     }else if(document.mozCancelFullScreen){
22                          document.mozCancelFullScreen();
23                     }else if(document.msExitFullscreen){
24                          document.msExitFullscreen();
25                     }
26                 }
27                  
28             }

　　5、視訊播放時間進行一個簡單的修改，構造一個函式，使其標準化，當時間為個位數時，加一個字串“0”，兩位數時，新增空串

1 function number1(s){
2                 if(s<10){
3                     s="0"+s
4                 }else{
5                     s=""+s
6  } 7 return s; 8 }

　6、動態獲取視訊總時長，和顯示當前視訊播放時間，並同時付給進度條的value，方法：oncanplay，ontimeupdate，程式碼如下：

 1 var time1 = document.getElementById("time1");
 2             var time2 = document.getElementById("time2");
 3             var t1;
 4             //視訊獲取時間單位為秒，要對它進行一些資料的處理
 5             video.oncanplay = function(){
　　　　　　　　　　　　//獲取視訊總時長
 6                 t1 = video.duration;
 7                 var h = parseInt(t1/3600);
 8                 var m = parseInt(t1%3600/60);
 9                 var s = parseInt(t1%60);
　　　　　　　　　　　　//值顯示在span標籤中
10                 time2.innerHTML = number1(h) + ":"+ number1(m) + ":" + number1(s);
11             }
12 
13 video.ontimeupdate = function(){
　　　　　　　　　　　　//獲取當前視訊播放的時間
14                 var t2 = video.currentTime;
15                 var h = parseInt(t2/3600);
16                 var m = parseInt(t2%3600/60);
17                 var s = parseInt(t2%60);
18                 time1.innerHTML = number1(h) + ":"+ number1(m) + ":" + number1(s);
19                 progress.max = t2;
20                 progress.value = t2/t1*progress.max;
21             }

　　　　7、進度條點選事件，及視訊結束的處理：

 1 video.onended = function(){
 2                 progress.value = 0;
　　　　　　　　　　　　//結束時清0；
 3                 time1.innerHTML = "00"+":"+"00"+":"+"00";
 4             }
 5             
 6             progress.onclick = function(e){
 7                     //獲取當前位置距離父級最左邊的距離
 8                     //left = progress.offsetLeft;
 9                     //獲取滑鼠距離螢幕最左邊的距離
10                     //e.clientX
11                     //獲取滑鼠距離當前元素最左邊的距離
12                     var left  = e.offsetX;
13                     console.log(left);
14                     console.log(t1);
15                     video.currentTime = left/320*t1;
16                 }

　　　　大概步驟就是這樣了，一個簡單的視屏自定義控制元件功能就做好了。