Video使用方法
<video id="myVideo" controls poster="video.jpg" width="600" height="400" >
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webM" />
<source src="video.ogv" type="video/ogg" />
<p>Your browser does not support the video tag.</p>
</video>
HTML5 的 <video>標(biāo)簽有許多默認(rèn)的事件恤批，如果我們通過這個播放器加載一段視頻文件裹赴，從開始加載到播放結(jié)束，都經(jīng)歷了哪些事件呢篮昧？這些事件的觸發(fā)順序如何？
- HTML5:onplay
- HTML5:onwaiting
- HTML5:ondurationchange
- HTML5:onloadedmetadata
- HTML5:onloadeddata
- HTML5:oncanplay
- HTML5:onplaying
- HTML5:oncanplaythrough
- HTML5:onended
事件詳細(xì)說明：
onplay:
播放器不在保持“暫驼叮”狀態(tài)，即“play()”方法被調(diào)用或者autoplay屬性設(shè)置為true期望播放器自動開始播放月帝。
onwaiting:
播放由于下一幀數(shù)據(jù)未獲取到導(dǎo)致播放停止幽污，但是播放器沒有主動預(yù)期其停止，仍然在努力的獲取數(shù)據(jù)距误，簡單的說就是在等待下一幀視頻數(shù)據(jù)，暫時還無法播放趁俊。
ondurationchange：
duration(視頻播放總時長)屬性被更新。
onloadedmetadata：
獲取視頻meta信息完畢刑然，這個時候播放器已經(jīng)獲取到了視頻時長和視頻資源的文件大小。
onloadeddata：
視頻播放器第一次完成了當(dāng)前播放位置的視頻渲染怔软。
oncanplay：
視頻播放器已經(jīng)可以開始播放視頻了择镇，但是只是預(yù)期可以正常播放，不保證之后的播放不會出現(xiàn)緩沖等待挚瘟。
onplaying：
真正處于播放的狀態(tài)饲梭，這個時候我們才是真正的在觀看視頻焰檩。
oncanplaythrough：
播放器認(rèn)為從現(xiàn)在開始播放，直到播放結(jié)束兜叨，不再會因為等待后面的數(shù)據(jù)而出現(xiàn)緩沖等待衩侥。（注意，這個只是播放器根據(jù)網(wǎng)速和播放進(jìn)度的預(yù)期估計茫死，不代表后面的數(shù)據(jù)全部都預(yù)先緩沖完畢了，如果你手動推動控制欄的進(jìn)度條屡久，可能仍然會出現(xiàn)緩沖的，或者你后面網(wǎng)絡(luò)斷開了被环，一樣沒辦法繼續(xù)播放，除非是真的緩沖完了）
onended：
播放完畢浸锨。
更多事件可以查看whatwg
因為Chrome支持部分下載版姑，它只緩沖足夠播放的內(nèi)容
但是 如果播放一段然后暫停， Chrome 就不會 停止緩沖冯凹，而會緩沖到底
下面的例子能夠在顯示視頻之前緩沖完畢
Chrome 32上測試通過
// Create video in background and start playing
var video = document.createElement('video');
video.src = 'video.mp4';
video.controls = true;
video.muted = true;
video.play();
// Pause immediately after it starts playing.
video.addEventListener("timeupdate", function() {
if (this.currentTime > 0) {
this.pause();
video.muted = false;
video.currentTime = 0
this.removeEventListener("timeupdate", arguments.callee, false);
// When whole video is buffered, show video on page
video.addEventListener("progress", function() {
if (Math.round(video.buffered.end(0)) / Math.round(video.seekable.end(0)) == 1) {
document.body.appendChild(video);
this.removeEventListener("progress", arguments.callee, false);
}
}, false);
}
}, false);