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
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.
The playhead disc changing to the chapter mark is a smart detail. Progress as a place in the mission, nice.
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?
Rikshaw - Chittagong Edition
Wheel=Play, Chain=Progress, Bell=Volume, Mirror=Fullscreen.
Pure CSS, Video.js 8, responsive.
#videojsskinschallenge
Wheel for play, chain for progress, bell for volume, mirror for fullscreen. So clever.