隱藏瀏覽器自帶的控制條自己實現一個控制器

用戶習慣于在看視頻時查看已經播放了多少，和還剩多少。

給你的播放器添加一個簡單的進度條，可以用 div 標簽和 span 標簽?？梢栽黾?span 的寬度來顯示視頻的進度。

<div id="progressBar"><span id="progress"></span></div>

當然，你也希望用一些css，這樣才能看出span的效果：

#progressBar { 
   border:1px solid #aaa; 
   color:#fff; 
   width:295px; 
   height:20px;
}#progress {   background-color:#ff0000; // red
   height:20px;   display:inline-block;
}

然后，定義一個函數，它能夠通過改變 span 元素的 width 來更新進度條。

function updateProgress() {   var progress = document.getElementById("progress");   var value = 0;   if (video.currentTime > 0) {
      value = Math.floor((100 / video.duration) * video.currentTime);
   }
   progress.style.width = value + "%";
}

這個函數的第一行包含一個控制器來處理進程 span 元素自身。它檢查 video 元素的 currentTime 屬性值，這個值定義了當前的播放位置，以秒來記。如果 currentTime 大于 0表示視頻已經被播放，它使用 video 元素的 duration 屬性來計算當前進度的百分數，duration 屬性定義了視頻的總長度，以秒來計算。最后，它將結果賦值給進程 span 的CSS width 。

在上面的播放，暫停，靜音等時，你可以使用如 onclick 和 onchange 等事件來調用相應的函數。但是這個進度條卻不行，因為這是視頻進度的響應，而非和用戶交互。

當然，HTML5的媒體元素API也增加了幾個可以偵聽的事件來實現該功能。其中一個就是 timeupdate 事件，每當 currentTime 屬性改變的時候就會觸發出此事件。（即當媒體開始播放后就會連續不斷的觸發。）

在你的web頁的JavaScript初始化代碼中，當 timeupdate 事件被激活時，添加一個事件監聽器來調用updateProgress 函數：

video.addEventListener("timeupdate", updateProgress, false);
現在，你的進度條就會隨著視頻的播放而不斷更新。

加一個點擊事件判斷點擊位置，如果點擊位置在當前位置之前，允許跳轉，否則不允許跳轉

也可以看這個 http://www.xianlaiwan.cn/article/...

里面有跳躍播放的代碼，直接做一個判斷就行，原理與我描述的一致，判斷鼠標點擊的位置