Timeline: a Video.js skin that reads time like an editor
Most players draw the progress bar as a line. Editors read time as a track, so Timeline builds one. Chapters are colored clips over the video's own frames, with a ruler above and a capped playhead. Point at the track and it opens up, like zooming in on a timeline. The playhead takes the color of the clip it's in.
Time reads as timecode down to the frame. J, K and L shuttle forward and back at 1ร, 2ร, 4ร and 8ร, and comma and period step one frame.
It's built on the Default skin, so controls, menus and hotkeys stay keyboard operable. The panel behind the controls is solid for contrast. Tap targets grow to 44px on coarse pointers, the track slims down on small players, and reduced motion is respected.
Clip colors are tokens, so a site can swap in its own palette. In the demo they follow my 2026 reel: lime for ads, teal for product UI, violet for web, orange for 3D. The reel streams from Mux, and the filmstrip reads the storyboard track, so it works with any source that has one.
Try the live demo here.
https://timeline.leoreed.com
The demo video is my 2026 reel, made of self-initiated pieces for fictional brands.