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?