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:
播放完畢。
更多事件說明請參閱:
http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#mediaevents
