HTML5視訊和音頻

音視訊容器

無論是音頻檔案還是視訊檔案，實際上都是一個容器檔案，這一點有點類似于壓縮了一組檔案的ZIP檔案。

我們可以把視訊檔案看作是AVI檔案或者MP4檔案。AVI和MP4僅僅是視訊檔案的格式。視訊檔案格式隻是定義了如何在容器中存儲東西，而不是定義可以存儲什麼類型的資料。

視訊容器（檔案）包含音頻軌道、視訊軌道和其他一些中繼資料（封面，标題，字幕等）。

視訊的容器格式有很多，目前比較重要的有：

1. Flash 通常以 .flv結尾。
2. MPEG-4 通常以 .mp4或則.m4v為擴充名。
3. OGG 通常以 .ogv作為擴充名。
4. Vudio Video Interleave 通常以 .avi結尾。
5. WebM WebM是一種新的容器格式。

音視訊編解碼器

音頻和視訊編解碼器是一組算法，用來對一段特定音頻或者視訊流進行解碼和編碼，以便音頻和視訊能夠正常播放。原始的媒體檔案體積非常大，如果不對其進行編碼，那麼構成一段音頻和視訊的資料會非常龐大，以至于在網絡上傳輸耗費時間過長。編解碼器可以讀懂特定的容器格式，并能對其中的音頻軌道和視訊軌道進行解碼。解碼的過程就是把編碼過的資料重組為原始的媒體資料。

1. HTML5中使用最多的音頻編解碼器：AAC、MPEG-3、Ogg Vorbis
2. HTML5中使用最多的視訊編解碼器：H.264（H265）、VP8、Ogg Theora

使用标簽

audio

    <audio></audio>

     音頻标簽      

     使用controls=""将控件展示出來

video 

     <video></video>

     視訊标簽      

     使用controls=""将控件展示出來

source

     <source src=”sr1”></srouce>

     使用source标簽可以設定多個源     

使用video元素播放視訊

在HTML4版本之前，大多數視訊是通過插件來顯示的（比如flash插件），然而并不是所有的浏覽器都裝有相同的插件。解決了HTML4版本之前必須使用第三方插件顯示視訊的問題，HTML5提出了一種通過video元素來引入視訊的标準方法。

<video>标簽的屬性有很多，常見的屬性如下：

1. controls  ：顯示或隐藏使用者控制界面
2. autoplay  ：媒體是否自動播放
3. loop     ：媒體是否循環播放
4. width/height：設定播放器的寬和高，隻能使用絕對值，比320px。
5. poster：用于指定一張圖檔，在目前視訊資料無效時顯示。視訊資料無效可能是視訊正在加載，也可能是視訊位址錯誤等。
6. muted：布爾屬性，用來訓示是否靜音，預設值為false，表示視訊播放時，音頻也會播放。
7. preload：none，不預先加載資料；metedata，預先加載媒體檔案基本資訊（時長，大小）；auto，由浏覽器自動加載合适的資料（中繼資料和視訊資料）。

video元素的屬性和方法：

1. controls: true 是否顯式控件
2. loop: true 是否循環播放
3. currentTime  : 目前的播放進度（已經播放多長時間）目前播放的時間點
4. duration  :  （隻讀）媒體總播放時長
5. volume  :   音量相對值，範圍是0.0-1.0
6. muted  :   訓示媒體是否處于靜音狀态，false，沒有靜音，true，靜音
7. paused  :   （隻讀）訓示媒體是否處于暫停狀态，true表示處于暫停狀态。
8. ended   :   （隻讀）訓示媒體是否播放完畢，false表示沒有播放完畢。
9. error   :  （隻讀）媒體發生錯誤的時候，傳回錯誤代碼
10. currentSrc  :   （隻讀）以字元串的形式傳回媒體位址
11. videoWidth/videoHeight：（隻讀）視訊的實際尺寸
12. play()  :  媒體播放
13. pause()  :  媒體暫停
14. load()  :  重新加載媒體檔案

不同的浏覽器使用的編解碼器可能也不同，如果想要在更多的浏覽器上都能正常地播放視訊，那麼就需要為video元素提供至少兩種不同的視訊檔案，這時就用到了一種新的元素：<source>元素。

<source>元素可以用來連結不同的媒體檔案，例如音頻和視訊。常用的屬性如下：

1. src 提供媒體源的URL位址。
2. type 包含媒體源的播放類型，通常用在視訊格式中。

Video元素允許有多個source元素，浏覽器将選擇第一個可識别的檔案位址，如果不能正常播放，換下一個。一旦找到後，就播放該檔案并忽略其他檔案。具體代碼如下：

<video autoplay="true" controls="true" loop="true" width="320" height="240" poster="img/b.jpg">

  <source src="res/Intermission-Walk-in_512kb.mp4" type="video/mp4">

  <source src="res/Intermission-Walk-in.ogv" type="video/ogv">

</video>

使用audio元素播放音頻

Audio元素能夠用來播放聲音檔案或者音頻流。Audio元素的屬性和video元素相比少了三個屬性，這三個屬性分别是width、height、poster。除了這三個屬性之外，其他的都跟video元素的屬性一樣。