js基礎-Video/Audio

多媒體（video和audio）

一、音頻（audio）和視訊（video）

在HTML5中引入了

<audio>

和

<video>

元素，用來在HTML文檔中嵌入音頻和視訊：

<audio src="m.mp3"/> 

<video src="m.mp4" width=320 height=400 /> 

           

由于不同的浏覽器對标準音頻和視訊的編解碼支援上并不一緻，是以通常需要使用

<source>

元素來為指定不同格式的媒體源：

<audio id="music"> 

  <source src="m.mp3" type="audio/mpeg"> 

  <source src="m.ogg" type="audio/ogg;codec='vorbis'"> 

</audio> 

           

<source>

元素沒有任何内容：沒有閉合的

</source>

标簽，也需要使用“/>”來結束它們。

我們可以在

<audio>

和

</audio>

（或

<video>

和

</video>

）标簽之間插入文本内容，如果浏覽器支援

<audio>

和

<video>

元素，将不會渲染文本内容；而如果浏覽器不支援時，則會将它們渲染出來。

<audio id="music"> 

  <source src="m.mp3" type="audio/mpeg"> 

  <source src="m.ogg" type="audio/ogg;codec='vorbis'"> 

  您的浏覽器不支援audio标簽。 

</audio> 

           

1.1 HTML中媒體的屬性

（1）視訊（

<video>

）

autoplay    autoplay    如果出現該屬性，則視訊在就緒後馬上播放。 

controls    controls    如果出現該屬性，則向使用者顯示控件，比如播放按鈕。 

height      pixels      設定視訊播放器的高度。 

width       pixels      設定視訊播放器的寬度。 

loop        loop        如果出現該屬性，則循環播放。 

muted       muted       如果出現該屬性，視訊的音頻輸出為靜音。 

poster      URL         規定視訊正在下載下傳時顯示的圖像，直到使用者點選播放按鈕。 preload     auto/metadata/none   如果出現該屬性，則視訊在頁面加載時進行加載，并預備播放。如果使用 "autoplay"，則忽略該屬性。 

src         URL         要播放的視訊的 URL。 

           

（2）音頻（

<audio>

）

autoplay    autoplay    如果出現該屬性，則視訊在就緒後馬上播放。 

controls    controls    如果出現該屬性，則向使用者顯示控件，比如播放按鈕。 

loop        loop        如果出現該屬性，則當媒介檔案完成播放後再次開始播放。 

muted       muted       如果出現該屬性，視訊的音頻輸出為靜音。 

preload     auto/metadata/none    如果出現該屬性，則視訊在頁面加載時進行加載，并預備播放。如果使用 "autoplay"，則忽略該屬性。 

src         URL         要播放的視訊的 URL。 

           

1.2 用JavaScript操作音頻和視訊

audio可以通過new建立Audio對象

還可以通過标簽擷取

<audio>

或

<video>

元素，即獲得HTMLVideoElement和HTMLAudioElement對象：

檢測浏覽器是否支援

（1）屬性

隻讀屬性：

duration   整個媒體檔案的播放時長，以秒為機關。如果無法擷取時長，則傳回NaN 

paused     如果媒體檔案目前被暫停，則傳回true。如果還未開始播放，預設傳回true 

ended      如果媒體檔案已經播放完畢，則傳回true 

startTime  傳回最早的播放起始時間，一般是0.0，除非是緩沖過的媒體檔案，并且一部分内容已經不在緩沖區 

error      在發生了錯誤的情況下傳回的錯誤代碼 

currentSrc 以字元串形式傳回目前正在播放或已加載的檔案。對應于浏覽器在source元素中選擇的檔案 

seeking    如果播放器正在跳到一個新的播放點，那seeking的值為true。 

initialTime  指定了媒體的開始時間，機關為秒 

           

可讀寫屬性：

autoplay     将媒體檔案設定為建立後自動播放，或者查詢是否已設定為autoplay 

loop         傳回是否循環播放，或設定循環播放（或者不循環播放） 

currentTime  指定了播放器應該跳過播放的時間（機關為秒）。在播放過程中，可設定currentTime屬性來進行定點播放。 

controls     顯示或隐藏使用者控制界面，或者查詢使用者控制界面目前是否可見 

volume       在到之間設定音頻音量的相對值，或者查詢目前音量相對值 

muted        布爾值，設定靜音或者消除靜音，或者檢測目前是否為靜音 

autobuffer   通知播放器在媒體檔案開始播放前，是否驚醒緩沖加載。如果已設定為autoplay，則忽略此特性 

playbackRate  用于指定媒體播放的速度。表示正常速度，大于則表示“快進”，~之間表示“慢放”，負值表示回放。 

           

三個特殊屬性：

played 傳回已經播放的時間段 

buffered 傳回目前已經緩沖的時間段 

seekable 傳回目前播放器需要跳到的時間段 

played、buffered和seekable都是TimeRanges對象，每個對象都有一個length屬性以及start(index)和end(index)方法，前者表示目前一個時間段，後者分别傳回目前時間段的起始時間點和結束時間點（機關為秒）。 

           

還有另外三個屬性：

readyState、networkState和error，它們包含

<audio>

和

<video>

元素的一些狀态細節。每個屬性都是數字類型的，而且為每個有效值都定義了對應的常量。

readyStete屬性

readyState

屬性指定目前已經加載了多少媒體内容，隻讀屬性

HAVE_NOTHING（數字值為）：沒有擷取到媒體的任何資訊，目前播放位置沒有可播放資料。 

HAVE_METADATA（數字值為）：已經擷取到足夠的媒體資料，但是目前播放位置沒有有效的媒體資料（也就是說，擷取到的媒體資料無效，不能播放）。 

HAVE_CURRENT_DATA（數字值為）：目前播放位置已經有資料可以播放，但沒有獲緻到可以讓播放器前進的資料。當媒體為視訊時，意思是目前帖的資料已擷取，但沒有擷取到下一幀的資料，或者目前幀已經是播放的最重一幀。 

HAVE_FUTURE_DATA（數字值為）：目前播放位置已經有資料可以播放，而且也擷取到了可以讓播放器前進的資料。當媒體為視訊時，意思是目前幀的資料已擷取，而且也擷取到了下刺目販資料，目前幀是播放的最後一幀時，readyState屬性不可能為HAVE_FUTURE_DTAT。  HAVE_ENOUGH)DATA（數字值為）：目前播放位置已經有資料可以播放，同時也擷取到了可以讓播放器前進的資料，而且浏覽器确認媒體以某一種速度進行加載，可以保證有足夠的後續資料進行播放。 

           

networkState屬性

networkState屬性讀取目前的網絡狀态，共有如下所示的4個可能值：

• NETWORK_EMPTY（數字值為0）：元素牌初始狀态。
• NETWORK_IDLE（數字值為1）：浏覽器已選擇好用什麼編碼格式來播放媒體，但尚未建立網絡連接配接。
• NETWORK_LOADING（數字值為2）：媒體資料加載中。
• NETWORK_NO_SOURCE（數字值為3）：沒有支援的編碼格式，不執行加載。

error屬性

當在加載媒體或者播放媒體過程中發生錯誤時，浏覽器就會設定 或 元素的error屬性。在沒有錯誤發生時，error屬性值為null。反之，error的屬性是一個對象，包含了描述錯誤的數值code屬性，error.code可能的值：

• MEDIA_ERR_ABORTED(數字值為1）：媒體資料的下載下傳過程由于使用者的操作原因而被中止。
• MEDIA_ERR_NETWORK(數字值為2）：确認媒體資源可用，但是在下載下傳時出現網絡錯誤，媒體資料下載下傳過程被中止。
• MEDIA_ERR_DECODE(數字值為3)：确認媒體資源可能，但是解碼時發生錯誤。
• MEDIA_ERR_SRC_NOT_SUPPORTED（數字值為4）：媒體格式不被支援。

video的額外屬性：

poster 在視訊加載完成之前，代表視訊内容的圖檔的URL位址。該特性可讀可修改 

width、height  讀取或設定顯示尺寸。如果大小不比對視訊本身，會導緻邊緣出現黑色條狀區域 

videoWidth、videoHeight  傳回視訊的固有或自使用寬度和高度。隻讀 

           

（2）方法

canPlayType(type)

方法将媒體的MIME類型作為參數，用來測試浏覽器是否支援指定的媒體類型。如果它不能播放該類型的媒體檔案，将傳回一個空的字元串；反之，它會傳回一個字元串：“maybe”或“probably”。

var a = new Audio(); 

if(a.canPlayType('audio/wav')){ 

  a.src = 'm.wav'; 

  a.play(); 

} 

           

其他方法：

• play() 控制媒體開始播放
• pause() 暫停媒體播放
• load() 重新加載src指定的資源

（3）事件

audio元素和video元素加載音頻和視訊時，以下事件按次序發生。

loadstart：開始加載音頻和視訊。 

durationchange：音頻和視訊的duration屬性（時長）發生變化時觸發，即已經知道媒體檔案的長度。如果沒有指定音頻和視訊檔案，duration屬性等于NaN。如果播放流媒體檔案，沒有明确的結束時間，duration屬性等于Inf（Infinity）。 

loadedmetadata：媒體檔案的中繼資料加載完畢時觸發，中繼資料包括duration（時長）、dimensions（大小，視訊獨有）和文字軌。 

loadeddata：媒體檔案的第一幀加載完畢時觸發，此時整個檔案還沒有加載完。 

progress：浏覽器正在下載下傳媒體檔案，周期性觸發。下載下傳資訊儲存在元素的buffered屬性中。 

canplay：浏覽器準備好播放，即使隻有幾幀，readyState屬性變為CAN_PLAY。 

canplaythrough：浏覽器認為可以不緩沖（buffering）播放時觸發，即目前下載下傳速度保持不低于播放速度，readyState屬性變為CAN_PLAY_THROUGH。 

           

除了上面這些事件，audio元素和video元素還支援以下事件。

abort    播放中斷 

emptied 媒體檔案加載後又被清空，比如加載後又調用load方法重新加載。 

ended   播放結束 

error    發生錯誤。該元素的error屬性包含更多資訊。 

pause   播放暫停 

play    暫停後重新開始播放 

playing 開始播放，包括第一次播放、暫停後播放、結束後重新播放。 

ratechange  播放速率改變 

seeked  搜尋操作結束 

seeking 搜尋操作開始 

stalled 浏覽器開始嘗試讀取媒體檔案，但是沒有如預期那樣擷取資料 

suspend 加載檔案停止，有可能是播放結束，也有可能是其他原因的暫停 

timeupdate  網頁元素的currentTime屬性改變時觸發。 

volumechange    音量改變時觸發（包括靜音）。 

waiting 由于另一個操作（比如搜尋）還沒有結束，導緻目前操作（比如播放）不得不等待。