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
Loupe: see the whole video, mark what matters, save one page of links.
Every video player already builds a contact sheet. It feeds the tiny thumbnail you see when you hover the seek bar. Some players show you one tile. A few show you a strip of ten. The rest gets thrown away.
Loupe shows all of it.
Open the sheet and the whole video is laid out in front of you. Click any frame to jump there. Mark the frames you want, save your picks, and you get a PDF where every frame is a link that opens the video at that exact moment. Mark six scenes, send one page, and the person on the other end clicks straight into each of them.
The idea comes from the photographer’s contact sheet and the loupe used to read it. Corner marks, mono type, a quiet row of frames under the video, and controls that stay out of the way until you want them.
Built from scratch on Video.js v10 with React. Zero setup: pass a Mux playback ID and the sheet builds itself. Every icon drawn for the skin, no icon library. Full keyboard control, captions, light and dark themes, an optional glass frame, loading, buffering and error states, and support for reduced motion, reduced transparency and increased contrast. Control text measures 15.68:1 in dark and 17.42:1 in light.
Links
Demo: https://loupevideo.com
Docs: https://loupevideo.com/docs
Live on a real site: https://milenawebb.com/#clubtree-video
Source: https://github.com/milenawebb/loupe-skin
Mux playback ID: gBOjab6Gxtqhq5m1OwwgpXBiY2HHp8JcgiogD7I01FEA
Using the contact sheet the player already builds and throws away is a smart insight. Great idea.
I'd happily use a page of clickable frame picks for review notes—much easier to share than a list of timestamps.
Sending one page where every frame is a link is a genuinely new way to share a video — instead of a list of timestamps, you hand someone six moments they can click straight into. And grounding it in the photographer's contact sheet and loupe, with corner marks and mono type,...
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
What if your video player felt more like an audio amp knob and less like clicking a spreadsheet?
Threw my hat into the #videojsskinschallenge with Detent.
Built it to work natively across everything—flick it with your thumb on mobile, drag it with a mouse, or scrub second-by-second using keyboard hotkeys.
Test drive the dial:
Be honest: would you swap the old flat timeline bar for a jog wheel?
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?
Luminary - A Video.JS skin
34 - Skin Styles/ Themes
Let me know your favorite one.
Thank you!
34 styles is wild. Hard to pick a favorite, impressive range.