DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> HTML5多媒體組件的使用——第三部分:自定義控件
HTML5多媒體組件的使用——第三部分:自定義控件
編輯:HTML5詳解     

要求

必備知識

熟悉 Html 和 JavaScript。

用戶級別

中級

范例文件

  • custom-controls.zip (15.1 MB)
 

 

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

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

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

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

開始

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

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

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

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

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

接下來,准備繼續前進!

添加播放和暫停功能

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

 
  1. <div id="controls"> 
  2. <button id="playpause" title="play">Play</button> 
  3. </div> 

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

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

 
  1. function togglePlayPause() { 
  2.     var playpause = document.getElementById("playpause"); 
  3.     if (video.paused || video.ended) { 
  4.         playpause.title = "pause"; 
  5.         playpause.innerHtml = "pause"; 
  6.         video.play(); 
  7.     } else { 
  8.         playpause.title = "play"; 
  9.         playpause.innerHtml = "play"; 
  10.         video.pause(); 
  11.     } 

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

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

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

 
  1. 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的滑動條:

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

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

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

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

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

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

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

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

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

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

 
  1. function toggleMute() {  
  2.     video.muted = !video.muted;  

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

添加播放進度條

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

給你的播放器添加一個簡單的進度條,可以用 div 標簽和 span 標簽。可以增加 span 的寬度來顯示視頻的進度。

 
  1. <div id="progressBar"> 
  2.     <span id="progress"></span> 
  3. </div> 

當然,你也希望用一些CSS,這樣才能看出span的效果:

 
  1. #progressBar {  
  2.   border:1px solid #aaa; color:#fff;  
  3.   width:295px; height:20px;  
  4. #progress {  
  5.   background-color:#ff0000; 
  6.   // red height:20px;  
  7.   display:inline-block;  

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

 
  1. function updateProgress() { 
  2.     var progress = document.getElementById("progress");  
  3.     var value = 0;  
  4.     if (video.currentTime > 0) {  
  5.         value = Math.floor((100 / video.duration) * video.currentTime);  
  6.     } 
  7.     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 函數:

 
  1. 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 事件來實現同步,如:

 
  1. video.addEventListener('play', function() { 
  2. var playpause = document.getElementById("playpause"); 
  3. playpause.title = "pause"; 
  4. playpause.innerHtml = "pause"; 
  5. }, false); 
  6.  
  7. video.addEventListener('pause', function() { 
  8. var playpause = document.getElementById("playpause"); 
  9. playpause.title = "play"; 
  10. playpause.innerHtml = "play"; 
  11. }, false); 

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

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

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

添加播放列表

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

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

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

 
  1. function playlistClick(file) { 
  2.     var v = document.createElement("video"); 
  3.     if (v.canPlayType("video/mp4") != "") { 
  4.         changeSource(file + ".mp4"); 
  5.     } 
  6.     else if (v.canPlayType("video/webm") != "") { 
  7.         changeSource(file + ".webm"); 
  8.     } 
  9.     return false; 

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

changeSource() 函數的定義如下:

  1. function changeSource(src) { 
  2.     resetPlayer(); 
  3.     video.src = src; 
  4.     video.load(); 

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

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

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

 
  1. function resetPlayer() { 
  2.     var playpause = document.getElementById("playpause"); 
  3.     playpause.title = "play"; 
  4.     playpause.innerHtml = "play"; 
  5.     if (video.currentTime > 0) video.currentTime = 0; 
  6.     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視頻和音頻創建自定義控制的方法。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved