I have a page with 10 videos. They are loaded in colorbox lightboxes.
I am using the standard videoJS markup.
Loading videos via:
<a href="#video1" class="inline">View</a></li>
and:
<div id="5ways" style="height: 348px">
<video id="5ways" class="video-js vjs-default-skin" controls
preload="auto" width="618" height="348"
data-setup="{}">
<source src="//contiki-downloads.s3.amazonaws.com/agent/training-tools/video/5ways_converted.mp4" type="video/mp4">
<source src="//contiki-downloads.s3.amazonaws.com/agent/training-tools/video/5ways_converted.WebM" type="video/webm">
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
</div>
The bottom-most 3 videos (where they are positioned in the HTML) won't load. Videos 8, 9, 10 just get the loading spinner.
There's nothing wrong with the markup/paths to the videos. I have tested the URLs and they work fine. I have also tested commenting out some of the other video tags, which causes the broken videos to start working.
EG. If I comment out video 1, video 8 starts working. Comment out video 2, video 9 starts working. Comment out video 3, video 10 starts working.
The same is true for whatever order I do this in.
VideoJS will only allow 7 videos max to be embedded.
Anyone got any ideas? Or links to pages where more than 7 videos have successfully been embedded?
As I said over in the video.js issue tracker, it looks like you're hitting Chrome's max connections per domain. As well as not using preload="auto" you might try suggestions in this question, such as spreading the videos over different domains. You may be able to set up multiple cnames for your s3 bucket.
Increasing Google Chrome's max-connections-per-server limit to more than 6