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

前端未结

关注

 1  828

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

相关标签:

1条回答

一生所求

2021-01-29 11:38

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>

0 讨论(0)