Video.js Skins Challenge · 2026
Every control is a sign.
The first films were phantom rides: a camera bolted to the front of a streetcar. LINE 10 is a player built like the line they rode. The seek bar is the line diagram, chapters are stations, the clock is a split-flap board. Transit signage is the most tested accessible design system we have, read at a glance by everyone, in every light, while things move behind it. A player's controls do the same job.
Try the player
Read the signs
Nothing here is decoration. Each piece of signage is a real control or a real state.
The line is the seek bar
Ridden track in the line colour, buffered track laid, the rest planned. Chapters are stations, named on wide players.
The clock is a split-flap board
Only changed digits flip. Under reduced motion they just change. Screen readers get the plain time.
The LED strip tells you the state
Ready to depart, In service, Holding at platform (paused), Approaching (buffering), Quiet carriage (muted), Express service, This service terminates here (ended).
The blind names the last stop
Read from the final chapter, so you know where this video ends before you start.
Stops is the chapter list
A timetable you can arrow through. [ and ] jump to the previous or next stop from anywhere.
Speed is the service pattern
Stopping, Local, Limited, Express, Rapid: the faster the service, the fewer stops it calls at.
Errors are hazard plates
A real dialog with a title, a reason and a way out, never a toast that disappears.
Captions are the passenger display
Amber text on solid black, sized to the player. Readable over any frame.
Every platform
The same skin, sized by container queries and translated through Video.js i18n. Station names fold away as the platform narrows; the line never does.
Signage is accessibility
Built on Video.js components, so roles, names, hotkeys and announcements come for free. The skin's job is to never take them away.
Keyboard
- Space K
- Depart / hold
- ← → J L
- Back / ahead 10 s
- [ ]
- Previous / next stop
- 0–9
- Jump to 0–90% of the line
- Home End
- First stop / terminus
- < >
- Slower / faster service
- ↑ ↓ M
- Volume / quiet carriage
- C
- Captions
- F I
- Fullscreen / picture in picture
- Esc
- Close any menu, focus goes back to its button
- One focus ring White inside black, so it shows over a snowfield or a tunnel.
- Solid plates Signage black at 94%, not glass. Text stays above 7:1 on any frame.
- Targets 40px buttons, 44px on touch. The line is 24px tall to grab, 6px to see.
- Reduced motion The flaps stop flipping, LEDs stop scrolling, menus stop growing.
- Reduced transparency, more contrast Plates go fully solid, scrims go away.
- Forced colours Every plate, line and button maps to system colours.
- Text on the line colour Picked by
contrast-color(), so a gold line gets black text. - Six languages, both directions All copy through i18n tokens; Arabic mirrors the controls.