-1

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

4

1 回答 1

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>
于 2013-01-15T23:53:19.460 回答