Why don't all videos load on page in Chrome?

Question

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?

Offbeatmammal · Accepted Answer · 2013-01-18T21:59:24.153

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>

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

EDIT

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>

You are amazing. So the cache buster is the ?a=# part, right? That basically makes the browser think of them as individual videos? — prismspecs, Jan 16 '13 at 00:29
yup, gets the browser to request a different connection. not efficient but seems to help. might be worth logging this as a webkit issue as it is consistent and recreatable — Offbeatmammal, Jan 16 '13 at 18:20
one other solution (though I've not had a chance to test) would be to load the video once into memory - depending on size of course) and then use that as the source of the video as in the answer here http://stackoverflow.com/questions/14317179/display-a-video-from-a-blob-javascript — Offbeatmammal, Jan 17 '13 at 20:09
buffer still getting choked unfortunately. some weird stuff going on. can't seem to get the canplaythrough event to work, any hot tips? — prismspecs, Jan 18 '13 at 19:49
Edited with a more robust solution above... only tested in Chrome so far so YMMV — Offbeatmammal, Jan 18 '13 at 21:59
BTW Looks like it's Chrome not Safari at the moment - https://bugs.webkit.org/show_bug.cgi?id=101671I can check IE if you need that as well — Offbeatmammal, Jan 18 '13 at 22:13

Why don't all videos load on page in Chrome?

1 Answers1

Linked