video 屬性：
<!-- video 不支持 IE8及以下版本瀏覽器，支持三種視頻格式：MP4，WebM 和 Ogg -->
<video src="test.mp4" controls width="400" height="300"></video>// 當第一段視頻加載失敗時，自動加載下一段視頻
video 事件：
<video src="test.mp4" controls width="400" height="300" id="video"></video>
<script>
var video = document.getElementById('video')
// 1、loadstart：視頻查找。當瀏覽器開始尋找指定的音頻/視頻時觸發，也就是當加載過程開始時
video.addEventListener('loadstart', function(e) {
console.log('提示視頻的元數據已加載')
console.log(e)
console.log(video.duration) // NaN
})
// 2、durationchange：時長變化。當指定的音頻/視頻的時長數據發生變化時觸發，加載后，時長由 NaN 變為音頻/視頻的實際時長
video.addEventListener('durationchange', function(e) {
console.log('提示視頻的時長已改變')
console.log(e)
console.log(video.duration) // 528.981333 視頻的實際時長（單位：秒）
})
// 3、loadedmetadata ：元數據加載。當指定的音頻/視頻的元數據已加載時觸發，元數據包括：時長、尺寸（僅視頻）以及文本軌道
video.addEventListener('loadedmetadata', function(e) {
console.log('提示視頻的元數據已加載')
console.log(e)
})
// 4、loadeddata：視頻下載監聽。當當前幀的數據已加載，但沒有足夠的數據來播放指定音頻/視頻的下一幀時觸發
video.addEventListener('loadeddata', function(e) {
console.log('提示當前幀的數據是可用的')
console.log(e)
})
// 5、progress：瀏覽器下載監聽。當瀏覽器正在下載指定的音頻/視頻時觸發
video.addEventListener('progress', function(e) {
console.log('提示視頻正在下載中')
console.log(e)
})
// 6、canplay：可播放監聽。當瀏覽器能夠開始播放指定的音頻/視頻時觸發
video.addEventListener('canplay', function(e) {
console.log('提示該視頻已準備好開始播放')
console.log(e)
})
// 7、canplaythrough：可流暢播放。當瀏覽器預計能夠在不停下來進行緩沖的情況下持續播放指定的音頻/視頻時觸發
video.addEventListener('canplaythrough', function(e) {
console.log('提示視頻能夠不停頓地一直播放')
console.log(e)
})
// 8、play：播放監聽
video.addEventListener('play', function(e) {
console.log('提示該視頻正在播放中')
console.log(e)
})
// 9、pause：暫停監聽
video.addEventListener('pause', function(e) {
console.log('暫停播放')
console.log(e)
})
// 10、seeking：查找開始。當用戶開始移動/跳躍到音頻/視頻中新的位置時觸發
video.addEventListener('seeking', function(e) {
console.log('開始移動進度條')
console.log(e)
})
// 11、seeked：查找結束。當用戶已經移動/跳躍到視頻中新的位置時觸發
video.addEventListener('seeked', function(e) {
console.log('進度條已經移動到了新的位置')
console.log(e)
})
// 12、waiting：視頻加載等待。當視頻由于需要緩沖下一幀而停止，等待時觸發
video.addEventListener('waiting', function(e) {
console.log('視頻加載等待')
console.log(e)
})
// 13、playing：當視頻在已因緩沖而暫?；蛲Ｖ购笠丫途w時觸發
video.addEventListener('playing', function(e) {
console.log('playing')
console.log(e)
})
// 14、timeupdate：目前的播放位置已更改時，播放時間更新
video.addEventListener('timeupdate', function(e) {
console.log('timeupdate')
console.log(e)
})
// 15、ended：播放結束
video.addEventListener('ended', function(e) {
console.log('視頻播放完了')
console.log(e)
})
// 16、error：播放錯誤
video.addEventListener('error', function(e) {
console.log('視頻出錯了')
console.log(e)
})
// 17、volumechange：當音量更改時
video.addEventListener('volumechange', function(e) {
console.log('volumechange')
console.log(e)
})
// 18、stalled：當瀏覽器嘗試獲取媒體數據，但數據不可用時
video.addEventListener('stalled', function(e) {
console.log('stalled')
console.log(e)
})
// 19、ratechange：當視頻的播放速度已更改時
video.addEventListener('ratechange', function(e) {
console.log('ratechange')
console.log(e)
})
</script>
