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>標簽有許多默認的事件，如果我們通過這個播放器加載一段視頻文件，從開始加載到播放結(jié)束，都經(jīng)歷了哪些事件呢？這些事件的觸發(fā)順序如何？

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:
播放器不在保持“暫停”狀態(tài)，即“play()”方法被調(diào)用或者autoplay屬性設置為true期望播放器自動開始播放。
onwaiting:
播放由于下一幀數(shù)據(jù)未獲取到導致播放停止，但是播放器沒有主動預期其停止，仍然在努力的獲取數(shù)據(jù)，簡單的說就是在等待下一幀視頻數(shù)據(jù)，暫時還無法播放。
ondurationchange：
duration(視頻播放總時長)屬性被更新。
onloadedmetadata：
獲取視頻meta信息完畢，這個時候播放器已經(jīng)獲取到了視頻時長和視頻資源的文件大小。
onloadeddata：
視頻播放器第一次完成了當前播放位置的視頻渲染。
oncanplay：
視頻播放器已經(jīng)可以開始播放視頻了，但是只是預期可以正常播放，不保證之后的播放不會出現(xiàn)緩沖等待。
onplaying：
真正處于播放的狀態(tài)，這個時候我們才是真正的在觀看視頻。
oncanplaythrough：
播放器認為從現(xiàn)在開始播放，直到播放結(jié)束，不再會因為等待后面的數(shù)據(jù)而出現(xiàn)緩沖等待。（注意，這個只是播放器根據(jù)網(wǎng)速和播放進度的預期估計，不代表后面的數(shù)據(jù)全部都預先緩沖完畢了，如果你手動推動控制欄的進度條，可能仍然會出現(xiàn)緩沖的，或者你后面網(wǎng)絡斷開了，一樣沒辦法繼續(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);