为什么Chrome浏览器中的所有视频都无法加载？ [英] Why don't all videos load on page in Chrome?
问题描述
http://graysonearle.com/bluemen/
使用webkit浏览器点击它。在加载时，它应该会显示4x4网格的视频，但Chrome上只会加载1-3个视频。在Safari上运行得很好，是什么给出的？他们是同一个视频。当我用一个较小的视频做它时，它工作正常，我想这可能与它有关。有什么方法可以强制加载页面上的多个视频吗？
http://graysonearle.com/bluemen/ Click on that with a webkit browser. On load it should have a 4x4 grid of videos appear, but only 1-3 videos tend to load on Chrome. Works just fine on Safari, what gives? They are the same video. When I did it with a smaller video it worked fine, I suppose this could have something to do with it. Is there any way to force a load on more than a few videos on a page?
推荐答案
如果您为每个视频添加后缀缓存破坏者似乎工作正常。在Chrome上，它做的是正确的事情，并很快地将第一帧作为海报加载，但在Safari中，您需要明确地选择一张海报
if you suffix each video with a cache buster it seems to work fine. On Chrome it does the right thing and loads the first frame as a poster fairly quickly, but on Safari you need to explicitly select a poster
<!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事件的负载。
If that doesn't work (and it looks like the browser buffer can still sometimes get choked) then what you need to do is load the video sources one by one, triggering the load on the canplaythrough event.
总而言之它看起来不是很强大，祝你好运
all in all it doesn't seem very robust, good luck
编辑
好的，这个版本更强大，但需要整理一下.... b $ b它通过异步ajax调用将视频作为blob抓取一次，然后将其作为源传递到每个视频元素...你可能想要在视频中加载海报并显示某种进展直到视频加载为止。
我必须针对我的测试视频执行此示例，因为我没有域名的跨域权限，因此无法轻松测试您的视频尺寸...但请尝试一下
Okay, this version is more robust, but needs a little tidying up.... it grabs the video once as a blob via an async ajax call, then passes it as the source to each of the video elements... you'd probably want to load a poster into the videos and display some sort of progress bar until the video has loaded. I had to do this sample against my test video because I don't have cross-domain rights to your domain so couldn't easily test with your size video... but give it a try
<!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>
这篇关于为什么Chrome浏览器中的所有视频都无法加载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
