學習要點：
1.音訊和視訊概述
2.video 視訊元素
3.audio 音訊元素
主講教師：李炎恢
本章主要探討 HTML5 中音訊和視訊元素，通過這兩個原生的媒體元素向 HTML 頁面中嵌入音訊和視訊。
一．音訊和視訊概述
首先，我們要理解兩個概念：容器（container）和編解碼器(codec)。
1.視訊容器
音訊檔案或視訊檔案，都只是一個容器檔案。視訊檔案包含了音訊軌道、視訊軌道和其他一些後設資料。視訊播放時，音訊軌道和視訊軌道是繫結在一起的。後設資料包含了視訊的封面、標題、子標題、字幕等相關資訊。主流視訊容器支援的格式為：.avi、.flv、.mp4、.mkv、.ogg、.webm。
2.編解碼器
音訊和視訊編碼/解碼是一組演算法，用來對一段特定音訊或視訊進行解碼和編碼，以便音訊和視訊能夠播放。原始的媒體檔案體積非常巨大，如果不對其進行編碼，那麼資料量是非常驚人的，在網際網路上傳播則要耗費無法忍受的時間；如果不對其進行解碼，就無法將編碼後的資料重組為原始的媒體資料。主流的音訊編解碼器：AAC、MPEG-3、Ogg Voribs，視訊編解碼器：H.264、VP8、Ogg Theora。
3.瀏覽器支援情況
起初，HTML5 規範本來打算指定編解碼器，但實施起來極為困難。部分廠商已有自己的標準，不願實現標準；而有一些編解碼器受專利保護，需要支付昂貴費用。最終放棄了統一規範的要求，導致各個瀏覽器實現自己的標準。
|
容器格式 |
視訊編解碼 |
音訊編解碼 |
IE9+ |
Firefox5+ |
Chrome13+ |
|
WebM |
VP8 |
Vorbis |
× |
√ |
√ |
|
OGG |
Theora |
Vorbis |
× |
√ |
√ |
|
MPEG-4 |
H.264 |
AAC |
√ |
× |
疑問？ |
除了上面三款瀏覽器，還有 Safari5+支援 MPEG-4,Opera11 支援 WebM 和 OGG，通過這組資料，只要備好 MP4 和 OGG 格式的即可，但對於新的高清標準 WebM，當然是非常必要的。因為 WebM 不但清晰度高，而且免費，不受限制許可的使用原始碼和專利權。
目前 Chrome 瀏覽器，為了推廣 WebM 格式的視訊。聲稱未來將放棄 H.264 編碼的視訊，所以有可能在以後的版本中無法播放 MP4 的視訊。當然，目前演示的版本還是支援的。
二．video 視訊元素
以往的視訊播放，需要藉助 Flash 外掛才可以實現。但 Flash 外掛的不穩定性經常讓瀏覽器導致崩潰，因此很多瀏覽器或系統廠商開始拋棄它。而取代它的正是 HTML5 的 video 元素。
|
|
<video>元素的屬性 |
|
屬性名稱 |
說明 |
|
src |
視訊資源的 URL |
|
width |
視訊寬度 |
|
height |
視訊高度 |
|
autoplay |
設定後，表示立刻開始播放視訊 |
|
preload |
設定後，表示預先載入視訊 |
|
controls |
設定後，表示顯示播放控制元件 |
|
loop |
設定後，表示反覆播放視訊 |
|
muted |
設定後，表示視訊處於靜音狀態 |
|
poster |
指定視訊資料載入時顯示的圖片 |
1.嵌入一個 WebM 視訊
<video src="test.webm" width="800" height="600"></video>
解釋：<video>插入一個視訊，主流的視訊為.webm，.mp4，.ogg 等。src 表示資源
URL；width 表示寬度；height 表示高度。
2.附加一些屬性
<video src="test.webm" width="800" height="600" autoplay controls loop muted></video>
解釋：autoplay 表示自動開始播放；controls 表示顯示播放控制元件；loop 表示迴圈播放；muted 表示靜音。
3.預載入設定
<video src="http://li.cc/test.webm" width="800" height="600" controls preload="none"></video>
解釋：preload 屬性有三個值：none 表示播放器什麼都不載入；metadata 表示播放之前只能載入後設資料（寬高、第一幀畫面等資訊）；auto 表示請求瀏覽器儘快下載整個視訊。
4.使用預覽圖
<video src="http://li.cc/test.webm" width="800" height="600" controls poster="img.png"></video>
解釋：poster 屬性表示在視訊的第一幀，做一張預覽圖。
5.相容多個瀏覽器
<video width="800" height="600" controls poster="img.png"> <source src="test.webm"> <source src="test.mp4"> <source src="test.ogg"> <object>這裡引入 flash 播放器實現 IE9 以下，但沒必要了</object> </video>
解釋：通過<source>元素引入多種格式的視訊，讓更多的瀏覽器保持相容。
二．audio 音訊元素
和 video 元素一樣，audio 元素用於嵌入音訊內容，而音訊元素的屬性和視訊元素類似。音訊的支援度和視訊類似，使用<source>元素引入多種格式相容即可。主流的音訊格式有：.mp3，.m4a，.ogg，.wav。
|
屬性名稱 |
說明 |
|
src |
視訊資源的 URL |
|
autoplay |
設定後，表示立刻開始播放視訊 |
|
preload |
設定後，表示預先載入視訊 |
|
controls |
設定後，表示顯示播放控制元件 |
1.嵌入一個音訊
<audio src="test.mp3" controls autoplay></audio>
解釋：和嵌入視訊一個道理。
2.相容多個瀏覽器
<audio controls> <source src="test.mp3"> <source src="test.m4a"> <source src="test.wav"> </audio>
解釋：略。
PS：更多設計到 API 的 JavaScript 控制，將在以後的基於 JavaScript 基礎後講解。