DIV CSS 佈局教程網

要求

必備知識

熟悉 Html 和 JavaScript。

用戶級別

中級

范例文件

• custom-controls.zip (15.1 MB)

 

 

這是關於Html5的系列教程的第三部分（共3部分）。在第一部分和第二部分，講到了 video 和 audio 元素，簡短的展示了如何給這些元素添加 controls 屬性，以此來給浏覽器的媒體（media）元素設置默認值。如果已試過，那應該注意到了各個浏覽器的默認外觀並不一樣。

如果你希望你的媒體元素在各浏覽器下有相同的樣式，就可以使用Html5媒體元素的方便的API。你可以使用標准的Html和CSS來控制媒體的外觀， 並用 media元素的API來控制 audio 和 video 元素。

此篇教程詳細的描述了構建一個自定義媒體播放器的各個步驟，添加一些特點和功能，使用不同的API屬性，事件和方法。你可以先看看這個案例 的最終結果，在此文章的示例附件中（見原文章地址中）。

注意：這篇教程使用了視頻元素，但是音頻的處理也是同理可得的。

開始

第一步，就是先定義一個video元素。

 

<video id="video" controls>  
<source src="grass-in-the-wind-sma.mp4" type="video/mp4"> 
<source src="grass-in-the-wind-sma.webm" type="video/webm">  
</video> 

注意，這裡給你的視頻元素標簽中添加了 controls 屬性，然後自定義的控制就需要用到Javascript，先通過js把它的默認設置關閉。 這樣的話，即便用戶把JS給屏蔽了，他們也能使用浏覽器自帶的默認控制。

要通過JS來關閉默認的控制，只需把 video 元素的 controls 屬性設置為 false 即可：

 

<script>  
// Grab a handle to the video var video = document.getElementById("video");  
// Turn off the default controls video.controls = false;  
</script> 

接下來，准備繼續前進！

添加播放和暫停功能

對大多數播放器來說，最基本的需求就是播放和暫停。在這個例子中，我們只用一個按鈕，在暫停的時候它顯示為”播放”，在播放的時候它是”暫停”。

 

<div id="controls"> 
<button id="playpause" title="play">Play</button> 
</div> 

然後，就創建一個JS函數，來改變button的title屬性和實現播放和暫停的功能。

在這個例子中，函數的名字叫做 togglePlayPause()。仔細的看看下面的代碼，詳細的解釋在下面:

 

function togglePlayPause() { 
    var playpause = document.getElementById("playpause"); 
    if (video.paused || video.ended) { 
        playpause.title = "pause"; 
        playpause.innerHtml = "pause"; 
        video.play(); 
    } else { 
        playpause.title = "play"; 
        playpause.innerHtml = "play"; 
        video.pause(); 
    } 
} 

想要這個函數在每次點擊播放/暫停按鈕時都被調用的話，你就把它添加到button標簽的 onclick 事件中：

 

<button id="playpause" title="play" onclick="togglePlayPause()">Play</button> 

togglePlayPause() 函數的第一行包含一個針對play/pause按鈕自身的處理器，並將它賦值給變量playpause:

 

var playpause = document.getElementById("playpause"); 

接下來，它通過兩個屬性 paused 和 ended檢查視頻的狀態，看看它是否是暫停或者停止。如果視頻處於這兩個狀態，它就會設置按鈕的 title 和 innerHtml 屬性為 "pause"，並調用 video.play() 來播放視頻。

如果視頻目前不是暫停和結束狀態，那麼你會假設它正在播放。在這種情況下，這個函數設置按鈕的 title和 innerHtml 為 "play"，並調用 video.pause() 來暫停視頻。

按鈕的默認文本為 “play”。當這個按鈕被第一次點擊，視頻就會開始播放，接著按鈕的文本就會變為 “pause” ，接著當暫停按鈕被點擊時，視頻就會暫停，按鈕文本會變回 “play”。

正如你所見，在本教程接下來的功能介紹中都遵循同樣的基本模式：給 video 元素添加偵聽器，檢查元素的當前狀態，然後調用API方法。

添加音量控制和靜音按鈕

播放器的另一個極其重要的功能就是控制音量的大小，包括靜音的功能。

要添加音量控制，你只需要使用Html5的新的<input>標簽類型range：<input type=”range”/>。這一個input的類型會被浏覽器渲染為一個滑動條，用戶可以 左右滑動，你可以通過 min 和 max 屬性來指定最小值和最大值，然後用 step 屬性來設置每動一下的滑動大小。可以用下面的代碼來創建一個范圍為0到1的， 步進大小為0.1的滑動條：

 

<input id="volume" min="0" max="1" step="0.1" type="range" /> 

當滑動條滑動時，需要調整音量大小，只需要設置標簽的 onchange 屬性來調用JS偵聽器即可：

 

<input id="volume" min="0" max="1" step="0.1" type="range" onchange="setVolume()" /> 

然後創建一個JS函數，並取名為 setVolume()：

 

function setVolume() { 
var volume = document.getElementById("volume");  
video.volume = volume.value; } 

這個簡單的按鈕含有一個處理音量滑塊的控制器，並將它的值賦給 video 元素的 volume 屬性。

注意： 火狐 7 不支持 range 類型，而是以一個文本字段代替。這時可以手動的寫入音量的值（0–1），然後鼠標點擊其他地方（讓他失去焦點），就會實現相同的調整音量的效果了。

添加靜音按鈕也是很簡單的。還是定義一個新的按鈕，這次需要一個 onclick 處理器：

 

<button id="mute" onclick="toggleMute()">Mute</button> 

接著創建一個名為 toggleMute() 的函數：

 

function toggleMute() {  
    video.muted = !video.muted;  
} 

這個功能設置 視頻 元素的 muted 屬性（布爾變量）為當前值的相反值。這樣就切換了按鈕的靜音狀態。很簡單！

添加播放進度條

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

給你的播放器添加一個簡單的進度條，可以用 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); 

現在，你的進度條就會隨著視頻的播放而不斷更新。

監聽事件

Media元素的API定義了許多的事件，你可以用他們來完善你的播放器。完整的事件列表可以查看 W3C’s summary of media element API events。表1中列出了幾個常用的事件：

Table 1. 媒體元素 API 事件

事件名 描述 playing 當媒體以前被暫停，現在要開始重新播放時觸發 ended 當媒體播放完停止時觸發 timeupdate 當媒體當前的播放位置被改變時觸發 play 當以前暫停的媒體不再是暫停和播放已恢復時觸發 pause 當返回 pause() 方法，而且媒體已經被暫停時觸發 volumechange 當媒體的 音量 和 靜音 屬性改變時觸發

當你使用自定義控制機制的時候，監聽一些可用的事件來確保你的視頻狀態是實時同步的，這將會是一個比較好的體驗。

控制界面怎麼會不同步？當你用JS關閉了它們默認的控制之後，並由用戶打開這些控制並使用它們和視頻交互，就存在這種可能了。比如，在火狐下，除了 這些控制之外，還可以在視頻上右擊，然後會有相應的控制選項，播放，暫停等等。如果用戶點擊了這些選項，你剛才自定義的界面就有可能不能實時的反映當前的 視頻狀態了。

但是不管用哪種方法控制，相對應的事件總是會被觸發的，因此，你可以監聽 pause 和 play 事件來實現同步，如：

 

video.addEventListener('play', function() { 
  var playpause = document.getElementById("playpause"); 
  playpause.title = "pause"; 
  playpause.innerHtml = "pause"; 
}, false); 
 
video.addEventListener('pause', function() { 
  var playpause = document.getElementById("playpause"); 
  playpause.title = "play"; 
  playpause.innerHtml = "play"; 
}, false); 

你也應該監聽 ended 事件，這樣當視頻結束時，play/pause按鈕可以實時更新。當 ended 事件被觸發時，你可以調用視頻的 pause() 方法來實現這個功能。

 

video.addEventListener('ended', function() {  
this.pause(); 
}, false); 

注意： 之所以在這裡調用 pause() 方法，是因為如此一來就可以觸發 pause 事件了，這又由此導致了我們上面所寫的 pause 事件控制器代碼的調用。當然你也可以把代碼全部拷貝到 ended 的偵聽器裡面，或者，如果你有其他的需求或擴展，你在這裡定義它。

添加播放列表

最後一個功能就是媒體播放列表，用戶可以用它來改變在媒體播放器中的視頻。這也很簡單。首先你要定義你的播放列表，例如：

 

<ul id="playlist"> 
  <li><a href="#" onclick="playlistClick('grass-in-the-wind-sma');">Grass blowing in the wind</a></li> 
  <li><a href="#" onclick="playlistClick('tree-in-the-wind-sma');">Trees blowing in the wind</a></li> 
</ul> 

在播放列表裡有兩個條目，當被點擊時，每一個都會調用名為 playlistClick() 的函數。這個函數只有一個參數，就是要播放文件的地址（沒有擴展名）。這個函數的定義如下：

 

function playlistClick(file) { 
    var v = document.createElement("video"); 
    if (v.canPlayType("video/mp4") != "") { 
        changeSource(file + ".mp4"); 
    } 
    else if (v.canPlayType("video/webm") != "") { 
        changeSource(file + ".webm"); 
    } 
    return false; 
} 

這個函數首先生成一個臨時的視頻元素，接著針對每一個支持的視頻類型調用 canPlayType() 方法，在這個例子中視頻類型為MP4和WebM。當確定了浏覽器所能播放的文件類型後，它調用只有一個參數的changeSource()，這個被傳入函數的文件名含有合適的文件擴展名。這個函數會返回 false 來防止element的鏈接變為 href 屬性的值。

changeSource() 函數的定義如下：

function changeSource(src) { 
    resetPlayer(); 
    video.src = src; 
    video.load(); 
} 

這個函數調用你下面將會看到的 resetPlayer() 函數，接著設置視頻元素的 src 屬性為：剛剛傳入的被作為一個屬性的新的視頻文件。最後，它調用 load() 來加載新的視頻源到 視頻 元素中。

注意： 不是所有的浏覽器都要求調用 load() 方法，但是Safari需要。因此，調用它是個好的主意。

resetPlayer() 函數為了准備載入一個新的視頻，重置了一些播放器組件。

 

function resetPlayer() { 
    var playpause = document.getElementById("playpause"); 
    playpause.title = "play"; 
    playpause.innerHtml = "play"; 
    if (video.currentTime > 0) video.currentTime = 0; 
    updateProgress(); 
} 

首先，它設置play/pause按鈕的文本為 “play”。 接著如果 視頻元素的currentTime 變量不在 0 的位置，則它重置為 0。最後它調用 updateProgress() 函數，它將重置進度條到開始的 位置（進度條使用了video 元素的 currentTime 屬性，它只要設為0即可）。

下一步閱讀方向

就是這樣！你已經了解了創建一個簡單的Html5媒體播放器所需的所有必要步驟。雖然這個播放器的顯示不是很有吸引力，但是你可以通過使用CSS樣式來改進它的外觀。

如果您想看更多的關於媒體元素API，它的事件和它在運行中的屬性，請到 W3C’s Html5 Video Events and API demonstration page。它演示的視頻有著基本的控制，並顯示API屬性和事件。

你可以在我的書（Html5 Multimedia: Develop and Design）裡讀到更多的關於為Html5視頻和音頻創建自定義控制的方法。