在Chrome(和Opera)中是否可能完全缓冲HTML5视频?
我将电影托管在Amazon S3上的.mp4和.webm文件中。在HTML中,我使用标准的
我将电影托管在Amazon S3上的.mp4和.webm文件中。在HTML中,我使用标准的
// 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);
你尝试过canplaythrough
事件吗?
我指的不是传统意义上的尝试,而是一种“hacky”的方式。当浏览器缓存足够的视频以连续播放而无需暂停时,就会触发canplaythrough
。我猜测这个事件触发的时间与chrome暂停缓存的时间大致相同。如果是这样的话,它可以用来触发对剩余视频的请求。
我没有尝试过,但HTML5视频对象包含一个缓冲属性。
var video = document.createElement('video');
video.buffered.start(0);
video.buffered.end(0);
请尝试监控缓冲(例如使用此线程chrome html5 video buffered.end event)
然后不断将当前时间更改为缓冲时间之前的时间,使用
video.currentTime = video.buffered.end(0) - 1;
使用 video.buffered.end(0) 时要小心,根据我的经验,在 Chrome 上它有效,但在 IE9 上失败了。
我不知道发生了什么,IE9 似乎忘记在缓冲过程的最后更新 video.buffered.end(),而且 video.buffered.end(0) 稍微小于 video.duration。
所以,如果你认为你的页面可能会在 Chrome 之外的其他浏览器上使用,请不要使用 video.buffered.end(0)。
有几种方法可以加载视频并播放:
1. 有一种方式是浏览器开发人员会感到自豪的方式:
var video = document.createElement('video');
video.src='myvideo.mp4';
document.appendChild(video);
video.load();
video.addEventListener('loadedmeta',function(){
video.play()
});
2. 还有一种懒惰的开发者方式:“但是,我会得到腕隧道症候群!”
<video src='myvideo.mp4' onloadedmeta='this.play()' preload></video>