The first films were phantom rides. Someone bolted a camera to the front of a streetcar and let it roll. LINE 10 is a Video.js v10 skin built like the line they rode.
Try it live: https://haruu99.github.io/line-10
The seek bar is the line diagram. What you've watched is painted in the line colour, chapters are stations, and the end of the video is a terminus bar. Hover the line and a station sign pops up with a preview frame, the stop name and the time.
The clock is a split-flap board, and only the digits that change flip. An LED strip tells you what the player is doing: Ready to depart, In service, Holding at platform when paused, Approaching while it buffers, Quiet carriage when it's muted. The destination blind says "towards Ferry Building", read from the last chapter, so you know where the video ends before you press play.
Stops is the chapter list, laid out like a timetable, and the [ and ] keys jump to the previous or next stop. Speed is the service pattern, from Stopping to Rapid. Captions are the amber passenger display. Errors show up as a hazard plate with a reason and a way out.
Why transit signs? They get read at a glance by everyone, in any light, while things move behind them. That's exactly what player controls have to do over video. So accessibility is the idea here, not a checklist at the end. There's one focus ring that stays visible over any frame, solid plates with 7:1 text, menus you can open and leave with the keyboard, calmer motion when reduced motion is on, support for high contrast and forced colours, and six languages including Arabic, where the controls mirror.
It's a real skin you could drop into a site. It's built on the Scaffold structure with Video.js HTML components, so hotkeys, labels, the status announcer and the error dialog all still work. One CSS variable recolours the whole line, and text on the line colour picks black or white by itself. On small players the station names fold away, but the line always stays.
The demo film is A Trip Down Market Street (Miles Brothers, 1906, public domain), cut into a four minute ride with seven stops and an original piano score, streamed from Mux. Source code: https://github.com/haruu99/line-10
Mux playback ID: knYphH43CPZ00OzhOl7GFDQ8ELyNi6V4v025Nw1s9009Rc
0 likes · 0 views · Nov 12, 2026
A Video.js v10 skin drawn like a metro line. The seek bar is the line, chapters are stations, the clock is a split-flap board, and an LED strip shows what the p
