为什么不是所有视频都在 Chrome 的页面上加载？答案

【问题标题】：Why don't all videos load on page in Chrome?为什么不是所有视频都在 Chrome 的页面上加载？
【发布时间】：2013-01-19 05:59:24
【问题描述】：

http://graysonearle.com/bluemen/ 使用 webkit 浏览器单击它。加载时应该会出现一个 4x4 的视频网格，但只有 1-3 个视频倾向于加载到 Chrome 上。在 Safari 上工作得很好，什么给了？它们是同一个视频。当我使用较小的视频进行此操作时，它运行良好，我想这可能与它有关。有什么方法可以强制加载页面上的多个视频？

【问题讨论】：

标签： html video

【解决方案1】：

如果您为每个视频添加缓存破坏器后缀，它似乎可以正常工作。在 Chrome 上，它会做正确的事情并很快将第一帧加载为海报，但在 Safari 上，您需要明确选择海报

<!DOCTYPE html> 
<html> 
<head>
    <link rel="stylesheet" type="text/css" href="http://graysonearle.com/bluemen/css/reset.css">
    <link rel="stylesheet" type="text/css" href="http://graysonearle.com/bluemen/css/style.css">
</head>
<body> 
<script>
    for (var i=0;i<10;i++) {
        document.write('<div class="vidBox" id="box'+i+'">');
        document.write('    <video class="vid" preload="metadata" controls="true" id="vid'+i+'">');
        document.write('        <source src="http://graysonearle.com/bluemen/videos/fullvid.mp4?a='+i+'" type="video/mp4">');
        document.write('        <source src="http://graysonearle.com/bluemen/videos/red.webm" type="video/ogg">');
        document.write('    </video>');
        document.write('</div>');
    }
</script>
</body> 
</html>

如果这不起作用（并且看起来浏览器缓冲区有时仍会阻塞），那么您需要做的是一个一个地加载视频源，触发 canplaythrough 事件的加载。

总而言之，它似乎不太健壮，祝你好运

编辑

好的，这个版本更健壮，但需要稍微整理一下...... 它通过异步 ajax 调用将视频作为 blob 抓取一次，然后将其作为源传递给每个视频元素……您可能希望将海报加载到视频中并显示某种进度条，直到视频已加载。我不得不对我的测试视频做这个样本，因为我没有跨域权限，所以无法轻松地用你的尺寸视频进行测试......但试一试

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://graysonearle.com/bluemen/css/reset.css">
<link rel="stylesheet" type="text/css" href="http://graysonearle.com/bluemen/css/style.css">
<title></title>
</head>
<body>
<script type="text/javascript">
    for (var i=0;i<10;i++) {
        document.write('<div class="vidBox" id="box'+i+'">');
        document.write('    <video class="vid" preload="metadata" controls="true" id="vid'+i+'">');
        document.write('    <\/video>');
        document.write('<\/div>');
    }


var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://jcath-drg.s3.amazonaws.com/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.
       for (var i=0;i<10;i++) {
        display(i,vid)
   }
  }
};
xhr.send();

       function display(i,vid){

    var video = document.getElementById("vid"+i);
    console.log(video);
    video.src = vid;

}
</script>
</body>
</html>

【讨论】：

你太棒了。所以缓存破坏器是 ?a=# 部分，对吧？这基本上让浏览器将它们视为单独的视频？
是的，让浏览器请求不同的连接。效率不高，但似乎有帮助。可能值得将其记录为 webkit 问题，因为它是一致且可重新创建的
另一种解决方案（虽然我没有机会测试）是将视频加载到内存中 - 当然取决于大小）然后将其用作视频的来源在这里的答案stackoverflow.com/questions/14317179/…
不幸的是，缓冲区仍然被阻塞。发生了一些奇怪的事情。似乎无法让 canplaythrough 事件发挥作用，有什么热门提示吗？
使用上述更强大的解决方案进行编辑...到目前为止，仅在 Chrome 中测试过 YMMV