首先，我們要理解兩個概念：容器（container）和編解碼器(codec)。
1.視頻容器
音頻文件或視頻文件，都只是一個容器文件。視頻文件包含了音頻軌道、視頻軌道和其他一些元數據。視頻播放時，音頻軌道和視頻軌道是綁定在一起的。元數據包含了視頻的封面、標題、子標題、字幕等相關信息。主流視頻容器支持的格式為：.avi、.flv、.mp4、.mkv、.ogg、.webm。
2.編解碼器
音頻和視頻編碼/解碼是一組算法，用來對一段特定音頻或視頻進行解碼和編碼，以便音頻和視頻能夠播放。原始的媒體文件體積非常巨大，如果不對其進行編碼，那么數據量是非常驚人的，在互聯網上傳播則要耗費無法忍受的時間；如果不對其進行解碼，就無法將編碼后的數據重組為原始的媒體數據。主流的音頻編解碼器：AAC、MPEG-3、Ogg Voribs，
視頻編解碼器：H.264、VP8、Ogg Theora。
3.瀏覽器支持情況
起初，HTML5 規范本來打算指定編解碼器，但實施起來極為困難。部分廠商已有自己的標準，不愿實現標準；而有一些編解碼器受專利保護，需要支付昂貴費用。最終放棄了統一規范的要求，導致各個瀏覽器實現自己的標準。

除了上面三款瀏覽器，還有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>