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

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

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

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

注意，這里給你的視頻元素標簽中添加了 controls 屬性，然后自定義的控制就需要用到j(luò)avascript，先通過js把它的默認設(shè)置關(guān)閉。 這樣的話，即便用戶把js給屏蔽了，他們也能使用瀏覽器自帶的默認控制。

要通過js來關(guān)閉默認的控制，只需把 video 元素的 controls 屬性設(shè)置為 false 即可：

接下來，準備繼續(xù)前進！

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

然后，就創(chuàng)建一個js函數(shù)，來改變button的title屬性和實現(xiàn)播放和暫停的功能。

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

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

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

接下來，它通過兩個屬性 paused 和 ended檢查視頻的狀態(tài)，看看它是否是暫?；蛘咄Ｖ?。如果視頻處于這兩個狀態(tài)，它就會設(shè)置按鈕的 title 和 innerHTML 屬性為 "pause"，并調(diào)用 video.play() 來播放視頻。

如果視頻目前不是暫停和結(jié)束狀態(tài)，那么你會假設(shè)它正在播放。在這種情況下，這個函數(shù)設(shè)置按鈕的 title和 innerHTML 為 "play"，并調(diào)用 video.pause() 來暫停視頻。

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

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

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

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

當滑動條滑動時，需要調(diào)整音量大小，只需要設(shè)置標簽的 onchange 屬性來調(diào)用js偵聽器即可：

然后創(chuàng)建一個js函數(shù)，并取名為 setVolume()：

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

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

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

接著創(chuàng)建一個名為 toggleMute() 的函數(shù)：

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

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

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

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

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

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

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

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

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

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

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

Table 1. 媒體元素 API 事件

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

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

但是不管用哪種方法控制，相對應(yīng)的事件總是會被觸發(fā)的，因此，你可以監(jiān)聽 pause 和 play 事件來實現(xiàn)同步，如：

你也應(yīng)該監(jiān)聽 ended 事件，這樣當視頻結(jié)束時，play/pause按鈕可以實時更新。當 ended 事件被觸發(fā)時，你可以調(diào)用視頻的 pause() 方法來實現(xiàn)這個功能。

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

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

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

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

changeSource() 函數(shù)的定義如下：

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

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

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

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

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