H5的video標籤的屬性和播放事件

<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')
})






發佈了32 篇原創文章 · 獲贊 22 · 訪問量 10萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章