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
Submitted #Video.js Project A dark, glassmorphic Video.js v10 skin. The control bar is a frosted-glass strip that floats over the footage, so it stays legible over both bright and dark video. A violet-to-magenta gradient fills the progress bar and the scrubber glows, giving the se.
https://contra.com/community/oKoTUrLz
contra.com
Dark Glassmorphic Video.js Skin with Mux Video Support
A dark, glassmorphic Video.js v10 skin. The control bar is a frosted-glass strip that floats over the footage, so it stays legible over both bright and dark video. A violet-to-magenta gradient fills…
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 made a Game Skin for Video.js v10. Kindly like and Upgoat!
It’s for Blockworks, a hub for Roblox builders, so watching their clips should feel like you’re part of the game world. The buttons press like a controller, pausing opens a game menu, you earn trophies for finding the controls, and the progress bar is a snake that blinks, flicks its tongue and turns to look at you.
It has a dedicated design for both desktop and mobile view, and it still does everything a normal video player does: play, seek, volume, speed, quality, captions, picture-in-picture and full screen. It even works with a keyboard alone.
Try it: blockworks-pi.vercel.app
My entry for the #VideojsSkinsChallenge
This is An inpspering Idea, Great work 🫡
Here’s my Video.js skin submission! I imagined what it would be like watching a video in a spacecraft from the future and left behind the conventional layout of the controls. What do we think?
LINE 10: every control is a sign.
The first films were phantom rides. Someone bolted a camera to the front of a streetcar and let it roll. So I built a Video.js v10 skin like the line they rode.
The seek bar is the line diagram and chapters are stations. Hover it and you get a station sign with a preview frame. The clock is a split-flap board where only the changed digits flip. An LED strip tells you what the player is doing: Ready to depart, In service, Holding at platform, Quiet carriage when muted. The destination blind reads "towards Ferry Building" from the last chapter, so you know where the video ends before you press play. [ and ] jump between stops.
Why transit signs? They're read at a glance by everyone, in any light, while things move behind them. That's the job of player controls too, so accessibility is the idea, not an afterthought: one focus ring that shows over any frame, solid plates with strong contrast, full keyboard use, calmer motion on request, and six languages including Arabic with mirrored controls.
The demo is A Trip Down Market Street (1906) with an original piano score, hosted on Mux. Source: https://github.com/haruu99/line-10
Great work