Chrome hangs on loading page with many <video> tags

Question

I have a page with many <video> elements in it arranged one after the other.

Lets says 100 for now. When I click on the web page, Chrome loads the first 25 and I can see the video images displayed Ok, but then it stops and the rest remain black. I also see the page is still loading, and I see chrome saying "In progress..." on the lower left side of the page.

Using firefox, I can load the same page with no problem. Also using IE 11, I can load the same page with no problem and all videos show fine.

In none of these cases I actually played the video yet. This is all just waiting for the page to fully load.

I am using local apache server on my PC. The setup is XAMPP software. So Apache is running on my PC, and I access my page using localhost.

Now here is the interesting thing I found. When I load the page using file:///C:/ URI, and use the same exact page, then now Chrome shows all the video elements just fine! None of them is black. They all display fine and I can play them with no problem.

The problem only shows up when using the apache server. So it is a buffering issue between the web server and the Chrome browser.

I know it is a buffering issue since if I move one of the videos still showing black and put the link at the top of the page, and reload the page, then it is no longer black and it shows up. Nothing changed except the position of the <video> tag. So it seems Chrome has a limit of how many video tags it can load in one page?

I am using Chrome 36.0.1985.125 on windows 7.

I tried to change the size of the video displayed using:

video {
  width: 200px    !important;
  height: auto   !important;
}

But no matter what size I use in the above, it still hangs in the same place.

Any suggestions what to do? I could split the web page into many different pages as last resort.

This is windows 7, 64 bit. The video elements I use are all the same. Here is one example

  <P>
  <video width="480" height="385" controls>
      <source src="movie.webm" type="video/webm"> 
      <source src="movie.ogg" type="video/ogg">
      <source src="movie.mp4" type="video/mp4"> 
       Your browser does not support the video tag.
  </video>
 </P>

As I said, changing the width and height makes no difference.

I looked at the log file for apache (access log file) and I see some 206 codes in there when I load the page from Chrome (206 is partial content). Here is example of one entry:

[11/Aug/2014:13:17:25 -0500] "GET /my_notes/movie.webm HTTP/1.1" 206 1768659 
 "http://localhost/my_notes/index.htm" "Mozilla/5.0 (Windows NT 6.1; WOW64) 
  AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36"

When I load the same page from firefox and look at the apache log file, I do not see any 206 codes in there. From http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html it says:

The server has fulfilled the partial GET request for the resource. The request MUST have included a Range header field (section 14.35) indicating the desired range, and MAY have included an If-Range header field (section 14.27) to make the request conditional.

So it sounds like Chrome has a limit of the video it can request? Is this a known issue with Chrome?

Answer 1

I found a solution that bypass this Chrome issue. Posting here in case someone else runs into the same problem.

Replaced All the

  <video  controls>....</video>

with

  <video preload = "none" controls poster="screen_shot.png">

What the above does is suggest to the browser not to download the videos unless one clicks on the play button, then only that specific video is loaded. It places a poster image meanwhile so that the space is occupied by something and not empty.

Now the web page loads fine in Chrome.

Chrome has a known bug creating multiple socket connections and not closing them. https://code.google.com/p/chromium/issues/detail?id=234779