1.引入
概述
音頻檔案或視訊檔案都可以看做是一個容器檔案（類似于壓縮的zip）
編解碼器就是讀取特定的容器格式，對其中的音頻與視訊軌進行解碼，然後實作播放
解碼器
解碼器（decoder），是一種輸入模拟視訊信号并将它轉換為數字信号格式，以進一步壓縮和傳輸的硬體/軟體裝置
視訊格式
Ogg = 帶有 Theora 視訊編碼和 Vorbis 音頻編碼的 Ogg 檔案
MPEG4 = 帶有 H.264 視訊編碼和 AAC 音頻編碼的 MPEG 4 檔案
WebM = 帶有 VP8 視訊編碼和 Vorbis 音頻編碼的 WebM 檔案
支援狀況
audio的canPlayType可以檢測浏覽器支援的檔案格式
線上檢測（右擊檢視源碼）
http://dnt.dkill.net/DNT/HTML5/demo/check.html
2.video
逆天測試僅供參考
測試浏覽器：谷歌，360，火狐，Edge，IE ：mp4格式的基本上都支援了，wmv格式的基本上都不支援，avi格式的火狐不支援
案例
1.簡單案例：
<video src="images/big.mp4" controls loop>你的浏覽器不支援</video>
<video src="images/big.mp4" poster="http://dnt.dkill.net/Images/banner.jpg" controls loop></video>
說明：
loop循環播放
controls顯示工具欄
<video src="images/big.mp4" controls>你的浏覽器不支援</video>
poster 視訊預覽圖
autoplay自動播放
<video src="images/big.mp4" controls autoplay loop>你的浏覽器不支援</video>
preload是否在頁面加載後載入視訊如果設定了 autoplay 屬性，則忽略該屬性
屬性值：
auto - 當頁面加載後載入整個視訊
meta - 當頁面加載後隻載入中繼資料 (有些是浏覽器是metadata)
none - 當頁面加載後不載入視訊
<video src="images/big.mp4" controls preload="auto">你的浏覽器不支援</video>
2.多源案例
浏覽器自動選擇第一個可識别的檔案來播放
<video controls>
<source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4" />
<source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg"/>
</video>
3.小播放器
<video id="myvideo" src="../images/big.mp4"poster="http://dnt.dkill.net/Images/banner.jpg" controls loop>回家休息休息。。。</video>
<script type="text/javascript">
var musicObj = $("#myvideo");
//單擊控制播放與否
musicObj.click(function () {
if (this.paused) {
this.play();
} else {
this.pause();
}
});
</script>
3.audio
學過video之後這個就小兒科了，簡單介紹一下
基本用法
<audio src="http://dnt.dkill.net/DNT/music/棋子.mp3" controls></audio>
<audio controls>
<source src="http://www.dkill.net/DNT/music/棋子.ogg" type="audio/ogg" />
<source src="http://dnt.dkill.net/DNT/music/棋子.mp3" type="audio/mp3" />
</audio>
4. 擴充内容
大綱
在所有屬性中，隻有 videoWidth 和 videoHeight 屬性是立即可用的。在視訊的中繼資料已加載後，其他屬性才可用。
浏覽器測試
代碼和測試結果看備注（基本上都是滿足的）
屬性
隻讀
ended
傳回true代表播放結束
paused
ture代表暫停播放，false代表正在播放
seeking
傳回使用者是否正在音頻/視訊中進行查找
true代表查找
duration
擷取視訊總時間（機關秒）
currentSrc
傳回媒體url
readyState
傳回音頻/視訊目前的就緒狀态
0 = HAVE_NOTHING - 沒有關于音頻/視訊是否就緒的資訊
1 = HAVE_METADATA - 關于音頻/視訊就緒的中繼資料
2 = HAVE_CURRENT_DATA - 關于目前播放位置的數
據是可用的，但沒有足夠的資料來播放下一幀/毫秒
3 = HAVE_FUTURE_DATA - 目前及至少下一幀的資料是可用的
4 = HAVE_ENOUGH_DATA - 可用資料足以開始播放
networkState
傳回音頻/視訊的目前網絡狀态
0 = NETWORK_EMPTY - 音頻/視訊尚未初始化
1 = NETWORK_IDLE - 音頻/視訊是活動的且已選取資源，但并未使用網絡
2 = NETWORK_LOADING - 浏覽器正在下載下傳資料
3 = NETWORK_NO_SOURCE - 未找到音頻/視訊來源
傳回對象
error
this.error.code
1 = MEDIA_ERR_ABORTED - 取回過程被使用者中止
2 = MEDIA_ERR_NETWORK - 當下載下傳時發生錯誤
3 = MEDIA_ERR_DECODE - 當解碼時發生錯誤
4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 不支援音頻/視訊
console.log(this.error.code);
played
獲得視訊中以秒計的首段已播放的範圍（部分）
屬性值
length - 獲得音頻/視訊中已播範圍的數量
start(index) - 獲得某個已播範圍的開始位置
end(index) - 獲得某個已播範圍的結束位置
擷取目前播放時間：this.played.end(0)
seekable
表示音頻/視訊中的可尋址部分
length - 獲得音頻/視訊中可尋址範圍的數量
本文轉自毒逆天部落格園部落格，原文連結：http://www.cnblogs.com/dunitian/p/5141492.html，如需轉載請自行聯系原作者