Darkroom — Video.js Skins Design Challenge entry kit

Darkroom — a film-archive skin for Video.js v10.

The idea. Most player skins decorate a rectangle. Darkroom treats every video like a print being pulled from an archive: the seek bar is a strip of film with sprocket holes, exposed safelight red as it plays; a typewriter slate labels the reel the way a canister does; buffering is a spinning reel captioned "Developing…". The palette is a darkroom at work — safelight red on deep charcoal, archive-paper cream for type, amber for volume level — and the type is Big Shoulders Display for titles with Courier Prime for timecode, because a timecode should look printed, not rendered.

Why this way. Video.js ends up on someone else's site, so the personality had to stay out of the footage's way. Controls sit on a frosted, tinted plate that keeps them legible over both bright and dark frames — I sampled frame brightness behind the bar to check that. The romance never costs usability: every target is at least 44px, focus rings glow safelight red, the bar slims down on phones through container queries, and grain, vignette and motion all switch off when reduced motion is requested.

What's in it. Play/pause, a film-strip seek bar with a hover time preview, timecode, mute and volume slider, playback rate, fullscreen, poster, buffering reel, error dialog and a replay state at the end. Tap to toggle, double-tap the sides to skip, double-tap the centre for fullscreen, plus Space/K, M, F, arrows and Home/End on the keyboard. The Tab path runs Play → Seek → Pause → Mute → Volume → Rate → Fullscreen and out again — no traps.

How it's built. Every control is a real v10 component — Container, Controls, TimeSlider with Track/Buffer/Fill/Thumb/Preview, VolumeSlider, PlaybackRateButton, FullscreenButton, Gesture, Hotkeys, StatusAnnouncer, ErrorDialog — presented through the skin's own design tokens rather than CSS overrides of the default skin, and screen-reader state changes go through StatusAnnouncer. Released under Apache 2.0.