Test project 20 Dec 2023
saiph - an accessible web video player
- Vanilla JS
- HTML5 Video
- CSS
- Accessible
- Cloudflare
A keyboard-driven HTML5 video player in vanilla JavaScript: a tick-marked seek scrubber, monospace timecode, double-click seek, captions and picture-in-picture, and an eight-clip color-grade playlist. No framework, no dependencies.
The challenge
Turn a dead video-player mockup, where volume, mute, seek and the playlist did nothing, into a player where every control works, the whole thing is accessible and responsive, and it reads as a designed instrument rather than a template.
Approach
Drive the UI entirely from native media events so state never drifts, use native range inputs for the sliders to get keyboard and assistive-tech support for free, and handle the play() promise and HTTP range seeking properly. Replace the design end to end with an OKLCH warm-graphite editing-console system and a monospace timecode signature, then verify keyboard operation, screen-reader semantics, and the layout at 390 and 1440 in the browser.
Result
A keyboard-driven, fully accessible HTML5 player with a tick-marked scrubber, double-click seek, an eight-clip grade playlist, picture-in-picture and captions. Vanilla JavaScript, no dependencies, a clean console, shipped static to Cloudflare Pages.