HTML5 音頻和視頻

2016/08/24 來源：CSDN博客

一、音頻和視頻概述

首先，要理解兩個概念：容器（container）和編解碼器（codec）。

1、視頻容器

音頻文件或視頻文件，都只是一個容器文件。視頻文件包含了音頻軌道、視頻軌道和其它一些元數據。視頻播放時，視頻軌道和音頻軌道是綁定在一起的。元數據包含了視頻封面、標題、子標題、字幕等相關信息。主流視頻容器支持的格式為： .avi .flv .mp4 .mkv .ogg .webm。

2、編解碼器

音頻和視頻編碼/解碼是一組算法，用來對一段特定音頻或視頻進行解碼和編碼，以便音頻和視頻能夠播放。原始的媒體文件體積非常巨大，如果不對其進行編碼，那麼數據量是非常驚人的，在網際網路上傳播則要耗費無法忍受的時間；如果不對其進行解碼，就無法將編碼後的數據重組為原始的媒體數據。主流的音頻編解碼器：ACC、MPEG-3、Ogg Voribs，視頻編解碼器：H.264、VP8、Ogg Theora。

3、瀏覽器支持情況

起初，HTML5 規範本來打算指定編解碼器，但實施起來極為困難。部分廠商已有自己的標準，不願實現標準；一些編解碼器受專利保護，需要支付昂貴費用。最終放棄了統一規範的要求，導致各個瀏覽器實現自己的標準。

👁 Image
...

除了上面三款瀏覽器，還有 Safari5+ 支持 MPEG-4，Oprall 支持 WebM 和 OGG，通過這組數據，只要備好 MP4 和 OGG 格式即可，但對於新的高清標準 WebM，當然是非常必要的，因為 WebM 不但清晰度高，而且免費，不受限制許可的使用源碼和專利權。

二、video 視頻元素

以往的視頻播放，需要藉助 Flash 插件才可以實現。但 Flash 插件的不穩定性經常讓瀏覽器導致崩潰，因此很多瀏覽器或系統廠商開始拋棄它。而取代他的正式 HTML5 的video 元素。

video 屬性名稱	說明
src	視頻資源的URL
width	視頻寬度
height	視頻高度
autoplay	設置後，立刻開始播放視頻
preload	設置後，預先載入視頻
controls	設置後，顯示播放控制項
loop	設置後，反覆播放視頻
muted	設置後，視頻處於靜音狀態
poster	指定視頻數據載入時顯示的圖片

1、嵌入一個 WebM 視頻

解釋：

2、附加一些屬性

<video src="xxx.webm" width="200" height="300" autoplay controls loop muted>

3、預加載設置

解釋：preload 屬性有三個值：none表示播放器什麼都不加載；metadata 表示播放之前只能加載元數據（寬高、第一幀畫面等信息）；auto 表示請求瀏覽器儘快下載整個視頻。

4、使用預覽圖

解釋：poster 屬性表示在視頻的第一幀，做一張預覽圖。

5、兼容多個瀏覽器

三、audio 音頻元素

和 video 元素一樣，audio 元素用於嵌入音頻內容，而音頻元素的屬性和視頻元素的類似。視頻支持度和視頻類似，使用 元素引入多種格式兼容即可。主流的視頻格式有： .mp3 .m4a .ogg .wav。

屬性名稱	說明
src	音頻資源的URL
autoplay	設置後，立刻開始播放
preload	設置後，預先載入音頻
controls	設置後，顯示播放器控制項

1、嵌入一個音頻

2、兼容多個瀏覽器

免責聲明：本文內容來源于CSDN博客，文章觀點不代表壹讀立場，如若侵犯到您的權益，或涉不實謠言，敬請向我們提出檢舉。