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
Back to feedPost
R-52 is a Video.js v10 skin built like a lab chart recorder.
The timeline is chart paper. As the video plays, a pen writes its sound onto the paper in red ink. The rest of the soundtrack sits ahead of the pen as a faint pencil line, so you can see where people talk and where it goes quiet before you seek.
I spend my days on monitoring dashboards, so the panel reads like an instrument, not a toolbar. BUF is seconds buffered ahead, DROP is the browser's dropped frames, LVL is the sound level under the pen, and a status lamp goes green, amber or red with the player. Paper speed is the playback rate.
Every essential is a Video.js component (play, seek, time, volume, fullscreen, hotkeys, error dialog, status announcer). Keys are 44px or larger, focus rings stay on, motion calms down with reduced motion, and the panel sits under the picture so it stays readable over any footage.
The clip is Juno, an ARKit 52 talking head I built and rigged in three.js.
Which gauge would you add to the panel?
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
Related posts
I Designed a custom skin for the Video.js v10 player.
In Video.js v10, a skin is the player’s interface: the UI components plus the styles that present them. Video.js is open source and community-driven, and the player can end up on almost any website, so every skin makes a choice: how much personality it has, how well it fits into someone else’s design, and how far it pushes the controls. This was all incorporated into the design from scratch. The built-in v10 skins show this range. Creativity and mastery are incorporated to produce something nice and pleasant.
videojs.org
Video.js | Open Source Video Player
The open-source video player for React and HTML. Lightweight, accessible components built for performance and streaming.
FIELDNOTE
An original Video.js v10 skin for slow observation. FIELDNOTE treats video as a field journal rather than a distraction engine: warm paper, forest-green controls and an instrument-like timeline frame an original procedural landscape. A solid control surface keeps contrast independent of the footage; responsive controls, visible keyboard focus and a night palette support quieter viewing.
Built with @videojs/html 10.3.0. AI-assisted design and implementation. Original generated demo footage and a quiet generated test tone; no borrowed footage, external fonts or analytics. Original code and generated assets released under Apache License 2.0.
Try the working player: https://velvety-fairy-3d7335.netlify.app/
Darkroom, a Video.js v10 skin that develops your video like 35 mm film.
Darkroom turns the Video.js v10 player into a roll of 35 mm film. The scrubber is the strip itself: four perforations to a frame, chapters spliced on frame lines, and every frame you have watched develops into an orange negative printed from the video's own storyboard. Hover a frame and it flips to a positive, with a contact print above it naming the frame and time. The readout is a darkroom timer instead of a timestamp: a camera counter that starts at S, ticks through 36 exposures and ends at 36 END, where a Roll complete card rewinds the strip in steps.
Safelight red is kept for focus rings, the exposure lamp and active states. Everything else is paper on a grain textured panel that holds 11:1 contrast over white footage, so the controls stay readable over any video. The icons are a custom family drawn for the concept: a viewfinder for fullscreen, an aperture for settings, a rewind crank for restart.
It is fully keyboard operable with visible focus everywhere, 44 px touch targets, reduced motion support, forced colors support, and a responsive layout tested from 240 px to fullscreen in Chrome, Safari and Firefox. The showcase page lets you switch between dark and bright footage and between 16:9 and 9:16.
That film-strip scrubber is clever.