HTML Video and the preload Attribute

Video within HTML has come a long way with the introduction of HTML5. The <source> elements have been particularly helpful when working with multiple browsers, devices, screen sizes and network connections ‑‑ something notoriously tricky for web videos in the past.

However, there is one attribute of the <video> element that still stumps some developers; the preload attribute. As straightforward as that might sound at first glance, it's actually a bit more of a nuanced subject than you might expect.

Why is the preload attribute even a thing?

When it comes to videos on the web, each browser handles loading in a different way. When you hit the page, some browsers will download some meta‑information about the video, like dimensions, length and size. Some will download the entire video on page load, and some won't even load metadata.

The preload attribute allows developers to give the browser some guidance on what it should do with videos. Unfortunately, this attribute is purely guidance and not a guarantee that the browser will go along with what the developer requests. preload has three possible settings ‑ so let's look into each one.

preload="auto"

Honestly? You probably don't want to use this setting.

Setting preload to auto downloads both the meta and the video, negating the default, bandwidth‑saving behaviour of the <video> element ‑ and that's before the user has even clicked play. There's no real point to use this setting, in my personal opinion, because if a user wants to watch a video on your site they will be willing to wait a short time for buffering.

If they don't interact, they may not watch a video ‑‑ so why waste their bandwidth and slow your page down with a heavy request?

If you include the preload attribute on your video, but leave it empty, then this will be the value that is used.

preload="metadata"

Now we're cooking with gas.

This attribute advises the browser to load some information; enough to show a poster and grab some metadata about the video, but leave the majority of the video content (which is the heaviest part of the video) for when a user actually interacts with it.

This means that the page load isn't blocked or slowed down by weighty video files. It also means people can visit your pages on mobile connections without eating through their data allowance on videos they may not even choose to watch.

However, this means your video will need to load from scratch when a user interacts with it, and will need to buffer whilst playing to get the whole video downloaded.

preload="none"

This one is pretty self‑explanatory. When this is set, the browser is advised not to download any information about the video at all ahead of a user interacting with the video. That means your page load will not be blocked at all by any information about the video, but the video will need to load for longer when a user interacts. It also means you're going to have no posters, and no sizing information (unless you're using CSS to constrain the video's dimensions anyway).

The Wrap‑Up

The spec put forward by W3C recommends that the default setting for all browsers is preload="metadata". I think this is a pretty good compromise between good‑looking videos that (hopefully) have explanatory and clear thumbnails and speedy load times for the rest of the page.

I struggle to think of a situation where a developer should use preload="auto", but preload="none" does definitely have its uses ‑‑ for instance, if you're building a lightweight mobile‑friendly or mobile‑only experience and have to use videos, it's a good idea to prevent those from blocking the page load or weighing it down.