Cross Browser HTML5 Video Preloading Poster Only

Question

I'm currently rendering a list of HTML5 video elements.

I have multiple video files on a single page, i do not want to download a lot of data until the user clicks play.

I would like to grab frame 1 and show it as the poster. I dont have access to an alternative posters for each video.

I'm looking at the preload attribute with a value of 'metadata' for the video element here:

http://www.w3schools.com/tags/att_video_preload.asp

This looks to have limited browser support.

Using preload='metadata' works in firefox and chrome and show frame 1 as a poster.

Using preload='metadata' disables preloading in safari, but disabled the poster.

I have been unable to test in IE.

How do i show the HTML5 video elements frame 1 as a poster, in safari, without preloading a large chunk of data.

<video controls preload='metadata'>
  <source src="{{video.url | trusted}}" type="video/mp4">
  Your browser does not support the video tag.
</video>

Answer 1

Version v42 and above now seem to respect this. Yay!
(current beta version as of yesterday - so not yet available)

You can see now a 206 partial content request, and 66kb downloaded (my video is 600kb+)

However: VERY IMPORTANT

In case you didn't know, Chrome can only have 6 simultaneous connections at the same time to the same server.

Currently in v42 + v43 they have a terrible bug which means that once the metadata is loaded that file is not released back into the 'pool' for available connections. So if you load 6 or more videos the 7th blocks and won't download.

I've reported this as a bug https://code.google.com/p/chromium/issues/detail?id=468930

This may not be the case for all videos, but I have 10 short MP4 videos encoded with Adobe Media Encoder and they get stuck.

If in doubt, or experiencing this problem you've got no choice but to set preload='auto' for now. Hopefully this bug will never make it into the wild.