Usher: A Video.js v10 Skin with Time-First Timeline ControlsUsher: A Video.js v10 Skin with Time-First Timeline Controls
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Usher is a Video.js v10 skin built on one rule: the playhead tells the time. A single solid marker sits on the timeline and holds the current time. It is the clock and the handle; it lifts and names every chapter while you scrub; press G, Enter on the timeline, or double-click it, and it becomes a field where you type 25:00 (or just 2500) to jump there; before and after playback it is the start and the replay button. Because every number lives on the line, the button row never makes room for one, so hour-long videos and host fonts without tabular figures never wrap or shift the controls, from 160 to 1360 px wide, portrait and square included.
Everything else stays quiet: white print straight on the picture over a texture-preserving scrim (white print measures 5.7:1 even over pure white footage), solid sheets for menus, 25 icons drawn for this skin on an 18 px grid, and a two-tone focus ring that reads on white and on black. Keyboard focus keeps the controls on screen, touch gets 48 px targets and its own volume control, and the public --media-* properties (accent, radius, font) keep working: any accent stays legible because it is only ever a fill behind text whose colour is chosen by contrast. The demo reel alternates near-white, near-black and busy footage on purpose (CC BY Blender open movies).
Post image
Denis's avatar
The playhead being both the clock and a field where you type 2500 to jump, smart.
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started