隱藏瀏覽器自帶的控制條自己實(shí)現(xiàn)一個(gè)控制器

用戶習(xí)慣于在看視頻時(shí)查看已經(jīng)播放了多少，和還剩多少。

給你的播放器添加一個(gè)簡(jiǎn)單的進(jìn)度條，可以用 div 標(biāo)簽和 span 標(biāo)簽?？梢栽黾?span 的寬度來(lái)顯示視頻的進(jìn)度。

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

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

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

然后，定義一個(gè)函數(shù)，它能夠通過(guò)改變 span 元素的 width 來(lái)更新進(jìn)度條。

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 + "%";
}

這個(gè)函數(shù)的第一行包含一個(gè)控制器來(lái)處理進(jìn)程 span 元素自身。它檢查 video 元素的 currentTime 屬性值，這個(gè)值定義了當(dāng)前的播放位置，以秒來(lái)記。如果 currentTime 大于 0表示視頻已經(jīng)被播放，它使用 video 元素的 duration 屬性來(lái)計(jì)算當(dāng)前進(jìn)度的百分?jǐn)?shù)，duration 屬性定義了視頻的總長(zhǎng)度，以秒來(lái)計(jì)算。最后，它將結(jié)果賦值給進(jìn)程 span 的CSS width 。

在上面的播放，暫停，靜音等時(shí)，你可以使用如 onclick 和 onchange 等事件來(lái)調(diào)用相應(yīng)的函數(shù)。但是這個(gè)進(jìn)度條卻不行，因?yàn)檫@是視頻進(jìn)度的響應(yīng)，而非和用戶交互。

當(dāng)然，HTML5的媒體元素API也增加了幾個(gè)可以偵聽(tīng)的事件來(lái)實(shí)現(xiàn)該功能。其中一個(gè)就是 timeupdate 事件，每當(dāng) currentTime 屬性改變的時(shí)候就會(huì)觸發(fā)出此事件。（即當(dāng)媒體開(kāi)始播放后就會(huì)連續(xù)不斷的觸發(fā)。）

在你的web頁(yè)的JavaScript初始化代碼中，當(dāng) timeupdate 事件被激活時(shí)，添加一個(gè)事件監(jiān)聽(tīng)器來(lái)調(diào)用updateProgress 函數(shù)：

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

加一個(gè)點(diǎn)擊事件判斷點(diǎn)擊位置，如果點(diǎn)擊位置在當(dāng)前位置之前，允許跳轉(zhuǎn)，否則不允許跳轉(zhuǎn)

也可以看這個(gè) http://idcbgp.cn/article/...

里面有跳躍播放的代碼，直接做一個(gè)判斷就行，原理與我描述的一致，判斷鼠標(biāo)點(diǎn)擊的位置