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>标签有许多默认的事件，如果我们通过这个播放器加载一段视频文件，从开始加载到播放结束，都经历了哪些事件呢？这些事件的触发顺序如何？
- HTML5:onplay
- HTML5:onwaiting
- HTML5:ondurationchange
- HTML5:onloadedmetadata
- HTML5:onloadeddata
- HTML5:oncanplay
- HTML5:onplaying
- HTML5:oncanplaythrough
- HTML5:onended
事件详细说明：
onplay:
播放器不在保持“暂停”状态，即“play()”方法被调用或者autoplay属性设置为true期望播放器自动开始播放。
onwaiting:
播放由于下一帧数据未获取到导致播放停止，但是播放器没有主动预期其停止，仍然在努力的获取数据，简单的说就是在等待下一帧视频数据，暂时还无法播放。
ondurationchange：
duration(视频播放总时长)属性被更新。
onloadedmetadata：
获取视频meta信息完毕，这个时候播放器已经获取到了视频时长和视频资源的文件大小。
onloadeddata：
视频播放器第一次完成了当前播放位置的视频渲染。
oncanplay：
视频播放器已经可以开始播放视频了，但是只是预期可以正常播放，不保证之后的播放不会出现缓冲等待。
onplaying：
真正处于播放的状态，这个时候我们才是真正的在观看视频。
oncanplaythrough：
播放器认为从现在开始播放，直到播放结束，不再会因为等待后面的数据而出现缓冲等待。（注意，这个只是播放器根据网速和播放进度的预期估计，不代表后面的数据全部都预先缓冲完毕了，如果你手动推动控制栏的进度条，可能仍然会出现缓冲的，或者你后面网络断开了，一样没办法继续播放，除非是真的缓冲完了）
onended：
播放完毕。
更多事件可以查看whatwg
因为Chrome支持部分下载，它只缓冲足够播放的内容
但是 如果播放一段然后暂停， 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);