A hero video that behaves, compressed for the web

The owner filmed the morning queue on her phone, and she'd like it at the top of the home page. Dropped in as it came, the clip is twenty-three megabytes. On a slow phone connection, the top of the page stays an empty box for four seconds.

Everything here runs on this computer, and the clip is a drawn stand-in for her phone video. It's twenty-three megabytes: twelve seconds, nineteen-twenty by ten-eighty, at sixteen megabits a second. And it has a sound track, even though the page will play it muted. Before you touch it, write the budget down. Eight seconds that loop, with no sound. Under one and a half megabytes on a desktop, and six hundred kilobytes on a phone. And the first thing anyone sees is a still frame, never a blank box.

Here's the whole recipe, in one small script. Keep eight seconds and drop the sound, because a muted video still downloads its sound track. Crop it to the hero's shape, then scale it to the width it's shown at. Each width gets two files, and AV1 is the small one, but not every browser can play it. H.264 plays nearly everywhere, so it's the backup. Faststart puts the file's index at the front, so it can start playing before it has all arrived. The first run used the encoder's default quality for H.264. The desktop file came out at one point nine megabytes, over the budget. So raise the number after crf: higher means smaller, and softer. At twenty-eight, the desktop file is two hundred thirty-four kilobytes. The AV1 files are smaller still: seventy-nine kilobytes for the desktop, and thirty-three for the phone. Then look at it, not just at the numbers. Up close, the H.264 file has lost the grain, but the edges and the sky hold up. The AV1 file looks the same, at a third of the size. If you see blocks or banding, bring the number back down.

On the page, the hero starts as an image: the video's first frame, saved in two widths, so it loads like any photo. The video waits in a template, with the phone width for narrow screens and AV1 listed first. The browser plays the first file it can. Muted and autoplay go together: browsers only start a video by themselves when it's silent. Playsinline stops phones from opening it full screen. It's hidden from screen readers, because the image already describes the scene. And it has no sound and says nothing the page doesn't, so it needs no captions; a video with speech would.

A small script decides whether the video joins at all. Not when someone has reduced motion switched on. Not when they've asked to save data. And if the script never runs, the still simply stays. It loops for ever, so it gets a Pause button, always visible. Anything that moves by itself for more than five seconds needs a way to stop it. And once it's scrolled out of view, it pauses itself, so nothing is decoding a video nobody can see.

Then measure it, the way the speed lesson did: a phone on a slowed connection. The first try showed nothing for four point one seconds, and after ten it was still downloading. Now the still is there in half a second, and the phone gets the thirty-three kilobyte AV1 file. A desktop gets the seventy-nine kilobyte file, and a browser without AV1 takes the H.264 backup. With reduced motion on, or data saver, no video downloads at all.

Write the budget first, encode to fit it, and show the still until the video is welcome.