Question

我已经看到了一些关于此问题的线索，但没有答案，所以我想我会在污染的youtube相关页面中添加另一个。

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

然而，当完全下载时没有发生任何事件，并且Chrome似乎停止缓冲视频，直到当前视频时间几乎到达缓冲区的末尾，然后它会请求更多。

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

由于

Answer 1

可悲的是，Chrome与其他HTML5浏览器一样，试图明智地下载它并避免不必要的带宽使用......这意味着有时候我们会留下次优的体验（具有讽刺意味的是YouTube）受此影响很大，以至于有扩展来强制更多的预缓冲！）

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

以下示例假设您的浏览器支持m4v / mp4 - 如果您无法保证（例如）Chrome，您可能希望使用canPlayType测试为您的用户选择最合适的视频格式。你还想测试一下它能处理你想要的大小的视频的程度（我已经尝试了一些相当大的视频，但不确定它能够可靠地处理的上限）

示例也非常简单......它启动了请求并且在加载时没有与用户进行任何通信 - 使用您的大小视频，您可能会想要显示进度条只是为了让他们感兴趣......

这个过程的另一个缺点是，在你完全下载文件之前它不会开始播放 - 如果你想更深入地从你的缓冲区动态显示视频那么你＆＃39 ;如http://francisshanahan.com/index.php/2013/build-an-mpeg-dash-player-from-scratch/

等帖子所述，我需要开始深入研究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>

Answer 2

我的解决方案是用于比所描述的OP小得多的视频，但是所需的行为是相同的：防止视频开始播放，直到视频完全缓冲。如果视频已经缓存，则应该为返回用户播放视频。

以下答案受此answer的影响很大，并已在Chrome，Safari和Firefox上进行过测试。

Javascript文件：

    $(document).ready(function(){
      // The video_length_round variable is video specific.
      // In this example the video is 10.88 seconds long, rounded up to 11.
      var video_length_round = 11;

      var video = document.getElementById('home_video_element');
      var mp4Source = document.getElementById('mp4Source');

      // Ensure home_video_element present on page
      if(typeof video !== 'undefined'){

        // Ensure video element has an mp4Source, if so then update video src
        if(typeof mp4Source !== 'undefined'){
          $(mp4Source).attr('src', '/assets/homepage_video.mp4');
        }

        video.load();

        // Ensure video is fully buffered before playing
        video.addEventListener("canplay", function() {
          this.removeEventListener("canplay", arguments.callee, false);

          if(Math.round(video.buffered.end(0)) >= video_length_round){
            // Video is already loaded
            this.play();

          } else {
            // Monitor video buffer progress before playing
            video.addEventListener("progress", function() {
              if(Math.round(video.buffered.end(0)) == video_length_round){
                this.removeEventListener("progress", arguments.callee, false);
                video.play();
              }
            }, false);
          }
        }, false);
      }
    });

以上javascript更新视频元素的来源，例如：

    <video id="home_video_element" loop="" poster="/assets/home/video_poster_name.jpg" preload="auto">
      <source id="mp4Source" type="video/mp4">
    </video>

Answer 3

我也想解决一个类似的问题，我希望chrome在不限流量的连接上为桌面用户更积极地加载视频。我尝试调查MediaSource作为以上建议的答案之一，但是使用该方法将使我不得不将mp4编码为碎片mp4，这似乎工作量太大。

最终我决定了这种行为：

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
</head>

<script>
  function load(){
    const url = document.getElementById('url').value
    const vid = document.getElementById('video')
    vid.src = url;
    const progressElem = document.getElementById('progress')

    const xhr = new XMLHttpRequest();
    xhr.onload = function() {
        const wasPaused = vid.paused
        const time =  vid.currentTime;
        vid.src = URL.createObjectURL(xhr.response);
        vid.currentTime = time;
        if(!wasPaused)
          vid.play();
    };
    xhr.onprogress = onprogress = function (event) {
      progressElem.innerText = 'Download Progress: ' + (event.loaded / event.total);
    };

    xhr.responseType = "blob";
    xhr.open("GET", url)
    xhr.send();
  }
</script>


<body style="padding-left: 30px">
    <h1>Testing video loading</h1>
    <input type="text" id="url" value="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" size="200">
    <br>
    <button onclick="load()">Load Video</button>
    <br>
    <h3 id="progress"></h3>
    <br>
    <video id="video" style="max-width:min(800px, 100vw)" controls></video>
</body>
</html>

基本上，我将首先让用户从他们的浏览器中流式传输视频，但是我也将开始下载整个文件，一旦完成，我就将已下载的数据交换到vid.src并确保播放器处于正确状态。请注意，这确实会在视频中产生轻微的卡顿/缓冲效果。

此解决方案绝对不是带宽效率最高的解决方案，但对于台式机上的1-2GB视频文件来说似乎效果很好。

我还应该提到，我认为您应该只在Chrome中执行此操作，因为对于其他浏览器可能会有更好的解决方案。例如，在Firefox中，有settings个用户可以访问哪个用户来控制要缓冲多少视频。

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

3 个答案: