另：强制Chrome浏览器完全缓冲mp4视频 [英] Another: Force Chrome to fully buffer mp4 video
问题描述
我已经看到了一些有关这方面的线索，但没有答案，所以我想我会再加入到受污染的YouTube相关页面的严重代码中。
我有一个100MB的mp4视频，需要由浏览器完全下载，
然而，没有任何事件会在它被完全下载时触发，而Chrome似乎停止缓存更多的视频，直到当前视频时间几乎到达缓冲区的末端，然后请求更多。
如何让浏览器完全下载视频和缓冲区100％？
谢谢 解决方案
Chrome就像其他HTML5浏览器一样，试图对下载的内容做出明智的决定，并避免不必要的带宽使用......这意味着有时候我们会留下次优的体验（具有讽刺意味的是，YouTube受此影响非常大，强制更多的预缓冲！）
也就是说，我没有发现t他经常需要一个好的服务器和一个很好的连接 - 但如果你需要的东西，我发现的唯一解决方案是一个大锤...使用Ajax下载你想播放的文件，然后加载到视频元素的源代码。
以下示例假设您的浏览器支持m4v / mp4 - 您可能需要使用canPlayType测试来选择最合适的视频格式为您的用户，如果你不能保证（例如）铬。您还需要测试它是否能够很好地处理您想要的尺寸的视频（我尝试了一些相当大的视频，但不确定这个上限会可靠地处理）。
该示例也非常简单...它启动了请求，并且在加载时不向用户传递任何内容 - 使用您的大小的视频，您可能会想要显示一个进度条来保留他们对...感兴趣...
这个过程的另一个缺点是，它不会在你完全下载文件之前开始播放 - 如果你想深入了解从你的缓冲区动态地显示视频，然后你需要开始深入研究 MediaSource 的流血边缘（当前）世界，如 http://francisshanahan.com/index.php/2013/ build-an-mpeg-dash-player-from-scratch /
<！DOCTYPE html>
< html>
< head>
< title>通过AJAX预载视频< / title>
< / head>
< body>
< script>
console.log（正在下载视频...... hellip;请稍候...）
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现在是对象URL指向的blob。
var video = document.getElementById（video）;
console.log（将视频加载到元素中）;
video.src = vid;
//如果为视频元素设置自动播放，则不需要
// video.play（）
}
}
xhr.send（） ;
< / script>
< video id =video控制自动播放>< / video>
< / body>
< / html>
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.
I've got a 100MB mp4 video that needs to be fully downloaded by the browser,
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.
How can I get the browsers to fully download the video and buffer it 100%?
Thanks
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!)
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.
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...
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屋！
