Video and audio
Players that stay quiet until you ask, and never make you wait for what you didn't come for.
The decision
- The problem
Films that looped with no way to stop them, and a 12MB video downloading for people who never scrolled to it.
- What I chose
Videos play muted, and only while they are on screen. The click does the main thing: sound if the film has any, pause if it doesn't. Pause, restart and full screen appear on hover.
- Ruled out
Turning the sound on with hover. Browsers only allow sound after a click, so hover can only announce it.
- What it cost
On a touch screen there is no hover, so there the controls stay visible.
Video
- Muted and looping while on screen, paused when it leaves, so it never downloads for someone who doesn't reach it.
- A video paused by hand stays paused: scrolling back doesn't restart it.
- Every video that moves for more than five seconds can be paused, as WCAG 2.2.2 asks.
- Full screen hands over to the browser's own controls, and on an iPhone to the native player.
- The box is 16:9, like every film on the site, and the poster is cropped to it, so pressing play doesn't change the size. The Sneakairs film used to shrink inside a 3:2 box.
Audio versions of posts
Some posts can be listened to. A script prepares the text first: it strips what shouldn't be read aloud, counts the characters a voice service will bill, and flags what gets mispronounced, like bare slashes, acronyms and number ranges. The file is around 3MB and most people come to read, so it doesn't preload; its duration is written into the page, because the browser can't know it yet. Listening is measured at 25, 50, 75 and 100%, like reading, so listeners and readers can be compared.