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
Flipbook plays a film the way you'd flip through a book. The seek bar is the book's fore-edge. Drag along it and the pages riffle under your hand, as fast or as slow as you move, and when you let go the film carries on from there.
Everything else grew out of that. Chapters are tabs on the edge of the book. Pausing prints the frame as a page, with the frames around it in the margin. You can dog-ear a moment to come back to, or tear a page out and keep it as a picture. On a phone the controls sit on one pad under your thumb, and a swipe on the picture flips the film.
I wanted it to work for everyone, so every control can be reached from the keyboard, text stays readable over the brightest and darkest frames, and with reduced motion turned on the pages stop moving and simply change.
The film inside is one I made for it, from Eadweard Muybridge's motion photographs of 1878 and 1887.
Riffling pages along the fore-edge to scrub is such a nice idea. Dog-earing a moment, love it.
Muybridge's motion studies fit this idea so well, especially when pausing turns the film back into a printed page.
Tearing a page out and keeping it as a picture is the detail I love most — it treats a moment in a film as something worth keeping, not just passing through. And pausing printing the frame as a page, with the frames around it in the margin, makes every still feel like a page in...
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
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.
NOCTILUCA — an abyssal Video.js v10 skin that turns playback into an expedition. Original bioluminescent jellyfish artwork and a custom 8-second motion study set the scene; spectral cyan and violet controls emerge from a glassy, low-profile rail, then recede so the picture stays in focus. Built from Video.js v10 media components with responsive layout, accessible labels and focus states, keyboard shortcuts (Space, M, F, ←/→), reduced-motion support, seek, time, mute and fullscreen controls. The player is ready to explore at the links below.