另一个：强制Chrome浏览器完全缓冲mp4视频

一尘不染

另一个：强制Chrome浏览器完全缓冲mp4视频

html

我已经看到了一些与此相关的主题，但是没有答案，所以我想在受污染的youtube相关页面的坟墓中添加另一个主题。

我有一个100MB的mp4视频，需要由浏览器完全下载，

但是，完全下载完之后不会触发任何事件，Chrome似乎会停止缓冲更多的视频，直到当前视频时间快要达到缓冲的末尾为止，然后它会请求更多。

如何让浏览器完全下载视频并将其缓冲100％？

谢谢

阅读 654

2020-05-10

共1个答案

一尘不染

遗憾的是，Chrome与其他HTML5浏览器一样，试图对下载的内容保持明智，并避免了不必要的带宽使用…这意味着有时我们会遇到次优的体验（具有讽刺意味的是，YouTube遭受了如此多的扩展影响强制进行更多的预缓冲！）

就是说，我并没有发现良好的服务器和良好的连接经常需要这样做-
但是，如果您需要某些东西，我发现的唯一解决方案就是大锤……使用Ajax下载该文件您要播放，然后将其加载到视频元素的源中。

下面的示例假定您的浏览器支持m4v /
mp4-如果您不能保证（例如）Chrome，则可能要使用canPlayType测试为用户选择最合适的视频格式。您还需要进行测试，以查看其对所需大小的视频的处理效果如何（我尝试了一些较大的视频，但不确定该上限可以可靠处理的上限）

该示例也非常简单…它启动了请求，并且在加载时不与用户进行任何通信-对于您的尺寸视频，您可能想要显示进度条只是为了让他们感兴趣。。

此过程的另一个缺点是，直到您完全下载了文件，它才开始播放-
如果您想更深入地从缓冲区动态显示视频，则需要开始研究最新的内容（目前），MediaSource

<!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>

2020-05-10