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
I made a skin that treats the video player like an instrument.
It's a Teenage Engineering pocket sampler, a pale plastic deck bolted over the video with one orange key for the transport, like RECORD. One short row, hard shadow instead of glass or glow.
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
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.
Aura — a Video.js 10 skin where the player takes its colour from the video itself in real time. An ambient accent and soft glow are sampled live from the frame, so the chrome feels alive and part of the film. A glass control bar and a cinema mode keep all focus on the film. Built for anyone who wants a video player that feels part of the film, not a frame around it.
Spectrum Reel is a Video.js 10 skin built from a scan of the film it plays. The seek bar borrows the old movie-barcode idea and makes it the timeline: not one colour per scene but every frame, eight a second, squeezed into a column and cut into scenes at the hard cuts, so you can see the aurora or the desert and jump straight there (click, [ and ], or the Scenes menu). Instead of one gradient over every frame, each row of controls gets its own backing for the picture behind it: a thin shade over a dark horizon, a paper chip over cloud or a lit city. That map is made once per video by a small script, so nothing reads the video during playback, and without it the skin falls back to a plain scrim. Footage: NASA ISS time-lapses (public domain in the US), streamed from Mux.
