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
Drift: a Video.js v10 skin where the video is a pond
The video sits in a garden pond. Playing, you only see the film. Pause, and the pond comes to life.
Tap anywhere to play or pause. Double-tap a side to skip 10 seconds.
On pause, a leaf falls onto the water, and four carved stones rise: volume, captions, settings, full screen.
A frog on the timeline follows your drag and hops to where you click.
Settings and captions glow on the water. No boxes.
Day, sunset and night, with fireflies after dark.
Works with the keyboard, 44px buttons on phones, readable over bright scenes.
3D pieces made in Blender.
Live: https://drift-pond.vercel.app. Film: Big Buck Bunny, © Blender Foundation, CC BY 3.0, streamed via Mux.
A leaf falling onto the water on pause is such a calm detail. Beautiful.
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 Designed a custom skin for the Video.js v10 player.
In Video.js v10, a skin is the player’s interface: the UI components plus the styles that present them. Video.js is open source and community-driven, and the player can end up on almost any website, so every skin makes a choice: how much personality it has, how well it fits into someone else’s design, and how far it pushes the controls. This was all incorporated into the design from scratch. The built-in v10 skins show this range. Creativity and mastery are incorporated to produce something nice and pleasant.
videojs.org
Video.js | Open Source Video Player
The open-source video player for React and HTML. Lightweight, accessible components built for performance and streaming.
Please make sure you've shared a public link for us to view your project!
GlowFlow - Premium http://Video.js Skin. I designed a modern player with both Dark Mode and Light Mode. It has a glowing play button, clean progress bar, and easy controls for volume, captions, quality, and fullscreen. It is responsive, accessible, and easy to use on phone and computer.
Something's loading for the #videojsskinschallenge ⏳
We've been rethinking how you move through a video, not just how the controls look.
Live on our site already. Link drops with the reveal 👀
#VideoJS #Mux
Rethinking how you move through a video, not just the look. Curious to see the reveal.