Line: An Accessible Transit-Map Skin for Video.js v10 by nivetha MLine: An Accessible Transit-Map Skin for Video.js v10 by nivetha M

Line: An Accessible Transit-Map Skin for Video.js v10

Portfolio project
nivetha M
Line is a Video.js v10 skin that turns a video into a transit map. Chapters are stations, the progress bar is a metro route, and a small train is the playhead. It docks and opens its doors at each station, and a tick marks every stop you’ve reached.
I built it because a chapter list is the one part of a player people rarely use. A route makes the structure of a video visible at a glance and makes jumping around feel like travelling.
It’s made to be used by everyone: a real ARIA slider, full keyboard control (arrows, Home/End, PageUp/PageDown for chapters), spoken announcements at each station, reduced-motion support and 44px touch targets. It has three line colours (Sunset Express, Metro Blue, Forest Green) and works on desktop, tablet and phone. Built with @videojs/react and Mux. Apache 2.0.

0 likes · 0 views · Nov 12, 2026

Line is a Video.js v10 skin that turns a video into a transit map. Chapters are stations, the progress bar is a metro route, and a small train is the playhea...

Tags