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
WAYLINE — A Cinematic, Accessible Video.js Experience
WAYLINE transforms a standard video player into an immersive, journey-inspired viewing experience.
Built with Video.js v10 and Mux: chapters become stations on a route map, and captions become a searchable transcript you can jump through.
What's inside
Route-map chapters: ride from stop to stop, with a live "you are here" marker
Searchable captions: find any line and jump straight to it
Full keyboard control: play/pause, 5s/10s seeks, previous/next stop, captions, speed, mute, fullscreen
Dark-blue and yellow transit identity, built to stay readable and accessible
Try it live: https://wayline-theta.vercel.app
Mux playback ID: xKST01YSI9olK0076xYC1wEGOVEiDYQD5RXy76IjyTdmI
#videojsskinschallenge
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’m picky about video players. Give me controls I can find without thinking, a timeline that’s easy to scrub, and enough room for the picture. That’s where All Terrain, my entry for the Video.js Skins Design Challenge, started.
The woods came later. I wanted to see how a minimal player would feel in a setting with a strong character of its own. Smoked glass and muted brass felt right against the woodland footage, and the controls stayed simple enough that I could imagine using the same skin on a portfolio or a film journal.
Both films stream through Mux, and I made a little rookie showcase video to give you a closer look at the desktop and mobile layouts, theater mode, and playback settings.
Public Mux playback IDs
The beauty of still frames by Pepijn Janssen — kDA2CntengmWSO2lKDMb01ZNj2FyyApJwCaE00WR6nWeg
Green by GawxArt — xHdOULPcXIZZaLIaLONfjOWigMq2wdP7thAbgw3EEjQ If you give it a spin, I’d love to hear what feels intuitive and what takes a second to find.
#VideoJSSkinsChallenge #VideoJS #Mux #Contra
Picky about players is the right starting point. Woodland vibe on top of solid basics, nice.
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
Phantom rides as the origin story is such a good reference. A line diagram as the seek bar fits perfectly.
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 seek line a "live" feel. The big play button is a deep violet circle. All five essential controls are present and keyboard-reachable with visible focus outlines, and the bar reflows cleanly from desktop down to a phone-width player. The video is hosted on Mux.🙌
