av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

HTML5多媒體組件（自定義控件使用）

必備知識：熟悉 HTML 和 JavaScript。

用戶級別：中級

范例文件：custom-controls.zip (15.1 MB)

這是關于HTML5的系列教程的第三部分（共3部分）。在HTML 5多媒體組件（視頻的使用）和HTML 5多媒體組件（音頻的使用），講到了 video 和 audio 元素，簡短的展示了如何給這些元素添加 controls 屬性，以此來給瀏覽器的媒體（media）元素設置默認值。如果已試過，那應該注意到了各個瀏覽器的默認外觀并不一樣。

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

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

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

開始

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

     
 
 
    
      
  
  
  1.   
    2.       
  
  
  2.  
    3.       
  
  
  3.   
    4.       
  
  
  4.  
    5.

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

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

     
 
 
    
      
  
  
  1.  
    2.

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

添加播放和暫停功能

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

     
 
 
    
      
  
  
  1.  
    2.       
  
  
  2. Play 
    3.
 

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

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

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

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

     
 
 
    
      
  
  
  1. Play 
    2.

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

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

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

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

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

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

添加音量控制和靜音按鈕

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

要添加音量控制，你只需要使用HTML5的新的標簽類型range：。這一個input的類型會被瀏覽器渲染為一個滑動條，用戶可以 左右滑動，你可以通過 min 和 max 屬性來指定最小值和最大值，然后用 step 屬性來設置每動一下的滑動大小?？梢杂孟旅娴拇a來創(chuàng)建一個范圍為0到1的， 步進大小為0.1的滑動條：

     
 
 
    
      
  
  
  1.  
    2.

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

     
 
 
    
      
  
  
  1.  
    2.

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

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

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

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

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

     
 
 
    
      
  
  
  1. Mute 
    2.

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

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

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

添加播放進度條

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

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

     
 
 
    
      
  
  
  1.  
    2.       
  
  
  2.      
    3.
 

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

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

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

     
 
 
    
      
  
  
  1. function updateProgress() { 
    2.       
  
  
  2.     var progress = document.getElementById("progress");  
    3.       
  
  
  3.     var value = 0;  
    4.       
  
  
  4.     if (video.currentTime > 0) {  
    5.       
  
  
  5.         value = Math.floor((100 / video.duration) * video.currentTime);  
    6.       
  
  
  6.     } 
    7.       
  
  
  7.     progress.style.width = value + "%"; 
    8.       
  
  
  8. } 
    9.

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

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

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

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

     
 
 
    
      
  
  
  1. video.addEventListener("timeupdate", updateProgress, false); 
    2.

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

監(jiān)聽事件

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

Table 1. 媒體元素 API 事件

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

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

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

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

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

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

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

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

添加播放列表

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

     
 
 
    
      
  
  
  1.  
    2.       
  
  
  2.   
  3. Grass blowing in the wind
    4.        
  
  
  4.   
  5. Trees blowing in the wind
    6.        
  
  
  6.  
    7.

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

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

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

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

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

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

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

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

     
 
 
    
      
  
  
  1. function resetPlayer() { 
    2.       
  
  
  2.     var playpause = document.getElementById("playpause"); 
    3.       
  
  
  3.     playpause.title = "play"; 
    4.       
  
  
  4.     playpause.innerHTML = "play"; 
    5.       
  
  
  5.     if (video.currentTime > 0) video.currentTime = 0; 
    6.       
  
  
  6.     updateProgress(); 
    7.       
  
  
  7. } 
    8.

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

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

責任編輯：張偉
來源： HTML5China HTML5


本文名稱：HTML5多媒體組件（自定義控件使用）
新聞來源：http://uogjgqi.cn/article/djccspe.html
掃二維碼與項目經(jīng)理溝通

我們在微信上24小時期待你的聲音

解答本文疑問/技術咨詢/運營咨詢/技術建議/互聯(lián)網(wǎng)交流