CODEWITHSUNDEEP
htmlvideo
Jaga Waterskin
Jaga Waterskin

Reputation: 191

How to avoid repeat reloading of HTML video in the same page?

Using the same video twice in the same page seems to force an unnecessary media reload.

Compare loading a video to loading an image:

<img src="image.png"/>
<img src="image.png"/>
<video src="video.webm"></video>
<video src="video.webm"></video>

According to the Firefox 5 web console, this loads the image once, but the video twice.

I understand from http://www.w3.org/TR/html5/video.html#dom-media-mediagroup that the spec's authors expected a single reload in both cases ("Multiple media elements referencing the same media resource will share a single network request"), but that is not happening to me.

I have tried to play around with server cache parameters (I'm using vanilla web.py), to no avail, and I suspect that's barking at the wrong tree. Is there anything specific I should be looking at? HTML meta elements?

Note that this is the opposite of common issues with having multiple sources for the same video. Here I am concerned with having multiple video elements with the same source playing side by side (e.g. at different points in time).

Upvotes: 19

Views: 5740

Answers (7)

JefferyJIang
JefferyJIang

Reputation: 1

I think it's because you not enabled webm or mp4 resource caching in your server, can check your request header to see if the cache-control exist.

Upvotes: 0

PlexQ
PlexQ

Reputation: 3110

I think people are misreading the spec here.

If you look at the example in the spec, they specifically talk about a single resource (file) that contains multiple tracks. The two video elements contain a reference to the same file, but different tracks within that file. The two tracks are then played back in sync by means of a media group.

If you have two video tags that reference the same file with the same track, I would not expect them to play in sync by default. I could imagine that by specifying them in the same media group this might achieve that, and therefore allow both elements to use a single connection with a single stream of requests.

If the two videos are not going to be playing in sync, it is unreasonable to expect the browser to load the two videos across a single request set. Note that this is a request set, a video may generate many requests to a server as a video or media session (think stop, pause and restart) may be significantly longer than a server or client is willing to hold open a single connection.

Imagine if the two elements had different controls. You pause the first video and leave the second video playing. 30 minutes go by, and you restart the first video. The browser is simply not going to have cached what might amount to over a hundred megabytes of content from the server to allow it to play the first video without making a new request to the server.

If you expect two discrete pieces of streaming content to be sent over a single connection using HTTP, then I don't believe that is possible (well, currently implemented). That would be multiplexing, and last I checked, HTTP servers don't have any support for multiplexing. Note that this is different from a keep alive connection where multiple pieces of content are served serially, what multiplexing is describing is multiple pieces of content being served in parallel. The usual way to achieve this is simply to have two sockets open, which is a lot simpler for both client and server to deal with than trying to demux a single stream.

Upvotes: 2

drake
drake

Reputation: 25

This work:

<video id="video" class="videohtml5" width="720" height="500" controls="controls" preload="auto" poster="">  
      <source src="path(1)"  />  
      <source src="path(2)" />  
      <source src="path(3)"  />  
</video>

Upvotes: 1

Mayank Nimje
Mayank Nimje

Reputation: 593

If you are using Html 5, then better you can go with Canvas. It will Load the video once.

Upvotes: 1

Kris Craig
Kris Craig

Reputation: 586

Sounds like this is a bug in the browser you're using, since it's apparently not adhering to the W3C HTML 5 specification. I would recommend you file a bug report for that browser's devs and test to see how this behavior compares with other browsers.

Upvotes: 0

user962042
user962042

Reputation:

You could of course put the videos in thumbnails and have them load when someone clicks on them, it might help if you can't find something else.

Upvotes: 0

Fenton
Fenton

Reputation: 250842

If you check the size of the downloaded video, are they both downloading the full video?

In my tests, most browsers download a small chunk (enough to display the thumb) and then the full video when needed - so I'm wondering if you are counting that as two full downloads, when it is actually only one full download and one partial.

I did some tests in June with the help of Bruce Lawson and we discovered that some browsers perform even more loads than the two I've described above.

HTML 5 Video In Real Life (Tests)

Upvotes: 1

Related Questions