Multiple videos on one page Do not download all Chrome videos

Question

I upload several videos on one 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 get 20+ videos on one page, so I will create these many video tags.

Whenever I try to use this code on my local host, it works fine, but if I host this code on a remote server and try to upload only a few videos, but there is no error message in my Chrome control.

I tried to reload the video one by one using jQuery with some time interval, while I get the warning "Preliminary headers are shown" in the chrome Inspect element.

Can someone help me solve this problem?

Thanks in advance.

Answer 1

Chrome limits the number of video / audio files to 4 or 6 (I don’t remember), so, as brianchirls says , 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 set preload="none" for all of them. Thus, the browser actually tries to download them if the user actively presses the play button.

Alternatively, you can set the first 4/6 videos with preload="metadata" and the rest on preload="none" .

Answer 2

This can be a lot of data that the browser can download immediately, depending on how large the file is and how fast and far the server is from it. 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"> 

This should limit the number of files that the browser should download at a time, downloading only the title of each video file. The rest of the file will load after playback starts. If this does not work, try setting the preload to "none".

In addition, you will want to make sure that the remote server uses HTTP Byte Serving. that is, the HTTP status header in the video should be “206 partial content” and not “200 OK”.