HTML 5多媒體組件（自定義控件使用）
必備知識(shí)：熟悉 HTML 和 JavaScript。
用戶級(jí)別：中級(jí)
范例文件：custom-controls.zip (15.1 MB)
這是關(guān)于HTML5的系列教程的第三部分（共3部分）。在HTML 5多媒體組件（視頻的使用）和HTML 5多媒體組件（音頻的使用），講到了 video 和 audio 元素，簡(jiǎn)短的展示了如何給這些元素添加 controls 屬性，以此來(lái)給瀏覽器的媒體（media）元素設(shè)置默認(rèn)值。如果已試過(guò)，那應(yīng)該注意到了各個(gè)瀏覽器的默認(rèn)外觀并不一樣。
如果你希望你的媒體元素在各瀏覽器下有相同的樣式，就可以使用HTML5媒體元素的方便的API。你可以使用標(biāo)準(zhǔn)的HTML和CSS來(lái)控制媒體的外觀， 并用 media元素的API來(lái)控制 audio 和 video 元素。
此篇教程詳細(xì)的描述了構(gòu)建一個(gè)自定義媒體播放器的各個(gè)步驟，添加一些特點(diǎn)和功能，使用不同的API屬性，事件和方法。你可以先看看這個(gè)案例 的最終結(jié)果，在此文章的示例附件中（見(jiàn)原文章地址中）。
注意：這篇教程使用了視頻元素，但是音頻的處理也是同理可得的。
開(kāi)始
第一步，就是先定義一個(gè)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>
注意，這里給你的視頻元素標(biāo)簽中添加了 controls 屬性，然后自定義的控制就需要用到j(luò)avascript，先通過(guò)js把它的默認(rèn)設(shè)置關(guān)閉。 這樣的話，即便用戶把js給屏蔽了，他們也能使用瀏覽器自帶的默認(rèn)控制。
要通過(guò)js來(lái)關(guān)閉默認(rèn)的控制，只需把 video 元素的 controls 屬性設(shè)置為 false 即可：
- <script>
- // Grab a handle to the video var video = document.getElementById("video");
- // Turn off the default controls video.controls = false;
- </script>
接下來(lái)，準(zhǔn)備繼續(xù)前進(jìn)！
添加播放和暫停功能
對(duì)大多數(shù)播放器來(lái)說(shuō)，最基本的需求就是播放和暫停。在這個(gè)例子中，我們只用一個(gè)按鈕，在暫停的時(shí)候它顯示為”播放”，在播放的時(shí)候它是”暫停”。
- <div id="controls">
- <button id="playpause" title="play">Play</button>
- </div>
然后，就創(chuàng)建一個(gè)js函數(shù)，來(lái)改變button的title屬性和實(shí)現(xiàn)播放和暫停的功能。
在這個(gè)例子中，函數(shù)的名字叫做 togglePlayPause()。仔細(xì)的看看下面的代碼，詳細(xì)的解釋在下面:
- 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();
- }
- }
想要這個(gè)函數(shù)在每次點(diǎn)擊播放/暫停按鈕時(shí)都被調(diào)用的話，你就把它添加到button標(biāo)簽的 onclick 事件中：
- <button id="playpause" title="play" onclick="togglePlayPause()">Play</button>
togglePlayPause() 函數(shù)的第一行包含一個(gè)針對(duì)play/pause按鈕自身的處理器，并將它賦值給變量playpause:
- var playpause = document.getElementById("playpause");
接下來(lái)，它通過(guò)兩個(gè)屬性 paused 和 ended檢查視頻的狀態(tài)，看看它是否是暫?；蛘咄Ｖ?。如果視頻處于這兩個(gè)狀態(tài)，它就會(huì)設(shè)置按鈕的 title 和 innerHTML 屬性為 "pause"，并調(diào)用 video.play() 來(lái)播放視頻。
如果視頻目前不是暫停和結(jié)束狀態(tài)，那么你會(huì)假設(shè)它正在播放。在這種情況下，這個(gè)函數(shù)設(shè)置按鈕的 title和 innerHTML 為 "play"，并調(diào)用 video.pause() 來(lái)暫停視頻。
按鈕的默認(rèn)文本為 “play”。當(dāng)這個(gè)按鈕被第一次點(diǎn)擊，視頻就會(huì)開(kāi)始播放，接著按鈕的文本就會(huì)變?yōu)?“pause” ，接著當(dāng)暫停按鈕被點(diǎn)擊時(shí)，視頻就會(huì)暫停，按鈕文本會(huì)變回 “play”。
正如你所見(jiàn)，在本教程接下來(lái)的功能介紹中都遵循同樣的基本模式：給 video 元素添加偵聽(tīng)器，檢查元素的當(dāng)前狀態(tài)，然后調(diào)用API方法。
添加音量控制和靜音按鈕
播放器的另一個(gè)極其重要的功能就是控制音量的大小，包括靜音的功能。
要添加音量控制，你只需要使用HTML5的新的<input>標(biāo)簽類(lèi)型range：<input type=”range”/>。這一個(gè)input的類(lèi)型會(huì)被瀏覽器渲染為一個(gè)滑動(dòng)條，用戶可以 左右滑動(dòng)，你可以通過(guò) min 和 max 屬性來(lái)指定最小值和最大值，然后用 step 屬性來(lái)設(shè)置每動(dòng)一下的滑動(dòng)大小?？梢杂孟旅娴拇a來(lái)創(chuàng)建一個(gè)范圍為0到1的， 步進(jìn)大小為0.1的滑動(dòng)條：
- <input id="volume" min="0" max="1" step="0.1" type="range" />
當(dāng)滑動(dòng)條滑動(dòng)時(shí)，需要調(diào)整音量大小，只需要設(shè)置標(biāo)簽的 onchange 屬性來(lái)調(diào)用js偵聽(tīng)器即可：
- <input id="volume" min="0" max="1" step="0.1" type="range" onchange="setVolume()" />
然后創(chuàng)建一個(gè)js函數(shù)，并取名為 setVolume()：
- function setVolume() {
- var volume = document.getElementById("volume");
- video.volume = volume.value; }
這個(gè)簡(jiǎn)單的按鈕含有一個(gè)處理音量滑塊的控制器，并將它的值賦給 video 元素的 volume 屬性。
注意： 火狐 7 不支持 range 類(lèi)型，而是以一個(gè)文本字段代替。這時(shí)可以手動(dòng)的寫(xiě)入音量的值（0–1），然后鼠標(biāo)點(diǎn)擊其他地方（讓他失去焦點(diǎn)），就會(huì)實(shí)現(xiàn)相同的調(diào)整音量的效果了。
添加靜音按鈕也是很簡(jiǎn)單的。還是定義一個(gè)新的按鈕，這次需要一個(gè) onclick 處理器：
- <button id="mute" onclick="toggleMute()">Mute</button>
接著創(chuàng)建一個(gè)名為 toggleMute() 的函數(shù)：
- function toggleMute() {
- video.muted = !video.muted;
- }
這個(gè)功能設(shè)置 視頻 元素的 muted 屬性（布爾變量）為當(dāng)前值的相反值。這樣就切換了按鈕的靜音狀態(tài)。很簡(jiǎn)單！
添加播放進(jìn)度條
用戶習(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ì)隨著視頻的播放而不斷更新。
監(jiān)聽(tīng)事件
Media元素的API定義了許多的事件，你可以用他們來(lái)完善你的播放器。完整的事件列表可以查看 W3C’s summary of media element API events。表1中列出了幾個(gè)常用的事件：
Table 1. 媒體元素 API 事件
| 事件名 | 描述 |
| playing | 當(dāng)媒體以前被暫停，現(xiàn)在要開(kāi)始重新播放時(shí)觸發(fā) |
| ended | 當(dāng)媒體播放完停止時(shí)觸發(fā) |
| timeupdate | 當(dāng)媒體當(dāng)前的播放位置被改變時(shí)觸發(fā) |
| play | 當(dāng)以前暫停的媒體不再是暫停和播放已恢復(fù)時(shí)觸發(fā) |
| pause | 當(dāng)返回 pause() 方法，而且媒體已經(jīng)被暫停時(shí)觸發(fā) |
| volumechange | 當(dāng)媒體的 音量 和 靜音 屬性改變時(shí)觸發(fā) |
當(dāng)你使用自定義控制機(jī)制的時(shí)候，監(jiān)聽(tīng)一些可用的事件來(lái)確保你的視頻狀態(tài)是實(shí)時(shí)同步的，這將會(huì)是一個(gè)比較好的體驗(yàn)。
控制界面怎么會(huì)不同步？當(dāng)你用js關(guān)閉了它們默認(rèn)的控制之后，并由用戶打開(kāi)這些控制并使用它們和視頻交互，就存在這種可能了。比如，在火狐下，除了 這些控制之外，還可以在視頻上右擊，然后會(huì)有相應(yīng)的控制選項(xiàng)，播放，暫停等等。如果用戶點(diǎn)擊了這些選項(xiàng)，你剛才自定義的界面就有可能不能實(shí)時(shí)的反映當(dāng)前的 視頻狀態(tài)了。
但是不管用哪種方法控制，相對(duì)應(yīng)的事件總是會(huì)被觸發(fā)的，因此，你可以監(jiān)聽(tīng) pause 和 play 事件來(lái)實(shí)現(xiàn)同步，如：
- 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);
你也應(yīng)該監(jiān)聽(tīng) ended 事件，這樣當(dāng)視頻結(jié)束時(shí)，play/pause按鈕可以實(shí)時(shí)更新。當(dāng) ended 事件被觸發(fā)時(shí)，你可以調(diào)用視頻的 pause() 方法來(lái)實(shí)現(xiàn)這個(gè)功能。
- video.addEventListener('ended', function() {
- this.pause();
- }, false);
注意： 之所以在這里調(diào)用 pause() 方法，是因?yàn)槿绱艘粊?lái)就可以觸發(fā) pause 事件了，這又由此導(dǎo)致了我們上面所寫(xiě)的 pause 事件控制器代碼的調(diào)用。當(dāng)然你也可以把代碼全部拷貝到 ended 的偵聽(tīng)器里面，或者，如果你有其他的需求或擴(kuò)展，你在這里定義它。
添加播放列表
最后一個(gè)功能就是媒體播放列表，用戶可以用它來(lái)改變?cè)诿襟w播放器中的視頻。這也很簡(jiǎn)單。首先你要定義你的播放列表，例如：
- <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>
在播放列表里有兩個(gè)條目，當(dāng)被點(diǎn)擊時(shí)，每一個(gè)都會(huì)調(diào)用名為 playlistClick() 的函數(shù)。這個(gè)函數(shù)只有一個(gè)參數(shù)，就是要播放文件的地址（沒(méi)有擴(kuò)展名）。這個(gè)函數(shù)的定義如下：
- 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;
- }
這個(gè)函數(shù)首先生成一個(gè)臨時(shí)的視頻元素，接著針對(duì)每一個(gè)支持的視頻類(lèi)型調(diào)用 canPlayType() 方法，在這個(gè)例子中視頻類(lèi)型為MP4和WebM。當(dāng)確定了瀏覽器所能播放的文件類(lèi)型后，它調(diào)用只有一個(gè)參數(shù)的changeSource()，這個(gè)被傳入函數(shù)的文件名含有合適的文件擴(kuò)展名。這個(gè)函數(shù)會(huì)返回 false 來(lái)防止element的鏈接變?yōu)?nbsp;href 屬性的值。
changeSource() 函數(shù)的定義如下：
- function changeSource(src) {
- resetPlayer();
- video.src = src;
- video.load();
- }
這個(gè)函數(shù)調(diào)用你下面將會(huì)看到的 resetPlayer() 函數(shù)，接著設(shè)置視頻元素的 src 屬性為：剛剛傳入的被作為一個(gè)屬性的新的視頻文件。最后，它調(diào)用 load() 來(lái)加載新的視頻源到 視頻 元素中。
注意： 不是所有的瀏覽器都要求調(diào)用 load() 方法，但是Safari需要。因此，調(diào)用它是個(gè)好的主意。
resetPlayer() 函數(shù)為了準(zhǔn)備載入一個(gè)新的視頻，重置了一些播放器組件。
- function resetPlayer() {
- var playpause = document.getElementById("playpause");
- playpause.title = "play";
- playpause.innerHTML = "play";
- if (video.currentTime > 0) video.currentTime = 0;
- updateProgress();
- }
首先，它設(shè)置play/pause按鈕的文本為 “play”。 接著如果 視頻元素的currentTime 變量不在 0 的位置，則它重置為 0。最后它調(diào)用 updateProgress() 函數(shù)，它將重置進(jìn)度條到開(kāi)始的 位置（進(jìn)度條使用了video 元素的 currentTime 屬性，它只要設(shè)為0即可）。
就是這樣！你已經(jīng)了解了創(chuàng)建一個(gè)簡(jiǎn)單的HTML5媒體播放器所需的所有必要步驟。雖然這個(gè)播放器的顯示不是很有吸引力，但是你可以通過(guò)使用CSS樣式來(lái)改進(jìn)它的外觀。
分享到微信 
分享到微博
51CTO技術(shù)棧公眾號(hào)
速覽