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
Prime Video shows you who’s on screen with X-Ray. Netflix lets you save and share a favorite clip with Moments. Apple TV shows you who’s in a scene and what song is playing with InSight.
But what if a character makes a surprising choice near the end, and you want to see how they got there? I wanted a way to watch their scenes in order without dragging through the whole timeline to find each one.
So I built Semantic Scrubbing, a custom Video.js v10 skin that lets you follow a person, object, or type of scene through a film. In the demo, you can watch the character’s appearances in order or watch the tagged shots of Earth from orbit. When you find the moment you were looking for, choose Full Film and keep watching from right there.
Built for the Contra × Mux Video.js Skins Design Challenge. Try it at https://semantic.iexperimentwithai.com/.
Footage from An Ocean in Bloom by NASA’s Goddard Space Flight Center.
Following a character back through the film is a great feature idea.
Jay, returning to the full film from a character's scene is a clever detail. Curious what you think of my SIGHTLINE player: https://contra.com/community/UTpczOTl-sightline-video-player-with-practice-controls
contra.com
SIGHTLINE: Video Player with Practice Controls and Chapter Rails
Never Cover the Moment A player that gets out of the way when you watch, and helps you master what you see. The picture is the point. Controls layered over footage can hide the detail you…
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’m picky about video players. Give me controls I can find without thinking, a timeline that’s easy to scrub, and enough room for the picture. That’s where All Terrain, my entry for the Video.js Skins Design Challenge, started.
The woods came later. I wanted to see how a minimal player would feel in a setting with a strong character of its own. Smoked glass and muted brass felt right against the woodland footage, and the controls stayed simple enough that I could imagine using the same skin on a portfolio or a film journal.
Both films stream through Mux, and I made a little rookie showcase video to give you a closer look at the desktop and mobile layouts, theater mode, and playback settings.
Public Mux playback IDs
The beauty of still frames by Pepijn Janssen — kDA2CntengmWSO2lKDMb01ZNj2FyyApJwCaE00WR6nWeg
Green by GawxArt — xHdOULPcXIZZaLIaLONfjOWigMq2wdP7thAbgw3EEjQ If you give it a spin, I’d love to hear what feels intuitive and what takes a second to find.
#VideoJSSkinsChallenge #VideoJS #Mux #Contra
Picky about players is the right starting point. Woodland vibe on top of solid basics, nice.
Plate is an HTML skin for Video.js 10. It draws the player the way quickflow.dev draws everything else: a numbered head with a status word, the picture framed by corner marks, a chapter index beside it, a ruler for a timeline and text keys underneath. A player is a diagram of a video's time, so I drew it like one.
What it does
Every chapter cue gets a button in the index, with its own frame from Mux's storyboard. Video.js has no chapter navigation control yet, so a small custom element reads the cues from the player store. Below 760px the index turns into a strip that scrolls with the video.
The time slider is a ruler, with a numbered mark where each chapter starts.
The keys are words you can read. Speed, Quality, Captions and Audio open Video.js menus. Space, K, M, the arrows, J and L, 0 to 9, < and >, F, C and I all work from the keyboard, and every control shows a focus ring.
In fullscreen the picture goes edge to edge, the controls fade while it plays, and an Index key opens the chapters as a side panel.
It comes in three themes (Night, Blueprint, Signal), takes your colours, fonts and corners through public custom properties, and speaks seven languages: English, German, French, Spanish, Romanian, Russian and Arabic, right to left included. It follows reduced motion, higher contrast, reduced transparency and forced colors.
The workbench at plate.quickflow.dev lets you try it on your own video, change every property, watch contrast and control names in a live accessibility readout, and download the CSS for your theme.
Plate plays the showreel on quickflow.dev. The code is open source under Apache 2.0.
does the chapter index stay visible in fullscreen or does it tuck away?
ORBITAL treats the player as a flight log laid over the film. Chapter marks stay fixed on the tape, and the disc at the play-head changes to the mark of the chapter you are in, so progress reads as a place in the mission rather than a plain bar.
When said film is paused, you can see whether it was/or wasn't bookmarked. One red line shows what has already been watched. The rest of the chrome is paper on ink, quiet enough to sit on someone else’s site. It plays Apollo 14 from Mux, and keyboard, captions, reduced motion, and the player’s own width all stay in place.
