Html 另一个：强制 Chrome 完全缓冲 mp4 视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18251632/
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
Another: Force Chrome to fully buffer mp4 video
提问by Owen
I've seen a few threads about this, but with no answers, so I thought I'd add another to the grave yard of polluted youtube related pages.
我已经看到了一些关于此的主题，但没有答案，所以我想我会在受污染的 youtube 相关页面的墓地中添加另一个。
I've got a 100MB mp4 video that needs to be fully downloaded by the browser,
我有一个 100MB 的 mp4 视频需要浏览器完全下载，
However theres no event that fires when its been fully downloaded, and Chrome seems to stop buffering any more of the video until the current video time has almost reached the end of the buffer, then it requests more.
然而，当它完全下载时没有触发事件，Chrome 似乎停止缓冲更多的视频，直到当前视频时间几乎达到缓冲区的末尾，然后它请求更多。
How can I get the browsers to fully download the video and buffer it 100%?
如何让浏览器完全下载视频并将其 100% 缓冲？
Thanks
谢谢
回答by Offbeatmammal
Sadly Chrome - like other HTML5 browsers - tries to be smart about what it's downloading and avoids unnecessary bandwidth usage... this means that sometimes we're left with a sub-optimal experience (ironically YouTube suffers from this so much that there are extensions to force more pre-buffering!)
可悲的是，Chrome - 就像其他 HTML5 浏览器一样 - 试图对其下载的内容保持智能并避免不必要的带宽使用......强制更多的预缓冲！）
That said, I've not found this to be required too often with a good server and a good connection - but if you need something the only solution I have found is a bit of a sledgehammer... use Ajax to download the file that you want to play and then load that into the source for the video element.
也就是说，我没有发现在良好的服务器和良好的连接下经常需要这样做 - 但是如果你需要一些东西，我发现的唯一解决方案有点大锤......使用 Ajax 下载文件您想播放然后将其加载到视频元素的源中。
The sample below assumes your browser supports m4v/mp4 - you'll probably want to use the canPlayType test to select the most appropriate video format for your users if you can't guarantee (eg) Chrome. You'll also want to test to see how well it handles videos of the size you want (I've tried some fairly large ones but not sure what upper limit this will reliably handle)
下面的示例假设您的浏览器支持 m4v/mp4 - 如果您不能保证（例如）Chrome，您可能希望使用 canPlayType 测试为您的用户选择最合适的视频格式。您还需要测试它对您想要的大小的视频的处理情况（我尝试了一些相当大的视频，但不确定这将可靠地处理什么上限）
The sample is also pretty simple... it kicks off the request and doesn't communicate anything to the user while it's loading - with your size video you're probably going to want to show a progress bar just to keep them interested...
该示例也非常简单......它启动请求并且在加载时不向用户传达任何信息 - 对于您的大小视频，您可能想要显示进度条只是为了让他们感兴趣.. .
the other downside of this process is that it's not going to start playing until you've fully downloaded the file - if you want to go deeper into displaying the video dynamically from your buffer then you'll need to start delving into the bleeding edge (at the moment) world of MediaSourceas described in posts like http://francisshanahan.com/index.php/2013/build-an-mpeg-dash-player-from-scratch/
这个过程的另一个缺点是，在你完全下载文件之前它不会开始播放 - 如果你想更深入地从缓冲区动态显示视频，那么你需要开始深入研究前沿（目前）MediaSource如http://francisshanahan.com/index.php/2013/build-an-mpeg-dash-player-from-scratch/ 等帖子中所述的世界
<!DOCTYPE html>
<html>
<head>
<title>Preload video via AJAX</title>
</head>
<body>
<script>
console.log("Downloading video...hellip;Please wait...")
var xhr = new XMLHttpRequest();
xhr.open('GET', 'BigBuck.m4v', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
console.log("got it");
var myBlob = this.response;
var vid = (window.webkitURL || window.URL).createObjectURL(myBlob);
// myBlob is now the blob that the object URL pointed to.
var video = document.getElementById("video");
console.log("Loading video into element");
video.src = vid;
// not needed if autoplay is set for the video element
// video.play()
}
}
xhr.send();
</script>
<video id="video" controls autoplay></video>
</body>
</html>
回答by AlexanderRD
My solution is for a much smaller video than the OP described, however the desired behaviour is the same: Prevent the video from beginning playback until the video is fully buffered. Video should play for returning users if the video is already cached.
我的解决方案是针对比所描述的 OP 小得多的视频，但所需的行为是相同的：防止视频开始播放，直到视频完全缓冲。如果视频已缓存，则应为回访用户播放视频。
Below answer was heavily influenced by this answerand has been tested on Chrome, Safari and Firefox.
下面的答案深受这个答案的影响，并且已经在 Chrome、Safari 和 Firefox 上进行了测试。
Javascript file:
Javascript文件：
$(document).ready(function(){
// The video_length_round variable is video specific.
// In this example the video is 10.88 seconds long, rounded up to 11.
var video_length_round = 11;
var video = document.getElementById('home_video_element');
var mp4Source = document.getElementById('mp4Source');
// Ensure home_video_element present on page
if(typeof video !== 'undefined'){
// Ensure video element has an mp4Source, if so then update video src
if(typeof mp4Source !== 'undefined'){
$(mp4Source).attr('src', '/assets/homepage_video.mp4');
}
video.load();
// Ensure video is fully buffered before playing
video.addEventListener("canplay", function() {
this.removeEventListener("canplay", arguments.callee, false);
if(Math.round(video.buffered.end(0)) >= video_length_round){
// Video is already loaded
this.play();
} else {
// Monitor video buffer progress before playing
video.addEventListener("progress", function() {
if(Math.round(video.buffered.end(0)) == video_length_round){
this.removeEventListener("progress", arguments.callee, false);
video.play();
}
}, false);
}
}, false);
}
});
Above javascript updates the source of a video element such as this one:
上面的 javascript 更新了一个视频元素的来源，比如这个：
<video id="home_video_element" loop="" poster="/assets/home/video_poster_name.jpg" preload="auto">
<source id="mp4Source" type="video/mp4">
</video>
