Orbit: a Video.js 10 skin you steer with one thumb

Every player puts its controls in a bar along the bottom. I wanted to see what happens if you drop the bar and use a click wheel instead.

One round control floating over the video, inspired by the iPod media controls and game controllers. Play and pause sit in the middle, with the time under it. Around it are four separate buttons: options on top, skip back and forward on the sides, volume at the bottom. The seek bar wraps around the whole thing, flush with the buttons.

Three things to try → Drag your finger around the ring to scrub. A preview frame from the Mux storyboard follows you around the circle. → Press and hold the volume button, then circle clockwise. It turns up like an iPod wheel. → Hold the skip button. It keeps jumping 10 seconds at a time, faster the longer you hold, and shows the running total (+30s, +60s).

What else it does • Tap the top button and five options fan out above the control: subtitles, settings, cast, picture-in-picture, and full screen. Each opens its own panel upwards, and the control slides down to make room. • Settings lets you change speed and quality, loop the video, pick the control's size, position (centre, bottom, corner) and colour (six colours, white by default). It remembers your choices. • Four films sit on a wheel. Spin the semicircle dial at the bottom of the page, and they swing round with it; then the player picks up the one where the wheel stops. • Light, dark or match-your-system theme for the page. The player stays dark over video in both.

Built for everyone • Every control works from the keyboard, with a visible focus ring (Space, J/L, arrows, M, C, F, P, 0–9, Esc). • Screen readers hear real labels. The seek ring reads as a slider ("1:04 of 14:48"), and holding skip announces one summary: "Skipped forward 30 seconds". • States never rely on colour alone: icons change shape and get a dot when something is on. • Reduced-motion settings switch off the springs, fan-out and wheel animations. • Large touch targets, plus tap and double-tap gestures on phones.

How it was built Orbit is a custom element built on Video.js 10 (@videojs/html 10.3.0). It reads the player store through PlayerController and uses Video.js's own buttons, sliders, gestures, hotkeys, and thumbnails wherever they exist, so labels, keyboard support, and state come for free. The video streams from Mux through the Mux video element, which brings adaptive HLS, Mux posters and thumbnails, and storyboard seek previews. The page itself is built with Vite, Bun, and Tailwind.

The films are Blender open movies (Sintel, Tears of Steel, Big Buck Bunny, Elephants Dream), CC BY.

Live: https://orbit-player-seven.vercel.app Source: https://github.com/dolahimself/orbit-player

Mux public playback IDs Sintel: 31iOy9KXbfCKMwObqF6pWRnFzzCWQ4CquJTuGn02rJFo Tears of Steel: TjHvp7heA4GNlk9nQ0202yFE0052XKl5y015HANsmTWwn600 Big Buck Bunny: duBClVrzbiqDEv00X6UWW3cGy02vF9C02vwPHstZ6dV9v00 Elephants Dream: s6aWm001zQwJIq91cOjnDCo8fMQeHVSRteD5ylWk5RcQ