我已经看到了一些关于这个的线索,但没有答案,所以我想我会添加另一个到污染的YouTube相关页面的严重的院子里。
我有一个100MB的mp4视频,需要被浏览器完全下载,
然而,没有任何事件在完全下载时触发,Chrome似乎停止缓冲任何更多的视频,直到当前的视频时间几乎达到缓冲区的结尾,然后它需要更多。
如何让浏览器完全下载视频并将其缓冲100%?
谢谢
解决方法
令人遗憾的是,像其他HTML5浏览器一样,Chrome试图明白下载内容,避免不必要的带宽使用情况,这意味着有时候我们会有一个次优的体验(讽刺的是,YouTube遭受了这么多的扩展,强制更多预缓冲!)
也就是说,我没有发现这是一个很好的服务器和良好的连接需要太多的时间 – 但如果你需要的东西,我发现唯一的解决方案是一个大锤…使用Ajax来下载文件您要播放,然后将其加载到视频元素的源中。
下面的示例假设您的浏览器支持m4v / mp4 – 如果您不能保证(例如)Chrome,则可能需要使用canPlayType测试为用户选择最合适的视频格式。你还要测试看看它能处理你想要的大小的视频(我已经尝试了一些相当大的视频,但不知道这个可以处理的上限)
该示例也很简单,它启动请求,并且在加载时不会向用户传达任何内容 – 通过您的大小视频,您可能会想要显示一个进度条,以保持他们的兴趣。 。
这个过程的另一个缺点是在完全下载文件之前不会开始播放 – 如果要更深入地从缓冲区动态显示视频,那么您需要开始深入到流行边缘(目前)媒体资源世界如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 ? webkitURL : 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>