12、HTML5視頻與音頻

@(HTML5)[HTML5視頻與音頻]

[TOC]

12、HTML5視頻與音頻

簡單介紹 HTML5 對視頻和音頻特性規範文檔的制定是被討論最多的。除瀏覽器自帶支持的明顯好處外，評論點集中在瀏覽器提供商對音頻/視頻格式 的不一樣選擇。若是你準備使用HTML5的

音頻: ogg (ogg, oga), mp3, wav, AAC 視頻: ogg (ogv), H.264 (mp4)

另外你還須要留意一下 Google 的 VP8 視頻解碼，這個將被做爲一個開源格式來結束（格式選擇的）紛爭。HTML5 提供的一個解決方案是 ，讓你能夠指定多個不一樣格式的源文件，以便於用戶瀏覽器選擇它認識的文件。對於 < IE9 和舊瀏覽器，你將須要一個折衷的解決方案。

當你第一次嘗試 HTML5 的音頻/視頻，你可能會想知道這些可能對你有幫助的東東：

你的服務器必須支持你打算提供的音頻/視頻的 MIME 格式。你將須要檢查一下其在本地服務器上是否被支持。

若是你使用 Safari 來檢測 HTML5 的音頻/視頻支持，須要安裝 QuickTime Player，沒有QuickTime Player 的 Safari 什麼都不能播放。

音頻 - audio

關於音頻的格式

ogg

Ogg全稱應該是OGGVobis(oggVorbis)是一種新的音頻壓縮格式，相似於MP3等的音樂格式。Ogg是徹底免費、開放和沒 有專利限制的。OggVorbis文件的擴展名是.OGG。Ogg文件格式能夠不斷地進行大小和音質的改良，而不影響舊有的編碼器或播放器。

mp3

MP3是一種音頻壓縮技術，其全稱是 動態影像專家壓縮標準音頻層面3（Moving Picture Experts Group Audio Layer III），簡稱爲MP3。 它被設計用來大幅度地下降音頻數據量。利用 MPEG Audio Layer 3 的技術，將音樂以1:10 甚至 1:12 的壓縮率，壓縮成容量較小的文件，而 對於大多數用戶來講重放的音質與最初的不壓縮音頻相比沒有明顯的降低。它是在1991年由位於德國埃爾朗根的研究組織Fraunhofer-Gesellschaft 的一組工程師發明和標準化的。用MP3形式存儲的音樂就叫做MP3音樂，能播放MP3音樂的機器就叫做MP3播放器。

wav

WAV爲微軟公司(Microsoft)開發的一種聲音文件格式，它符合RIFF(Resource Interchange File Format)文件規範，用於保存Windows平臺的音 頻信息資源，被Windows平臺及其應用程序所普遍支持，該格式也支持MSADPCM，CCITT A LAW等多種壓縮運算法，支持多種音頻數字，取樣頻率和 聲道，標準格式化的WAV文件和CD格式同樣，也是44.1K的取樣頻率，16位量化數字，所以在聲音文件質量和CD相差無幾！ WAV打開工具是WINDOWS 的媒體播放器。

acc

AAC（Advanced Audio Coding），中文稱爲「高級音頻編碼」，出現於1997年，基於 MPEG-2的音頻編碼技術。由Fraunhofer IIS、杜比實驗室 、AT&T、Sony（索尼）等公司共同開發，目的是取代MP3格式。2000年，MPEG-4標準出現後，AAC 從新集成了其特性，加入了SBR技術和PS技術， 爲了區別於傳統的 MPEG-2 AAC 又稱爲 MPEG-4 AAC。

使用

<audio controls autoplay loop src="audio/after the afterparty.mp3">
		<!-- <source src="audio/after the afterparty.mp3" type=""> -->
</audio>
複製代碼

屬性

HTML5 Audio/Video 方法

addTextTrack()：向音頻/視頻添加新的文本軌道 canPlayType()：檢測瀏覽器是否能播放指定的音頻/視頻類型 load()：從新加載音頻/視頻元素 play()：開始播放音頻/視頻 pause()：暫停當前播放的音頻/視頻

HTML5 Audio/Video 屬性

audioTracks：返回表示可用音軌的 AudioTrackList 對象 autoplay：設置或返回是否在加載完成後隨即播放音頻/視頻 buffered：返回表示音頻/視頻已緩衝部分的 TimeRanges 對象 controller：返回表示音頻/視頻當前媒體控制器的 MediaController 對象controls：設置或返回音頻/視頻是否顯示控件（好比播放/暫停等）crossOrigin：設置或返回音頻/視頻的 CORS 設置 currentSrc：返回當前音頻/視頻的 URLcurrentTime：設置或返回音頻/視頻中的當前播放位置（以秒計）defaultMuted：設置或返回音頻/視頻默認是否靜音 defaultPlaybackRate：設置或返回音頻/視頻的默認播放速度duration：返回當前音頻/視頻的長度（以秒計）ended：返回音頻/視頻的播放是否已結束 error：返回表示音頻/視頻錯誤狀態的 MediaError 對象loop：設置或返回音頻/視頻是否應在結束時從新播放mediaGroup：設置或返回音頻/視頻所屬的組合（用於鏈接多個音頻/視頻元素）muted：設置或返回音頻/視頻是否靜音networkState：返回音頻/視頻的當前網絡狀態paused：設置或返回音頻/視頻是否暫停playbackRate：設置或返回音頻/視頻播放的速度played：返回表示音頻/視頻已播放部分的 TimeRanges 對象 preload：設置或返回音頻/視頻是否應該在頁面加載後進行加載 readyState：返回音頻/視頻當前的就緒狀態 seekable：返回表示音頻/視頻可尋址部分的 TimeRanges 對象 seeking：返回用戶是否正在音頻/視頻中進行查找src：設置或返回音頻/視頻元素的當前來源startDate：返回表示當前時間偏移的 Date 對象 textTracks：返回表示可用文本軌道的 TextTrackList 對象 videoTracks：返回表示可用視頻軌道的 VideoTrackList 對象volume：設置或返回音頻/視頻的音量`

HTML5 Audio/Video 事件

abort：當音頻/視頻的加載已放棄時 canplay：當瀏覽器能夠播放音頻/視頻時 canplaythrough：當瀏覽器可在不因緩衝而停頓的狀況下進行播放時 durationchange：當音頻/視頻的時長已更改時 emptied：當目前的播放列表爲空時 ended：當目前的播放列表已結束時 error：當在音頻/視頻加載期間發生錯誤時 loadeddata：當瀏覽器已加載音頻/視頻的當前幀時 loadedmetadata：當瀏覽器已加載音頻/視頻的元數據時 loadstart：當瀏覽器開始查找音頻/視頻時 pause：當音頻/視頻已暫停時 play：當音頻/視頻已開始或再也不暫停時 playing：當音頻/視頻在已因緩衝而暫停或中止後已就緒時 progress：當瀏覽器正在下載音頻/視頻時 ratechange：當音頻/視頻的播放速度已更改時 seeked：當用戶已移動/跳躍到音頻/視頻中的新位置時 seeking：當用戶開始移動/跳躍到音頻/視頻中的新位置時 stalled：當瀏覽器嘗試獲取媒體數據，但數據不可用時 suspend：當瀏覽器刻意不獲取媒體數據時 timeupdate：當目前的播放位置已更改時 volumechange：當音量已更改時 waiting：當視頻因爲須要緩衝下一幀而中止

注意：爲了兼容性。通常使用source標籤加載多個音頻

利用AudioContext繪製