http://graysonearle.com/bluemen/ http://graysonearle.com/bluemen/使用 webkit 浏览器单击它。加载时应该会出现 4x4 的视频网格，但 Chrome 上往往只会加载 1-3 个视频。在 Safari 上运行得很好，有什么好处呢？它们是同一个视频。当我用较小的视频来做时，效果很好，我想这可能与它有关。有什么方法可以强制加载页面上的多个视频吗？
如果你给每个视频加上缓存破坏程序后缀，它似乎工作得很好。在 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 事件的加载。
总而言之，它看起来不太强大，祝你好运
EDIT
好吧，这个版本更强大，但需要一些整理......
它通过异步 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
