Cinematic Obsidian Video Player with Mux HLS Streaming

Cinematic Obsidian Video Player with Mux HLS StreamingCinematic Obsidian Video Player with Mux HLS Streaming

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

Md Asikur Rahman

• Nov 9

Project AURA — Cinematic Obsidian Video Player

Designed and built a custom cinematic web player experience for Project AURA. The application streams high-fidelity video via Mux HLS streaming and features a bespoke, glassmorphic UI overlay on top of Video.js v10.

Key Highlights: • Low-latency HLS video delivery powered by Mux • Modern glassmorphism design with obsidian, cyan, and amber aesthetic accents • Full keyboard accessibility (Space to play/pause, Arrows for seek/volume, M for mute, F for fullscreen) • Responsive across all viewports • Tech Stack: HTML5, CSS3 Glassmorphism, Video.js v10, Mux Video API, Vercel

videojsskinschallenge

Vansita Addanki

pro

• 1d

Lovely glass treatment on the player.

Md Asikur Rahman

• 1d

Thanks! Glad you liked the aesthetic

Anees Khan

• Nov 9

Aura — a Video.js 10 skin where the player takes its colour from the video itself in real time. An ambient accent and soft glow are sampled live from the frame, so the chrome feels alive and part of the film. A glass control bar and a cinema mode keep all focus on the film. Built for anyone who wants a video player that feels part of the film, not a frame around it.

videojsskinschallenge

Suvo

• 2d

I made a skin that treats the video player like an instrument. It's a Teenage Engineering pocket sampler, a pale plastic deck bolted over the video with one orange key for the transport, like RECORD. One short row, hard shadow instead of glass or glow.

videojsskinschallenge

Indrit Lamcaj

• 2d

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.

videojsskinschallenge