html5 – 另一个：强制Chrome完全缓冲mp4视频

我已经看到了一些关于这个的线索，但没有答案，所以我想我会添加另一个到污染的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>

html5 – 另一个：强制Chrome完全缓冲mp4视频

解决方法

相关文章