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 its dimensions and duration. 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"

For an incidental video in an article, I usually avoid this setting.

Setting preload to auto tells the browser that it may preload the video, potentially including the whole file. It does not guarantee a complete download: the browser can still take connection conditions and user preferences into account. That may use bandwidth before the reader chooses to play anything, although it can be a sensible trade‑off when immediate playback is central to the page.

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.

The metadata value asks the browser for information such as duration and dimensions without preloading the whole video. A poster supplied through the poster attribute is a separate image request; it does not depend on loading the video's metadata.

That can reduce the video data transferred before somebody presses play. It is still a hint, so check what your target browsers actually request rather than assuming every visitor will download the same amount.

Playback may still have to wait for more video data to arrive. Some data may already be available, so it is not necessarily a download from scratch, but you should allow for buffering on a slower connection.

preload="none"

This one is pretty self‑explanatory. With preload="none", the browser is advised not to download video data ahead of a user interacting with the video. That means the video may take longer to begin playing. You can still provide a poster attribute and explicit width and height attributes, or constrain its dimensions with CSS; those do not depend on preloading the video metadata.

The Wrap‑up

The HTML specification suggests metadata as a compromise, but leaves the default when the attribute is missing to the browser. I like that compromise for an optional article video, together with a clear poster image and space reserved for the player.

Use auto when likely, immediate playback justifies fetching more data in advance. Use none when avoiding that early transfer matters more. Either way, test the page on the connections and devices your readers use, and remember that autoplay can take precedence over the preload hint.