另一个:强制 Chrome 完全缓冲 mp4 视频 [英] Another: Force Chrome to fully buffer mp4 video
问题描述
我已经看到了一些关于此的主题，但没有答案，所以我想我会在受污染的 youtube 相关页面的墓地中添加另一个.
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.
我有一个 100MB 的 mp4 视频需要浏览器完全下载，
I've got a 100MB mp4 video that needs to be fully downloaded by the browser,
然而，当它完全下载时没有触发任何事件，Chrome 似乎停止缓冲更多的视频，直到当前视频时间几乎达到缓冲区的末尾，然后它请求更多.
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.
如何让浏览器完全下载视频并 100% 缓冲它?
How can I get the browsers to fully download the video and buffer it 100%?
谢谢
推荐答案
遗憾的是，Chrome - 与其他 HTML5 浏览器一样 - 试图对其下载的内容保持智能并避免不必要的带宽使用......这意味着有时我们会留下次优体验(具有讽刺意味的是，YouTube 深受其害，以至于有扩展程序可以强制进行更多的预缓冲！)
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!)
也就是说，我没有发现在良好的服务器和良好的连接下经常需要这样做 - 但是如果您需要某些东西，我发现的唯一解决方案是有点大锤......使用 Ajax 下载您要播放的文件，然后将其加载到视频元素的源中.
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.
以下示例假设您的浏览器支持 m4v/mp4 - 如果您不能保证(例如)Chrome，您可能希望使用 canPlayType 测试为您的用户选择最合适的视频格式.您还需要进行测试，看看它处理您想要的大小的视频的效果如何(我尝试了一些相当大的视频，但不确定它能可靠处理的上限是多少)
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)
示例也非常简单......它启动请求并且在加载时不向用户传达任何信息 - 对于您的大小视频，您可能想要显示进度条只是为了保留它们有兴趣...
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...
此过程的另一个缺点是在您完全下载文件之前它不会开始播放 - 如果您想更深入地从缓冲区动态显示视频，那么您需要开始深入研究如 http://francisshanahan.com/index.php/2013/build-an-mpeg-dash-player-from-scratch/
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 MediaSource as described in posts like 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>
这篇关于另一个:强制 Chrome 完全缓冲 mp4 视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
