# 第 9 章 音頻和視頻 學習要點： 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?元素。 | **屬性名稱** | **說明** | | --- | --- | | src | 視頻資源的 URL | | width | 視頻寬度 | | height | 視頻高度 | | autoplay | 設置后，表示立刻開始播放視頻 | | preload | 設置后，表示預先載入視頻 | | controls | 設置后，表示顯示播放控件 | | loop | 設置后，表示反復播放視頻 | | muted | 設置后，表示視頻處于靜音狀態 | | poster | 指定視頻數據載入時顯示的圖片 | **1.****嵌入一個****?WebM** **視頻** ``` <video src="test.webm" width="800" height="600"></video> ``` 解釋：&lt;video&gt;插入一個視頻，主流的視頻為.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> ``` 解釋：通過&lt;source&gt;元素引入多種格式的視頻，讓更多的瀏覽器保持兼容。 **二．****audio****?音頻元素** 和 video?元素一樣，audio?元素用于嵌入音頻內容，而音頻元素的屬性和視頻元素類似。音頻的支持度和視頻類似，使用&lt;source&gt;元素引入多種格式兼容即可。主流的音頻格式有：.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 基礎后講解。