javascript Chrome 中的完全缓冲视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21628953/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fully buffer video in Chrome
提问by Michal
Is it possible to fully buffer HTML5 video in Chrome (and Opera)?
是否可以在 Chrome（和 Opera）中完全缓冲 HTML5 视频？
I host the movie in .mp4 and .webm on amazon S3. In HTML I use standard <video>tag. The server responds with status 206 Partial Content. It is great, as it allows the browser to download any part of the video but I need to be able to seek instantly to any part of the file.
我在亚马逊 S3 上以 .mp4 和 .webm 格式托管这部电影。在 HTML 中，我使用标准<video>标签。服务器以 status 响应206 Partial Content。这很棒，因为它允许浏览器下载视频的任何部分，但我需要能够立即查找文件的任何部分。
I tried:
我试过：
.PROGRESSevent. When Chrome stops buffering the first part, the connection is killed. The next parts are downloaded in new connection, so JavaScript isn't able to continue checking total downloaded data. Even if it could, the old data isn't stored in cache. This method works in Firefox and Safari. Heck, even in IE10!XHRS. I am able to fully download the movie, but when the video starts playing, Chrome tries to download the movie from the server again. I even tried to pass the movie into HTML in base64, but that's to much dataFileAPI. Chrome isn't able to create BLOB big enough and crashes.
.PROGRESS事件。当 Chrome 停止缓冲第一部分时，连接被终止。下一部分是在新连接中下载的，因此 JavaScript 无法继续检查总下载数据。即使可以，旧数据也不会存储在缓存中。此方法适用于 Firefox 和 Safari。哎呀，即使在 IE10 中！XHRS. 我能够完全下载电影，但是当视频开始播放时，Chrome 会尝试再次从服务器下载电影。我什至试图在 base64 中将电影传递到 HTML，但数据太多了FileAPI. Chrome 无法创建足够大的 BLOB 并崩溃。
Any help is welcome!
欢迎任何帮助！
ps. I am aware of od and similar questions, but I hope something changed since they were asked.
附：我知道 od 和类似的问题，但我希望自从他们被问到之后有所改变。
回答by Duvrai
Because S3 supports partial downloads, Chrome initially buffers "only what's needed" in front of the playhead and then stops buffering. It will continue buffering "only what's needed" when the video starts playing. This means that depending on the user's download speed it will stop buffering now and then, just because it has enough buffer to play continuously.
由于 S3 支持部分下载，因此 Chrome 最初会在播放头前缓冲“仅需要的内容”，然后停止缓冲。当视频开始播放时，它将继续缓冲“仅需要的内容”。这意味着根据用户的下载速度，它会时不时地停止缓冲，因为它有足够的缓冲可以连续播放。
Butif you pause the video after having played some, Chrome will notstop buffering and go through all the way to the end.
但是如果你在播放了一些视频后暂停，Chrome不会停止缓冲并一直播放到最后。
This example exploits that technique to entirely buffer the video off screen before showing it on the page.
本示例利用该技术将视频完全缓冲到屏幕外，然后再将其显示在页面上。
Tested on Chrome 32
在 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);
回答by Hammad Akhwand
Have you tried the canplaythroughevent?
你试过这个canplaythrough活动吗？
Not in the traditional sense, I mean. Rather in a 'hacky' way. canplaythroughis triggered when the browser detects that it has enough video buffered to play continuously without pausing. I am guessing that this event triggers about the same time as chrome pauses buffering. If that's the case, it could be use to trigger a request for rest of the video.
不是传统意义上的，我的意思是。而是以一种“hacky”的方式。canplaythrough当浏览器检测到它有足够的缓冲视频可以连续播放而不暂停时触发。我猜这个事件在 chrome 暂停缓冲的同时触发。如果是这种情况，它可以用于触发对视频其余部分的请求。
回答by MayorMonty
There are several ways to load a video all the way then play it:
1. There is the goody goody browser developer would be proud way:
有几种方法可以一直加载视频然后播放它：
1. 浏览器开发者会引以为豪的方式是：
var video = document.createElement('video');
video.src='myvideo.mp4';
document.appendChild(video);
video.load();
video.addEventListener('loadedmeta',function(){
video.play()
});
2. And there is the lazy "But, I'll get carpel tunnel!" developer way:
2.还有懒惰的“但是，我会得到心皮隧道！” 开发者方式：
<video src='myvideo.mp4' onloadedmeta='this.play()' preload></video>
Sources:
http://www.w3schools.com/tags/tag_video.asp
how to run js code when video is fully buffered/loaded
How do I add new Video entirely from JavaScript?
javascript with html <video> load() & play() function not firinghttp://www.w3.org/wiki/HTML/Elements/video
来源：
http: //www.w3schools.com/tags/tag_video.asp
如何在视频完全缓冲/加载时运行 js 代码
如何完全从 JavaScript 添加新视频？
带有 html <video> load() 和 play() 函数的 javascript 没有触发http://www.w3.org/wiki/HTML/Elements/video
回答by Dany
Be careful using video.buffered.end(0). According to my experience, it works with Chrome but it fails with IE9.
使用 video.buffered.end(0) 时要小心。根据我的经验，它适用于 Chrome，但它在 IE9 中失败。
I don't know what happens, IE9 seems to forget to do the last update to video.buffered.end() at the end of the buffering process and the video.buffered.end(0) is a little bit smaller than video.duration.
不知道会发生什么，IE9好像忘记在缓冲过程结束时对video.buffered.end()做最后一次更新，video.buffered.end(0)比video小一点。期间。
So, if you think your page could be used with another browser than Chrome, don't use video.buffered.end(0).
因此，如果您认为您的页面可以与 Chrome 之外的其他浏览器一起使用，请不要使用 video.buffered.end(0)。
回答by Neablis
I have not tried it, but the HTML5 video object contains a buffered property
我还没有尝试过，但 HTML5 视频对象包含一个缓冲属性
var video = document.createElement('video');
video.buffered.start(0);
video.buffered.end(0);
Could you try monitoring the buffered (Such as with this thread chrome html5 video buffered.end event)
您能否尝试监视缓冲（例如使用此线程chrome html5 video buffered.end event）
Then continually change the current time to right before the buffered time using
然后使用
video.currentTime = video.buffered.end(0) - 1;
