Multiple video's on a single page Not loading all the video's Chrome

Question

I'm loading multiple video's on a single page,

My code snippet is something like,

<div class="video_content left">
    <span style="font-weight:bold">1</span>
    <video  width="213" height="120" controls class="video_tag">
        <source src="<MY VIDEO SOURCE>" type="video/mp4" />
    </video>
</div>
<div class="video_content left">
    <span style="font-weight:bold">2</span>
    <video  width="213" height="120" controls class="video_tag">
        <source src="<MY VIDEO SOURCE>" type="video/mp4" />
    </video>
</div>
<div class="video_content left">
    <span style="font-weight:bold">3</span>
    <video  width="213" height="120" controls class="video_tag">
        <source src="<MY VIDEO SOURCE>" type="video/mp4" />
    </video>
</div>
<div class="video_content left">
    <span style="font-weight:bold">4</span>
    <video  width="213" height="120" controls class="video_tag">
        <source src="<MY VIDEO SOURCE>" type="video/mp4" />
    </video>
</div>

Sometimes I'll get 20+ video's on a single page, so that time I'll create those many video tags.

Whenever I try this code in my localhost it works fine, but if I host this code in remote server and try only few video's will be loading, but in my chrome inspect element there is no error message.

I tried re-loading video's one by one using JQuery with some time interval, that time I'll be getting "Provisional headers are shown" kind of warning in chrome's Inspect element.

Could anyone please help me to fix this issue?

Thanks in advance.

Answer 1

Chrome limits the number of videos/audio files to 4 or 6 (I can't remember which) so, as brianchirls mentions, you need to set the preload attribute, although you need to set it to none.

My recommendation is to provide a poster image (via the poster attribute) for all your videos and to set preload="none" to all of them. That way the browser only actually tries to load them if the user actively clicks the play button.

Alternatively you could set the first 4/6 videos with preload="metadata" and the rest to preload="none".

Answer 2

That can be a lot of data for the browser to download all at once, depending on how big the file is and how fast and far away the server is. Try giving each video tag a preload attribute and set it to "metadata". Like this:

<video  width="213" height="120" controls class="video_tag" preload="metadata">

That should limit the number of files the browser needs to load all at one time, only loading the header of each video file. The rest of the file will load once you start playing. If that doesn't work, try setting preload to "none".

Also, you'll want to make sure the remote server is using HTTP Byte Serving. i.e., the HTTP status header on the video files should be "206 Partial Content", not "200 OK".