<video> 標籤是 HTML 5 的新標籤。

屬性有：autoplay   controls   end   loopend   loopstart   playcount   poster   src   start   width

屬性具體描述請產考w3C html5手冊

video標籤有許多預設的事件。從開始載入到播放結束，都經歷了哪些事件呢？這些事件的觸發順序如何？

[1]HTML5:onplay
[2]HTML5:onwaiting
[3]HTML5:ondurationchange
[4]HTML5:onloadedmetadata
[5]HTML5:onloadeddata
[6]HTML5:oncanplay
[7]HTML5:onplaying
[8]HTML5:oncanplaythrough
[9]HTML5:onended

onplay:


播放器不在保持“暫停”狀態，即“play()”方法被呼叫或者autoplay屬性設定為true期望播放器自動開始播放。


onwaiting:
播放由於下一幀資料未獲取到導致播放停止，但是播放器沒有主動預期其停止，仍然在努力的獲取資料，簡單的說就是在等待下一幀視訊資料，暫時還無法播放。

ondurationchange：
duration(視訊播放總時長)屬性被更新。

onloadedmetadata：

獲取視訊meta資訊完畢，這個時候播放器已經獲取到了視訊時長和視訊資源的檔案大小。

onloadeddata：
視訊播放器第一次完成了當前播放位置的視訊渲染。

oncanplay：
視訊播放器已經可以開始播放視訊了，但是隻是預期可以正常播放，不保證之後的播放不會出現緩衝等待。

onplaying：
真正處於播放的狀態，這個時候我們才是真正的在觀看視訊。

oncanplaythrough：

播放器認為從現在開始播放，直到播放結束，不再會因為等待後面的資料而出現緩衝等待。（注意，這個只是播放器根據網速和播放進度的預期估計，不代表後面的資料全部都預先緩衝完畢了，如果你手動推動控制欄的進度條，可能仍然會出現緩衝的，或者你後面網路斷開了，一樣沒辦法繼續播放，除非是真的緩衝完了）

onended：

播放完畢。

事件使用例項：

如果我們想要使用預設的controls，那麼在有的安卓瀏覽器上，如果網速不好的話，點選後沒有任何反應，其實已經在載入了，但是表面上看起來沒有任何的變化，

就會讓人誤以為視訊不能載入。這裡解決這個方法就可以使用視訊播放時不同的事件來處理，如給視訊表面加一個蒙版。上面寫上loading...

<div class="t-video">
<video controls="controls" class="myVideo"  controls="controls" autoplay>
<source type="video/mp4"></source>
</video>
<div class="showLoad">
<ion-spinner icon="ios"></ion-spinner>
</div>
</div>

$('.myVideo')[0].addEventListener('loadstart',function(){
$('.showLoad').css('display','block')
})
$('.myVideo')[0].addEventListener('loadedmetadata',function(){
$('.showLoad').css('display','none')
})