Surf the Dream A discourse of links and articles from Justin Avery

Disable preloading on HTML5 Videos

We’re currently building a small mobile web application for a client and they want to run videos for desktop and pad versions of the site, however they have chosen to leave this off the mobile versions.

The site is being built responsively, which means that the same code/content will be used for every device and everything will be served on the same URL.

Hiding content from a mobile device is something which I recommend against because you are making an assumption that the mobile user is not able or does not want to watch/view the content because they’re on a mobile device. With mobile devices being used on the bus, on the couch and out and about it is difficult to say when it is suitable to show/hide certain content. If you are considering doing something like this I would urge you to question whether or not the content is suitable at all (i.e. there is no mobile context).

What I believe vs what the client wants

Obviously two different things and for better or worse the video is going to be hidden.

Unfortunately a lot of the current browsers do a lot of prefetching of resources. This means that images and video that are set to display: none; will still be downloaded and therefore a burden to the “mobile user”.

So how do we provide a suitable experience for both types of users without discriminating against either one.

preload

The preload attribute informs the browser whether or not the video data should begin downloading as soon as the video tag is loaded. It gets even better than that, you can chose how much preloading is done with the options auto, metadata, and none.

In this case I’ve gone with loading the metadata of the video, small enough not to worry the mobile devices but enough to provide the larger devices more information about the content.

<video preload="metadata" ....>

  • Thanks!

  • Misterius Sainsfour

    helpfull

  • Gee Deezy

    Very helpful. BTW, I think you can’t have “none” set if you want to set a poster frame automatically, but when I set it to “metadata” it does make a poster frame, and only puts a small hit on bandwidth.

Surf the Dream is a blog that has been running since the mid 2000's when it started on BlogSpot. Over the years it's been rebranded as justinavery.me (now my resume) and JaveryDesign.com (which now redirects back to this site).

I offer consultation services through Simple Things, produce a range of educational pocket notebooks(including a Solar System Notebook, Space Notebook, and a Guitar Notebook), write about the Universe and run a responsive web design knowledge hub and a RWD Weekly Newsletter.