首先，我們要理解兩個(gè)概念：容器（container）和編解碼器(codec)。
1.視頻容器
音頻文件或視頻文件，都只是一個(gè)容器文件。視頻文件包含了音頻軌道、視頻軌道和其他一些元數(shù)據(jù)。視頻播放時(shí)，音頻軌道和視頻軌道是綁定在一起的。元數(shù)據(jù)包含了視頻的封面、標(biāo)題、子標(biāo)題、字幕等相關(guān)信息。主流視頻容器支持的格式為：.avi、.flv、.mp4、.mkv、.ogg、.webm。
2.編解碼器
音頻和視頻編碼/解碼是一組算法，用來對(duì)一段特定音頻或視頻進(jìn)行解碼和編碼，以便音頻和視頻能夠播放。原始的媒體文件體積非常巨大，如果不對(duì)其進(jìn)行編碼，那么數(shù)據(jù)量是非常驚人的，在互聯(lián)網(wǎng)上傳播則要耗費(fèi)無法忍受的時(shí)間；如果不對(duì)其進(jìn)行解碼，就無法將編碼后的數(shù)據(jù)重組為原始的媒體數(shù)據(jù)。主流的音頻編解碼器：AAC、MPEG-3、Ogg Voribs，
視頻編解碼器：H.264、VP8、Ogg Theora。
3.瀏覽器支持情況
起初，HTML5 規(guī)范本來打算指定編解碼器，但實(shí)施起來極為困難。部分廠商已有自己的標(biāo)準(zhǔn)，不愿實(shí)現(xiàn)標(biāo)準(zhǔn)；而有一些編解碼器受專利保護(hù)，需要支付昂貴費(fèi)用。最終放棄了統(tǒng)一規(guī)范的要求，導(dǎo)致各個(gè)瀏覽器實(shí)現(xiàn)自己的標(biāo)準(zhǔn)。
除了上面三款瀏覽器，還有Safari5+支持MPEG-4,Opera11 支持WebM 和OGG，通過這組數(shù)據(jù)，只要備好MP4 和OGG 格式的即可，但對(duì)于新的高清標(biāo)準(zhǔn)WebM，當(dāng)然是非常必要的。因?yàn)閃ebM 不但清晰度高，而且免費(fèi)，不受限制許可的使用源碼和專利權(quán)。
目前Chrome 瀏覽器，為了推廣WebM 格式的視頻。聲稱未來將放棄H.264 編碼的視頻，所以有可能在以后的版本中無法播放MP4 的視頻。當(dāng)然，目前演示的版本還是支持的。
video 視頻元素
以往的視頻播放，需要借助Flash 插件才可以實(shí)現(xiàn)。但Flash 插件的不穩(wěn)定性經(jīng)常讓瀏覽器導(dǎo)致崩潰，因此很多瀏覽器或系統(tǒng)廠商開始拋棄它。而取代它的正是HTML5 的video元素。
<video>元素的屬性
src 視頻資源的URL
width 視頻寬度
height 視頻高度
autoplay 設(shè)置后，表示立刻開始播放視頻
preload 設(shè)置后，表示預(yù)先載入視頻
controls 設(shè)置后，表示顯示播放控件
loop 設(shè)置后，表示反復(fù)播放視頻
muted 設(shè)置后，表示視頻處于靜音狀態(tài)
poster 指定視頻數(shù)據(jù)載入時(shí)顯示的圖片
1.嵌入一個(gè)WebM 視頻
<video src="test.webm" width="800" height="600"></video>
解釋：<video>插入一個(gè)視頻，主流的視頻為.webm，.mp4，.ogg 等。src 表示資源URL；width 表示寬度；height 表示高度。
2.附加一些屬性
<video src="test.webm" width="800" height="600" autoplay controls loop muted></video>
解釋：autoplay 表示自動(dòng)開始播放；controls 表示顯示播放控件；loop 表示循環(huán)播放；muted 表示靜音。
3.預(yù)加載設(shè)置
<video src="http://li.cc/test.webm" width="800" height="600" controls preload="none"></video>
解釋：preload 屬性有三個(gè)值：none 表示播放器什么都不加載；metadata 表示播放之前只能加載元數(shù)據(jù)（寬高、第一幀畫面等信息）；auto 表示請(qǐng)求瀏覽器盡快下載整個(gè)視頻。
4.使用預(yù)覽圖
<video src="http://li.cc/test.webm" width="800" height="600" controls poster="img.png"></video>
解釋：poster 屬性表示在視頻的第一幀，做一張預(yù)覽圖。
5.兼容多個(gè)瀏覽器
<video width="800" height="600" controls poster="img.png">
<source src="test.webm">
<source src="test.mp4">
<source src="test.ogg">
<object>這里引入flash 播放器實(shí)現(xiàn)IE9 以下，但沒必要了
</object>
</video>
解釋：通過<source>元素引入多種格式的視頻，讓更多的瀏覽器保持兼容。
audio 音頻元素
和video 元素一樣，audio 元素用于嵌入音頻內(nèi)容，而音頻元素的屬性和視頻元素類似。音頻的支持度和視頻類似，使用<source>元素引入多種格式兼容即可。主流的音頻格式有：.mp3，.m4a，.ogg，.wav。
src 視頻資源的URL
autoplay 設(shè)置后，表示立刻開始播放視頻
preload 設(shè)置后，表示預(yù)先載入視頻
controls 設(shè)置后，表示顯示播放控件
1.嵌入一個(gè)音頻
<audio src="test.mp3" controls autoplay></audio>
解釋：和嵌入視頻一個(gè)道理。
2.兼容多個(gè)瀏覽器
<audio controls>
<source src="test.mp3">
<source src="test.m4a">
<source src="test.wav">
</audio>
