A good[ish] website
Web development blog, loads of UI and JavaScript topics
The html video element’s preload attribute can have three values: metadata
, auto
, or none
. This post explains what they do and why.
The html video elements are kind of "lazy loaded" by default, meaning that not all of the video’s data is transported until the user clicks play. Therefor, adding large videos to a site won’t make it slow, if the preload attribute is set the right way, that is.
The new loading
attribute that can be set to lazy: loading='lazy'
, which applies to the img
and iframe
tags. But not on videos, because videos are not blocking.
Videos need to load way more metadata than images before they can start playing, because videos are way more complex creatures than images. Browsers have to partially read in the video to gain access to its metadata: dimensions, size, length, the placeholder image (first frame of the video), and so on.
I choose a chunky test video on purpose: 9MB .mov
, just to better see how the loading process actually happens.
💁♂️ That video could probably be compressed into ~500KB
.mp4
, without loosing any significant quality.
<video preload="metadata" src="ocean-spray.mov" />
This screenshot (fig 1) is taken right after the page had loaded, before play was pressed. In the Network tab you’ll see that it took 919KB of data to show this preview of the video (9MB original size). That 919KB includes at least:
The smaller the video is, the smaller this initial load is.
<video preload="auto" src="ocean-spray.mov" />
This is the default setting in Chrome, the default might different per browser, so don’t trust that. It will download the metadata and the video just as if play would’ve been pressed.
I would avoid this setting, because it’s just wasting bandwidth on a video that the user might never play.
You can see that the size of the request was 5.4MB (fig 2), of the total 9MB, the video loading indicator is at about 3/4 in.
<video preload="none" src="ocean-spray.mov" />
No request is made and nothing is loaded. Browsers show a default sized empty video player (fig 3). And when play is pressed the video will resize itself, causing ugly content jumping.
If autoplay
is set to true, the preload is ignored, then browsers of course need to start downloading the video immediately.
If you’re setting any custom placeholders, then definitely the preload="metadata"
is the way to go. It’s also recommended by the spec.
Below is the example video with preload set to none (because it’s so big):
Not much to see with the demo I used, it’s just the default CodeSandbox React app.
Comments would go here, but the commenting system isn’t ready yet, sorry. Tweet me @hiljaa if you want to make a correction etc.