Video.js v10 skin

Video that clicks back.

Detent turns a plain <video> into something you can feel — a jog-dial scrubber with real detents, dials that slide out of the screen edges, and a floating island of controls that vanishes when you don’t need it.

Play with it ↓See shortcuts
Built on Video.js v10Adaptive HLSCaptions & audio tracksTouch & keyboard
02 · Live demo

Go on, touch it.

This is the real player, not a mock-up. Click the video, drag the wheel, hover the screen edges, hit a key.

Click play / pauseDouble-click sides ±10s · centre fullscreenDrag the wheel to scrubHover left / right edge for dialsSpace · F · M · ?Powered by Video.js v10
03 · What it does

Built like hardware. Runs in a browser.

Every control is designed around touch, click and key feel — not just function.

Jog-dial scrub wheel

Turn it like a studio jog dial. Six degrees of rotation is one second of video, with a tick you can feel (and haptics on phones). The ring fills as the film progresses.

Glass chips + half dial

No bar at all: each control is its own glass chip with room around it, so thumbs never hit the wrong one. A half-dial rises from the bottom edge, and everything fades when idle.

Edge dials

Volume and brightness slide out from the screen edges on hover or scroll. On touch, swipe up and down on either side.

−10sdouble-click⏯click+10sdouble-click

Gestures that just work

One click plays or pauses. Double-click the left or right to skip, the middle for fullscreen. Scroll over the picture to seek.

Streams anywhere

Adaptive HLS with automatic MP4 fallback, a buffer-aware progress line, hover time preview, resume-where-you-left-off and an up-next countdown.

Aa

One design language

Sora type, a violet → teal → gold accent, glass surfaces and keycap details. Progress, dials, focus rings and highlights all share the same palette.

Full keyboardARIA slidersCaptionsAudio languagesFocus ringsReduced motion

Accessible by default

Every control is reachable and labelled. Captions, audio-track switching, visible focus and reduced-motion support are built in, not bolted on.

04 · UI + UX

Why it feels better.

Beautiful is easy to screenshot. Detent is designed to be pleasant at the thousandth view.

According to our calculations... you deserve a better video player
20+shortcuts6speeds±10sskips3gestures2edge dials0dead taps

UI

  • Controls get out of the wayThe island fades and shrinks when idle, so the video stays full-bleed.
  • Glass over contentBlur and contrast keep controls legible on bright or dark frames.
  • Tactile feedbackDetent kicks, press states and a play/pause pulse confirm every action.
  • One accent systemViolet, teal and gold tie every control together.

UX

  • Zero learning curveClick, double-click, swipe and scroll behave like the apps you already know.
  • Edge-first progressThe biggest target sits on the screen edge, grows on hover and previews time.
  • It remembers youVolume, speed, brightness and playback position persist.
  • ResilientFallback streams, a spinner, retry and a clear error state.
05 · Shortcuts

Your keyboard is the remote.

Press any key below on your own keyboard and its cap presses down too. Shortcuts work while the player is on screen or fullscreen.

Tip: press ? inside the player for its own cheat sheet.

06 · Design thinking

Designed like an instrument.

What the skin is for, the choices behind it, and what we gave up to get there.

Detent starts from one idea: a video player should feel like a well-made instrument, not a toolbar. Its controls borrow from studio hardware (a jog-dial scrub wheel with a tick for every second, dials that slide out of the screen edges, shortcut keys that press down) and everything sits on dark glass with white icons so it stays readable over bright and dark footage alike. The island of controls fades when you stop touching it, every action works by mouse, touch and keyboard, and hovering any control shows its shortcut. It is built on Video.js v10 components, with the custom controls driving the same media element. We split the controls by how a thumb uses them: the actions you repeat while watching (scrub, ±10s, previous and next) sit in a reachable arc around the bottom dial, while the rarely needed ones (captions, settings, fullscreen) live top-right, away from the thumb, so a stray touch mid-scrub can never trigger them and the middle of the picture stays clear.
This is the short design write-up for the challenge submission.
Layout of the Detent skin A video frame with a volume half-dial on the left edge, a brightness half-dial on the right edge, a floating island of controls with a scrub wheel at the bottom, and a progress line along the bottom edge. 1 2 3 4
  1. 1Volume dial. Slides out when you reach the left edge, scroll, or swipe up and down on touch.
  2. 2Brightness dial. The same gesture on the right edge, so each side has one job.
  3. 3Half dial + glass chips. The scrub wheel rises from the bottom edge, ±10s chips sit apart on each side, and captions, settings and fullscreen float top-right. All translucent and fading when idle.
  4. 4Edge progress line. Always there, grows when you hover it, and gives the biggest seek target on the screen.
01 · CONCEPT

An instrument, not a toolbar

Most skins start from a row of icons. Detent starts from hardware: a jog dial you turn, dials you pull in from the edges, keys that press down. Each control gets one physical metaphor, so it explains itself by looking like the thing it replaces. We split the controls by how a thumb uses them: the actions you repeat while watching (scrub, ±10s, previous and next) sit in a reachable arc around the bottom dial, while the rarely needed ones (captions, settings, fullscreen) live top-right, away from the thumb, so a stray touch mid-scrub can never trigger them and the middle of the picture stays clear.

02 · CONTRAST

Readable before it is pretty

Every control sits on blurred dark glass with white icons, a bright hairline outline and a soft shadow, so legibility never depends on the footage behind it. The style was drawn for bright and dark video alike.

03 · FEEL

Feedback where your hand is

Dials and the wheel step through values with a visible tick, a short haptic pulse on phones, and pressed states on buttons. Then the interface gets out of the way: the island shrinks and fades when idle and only the progress line stays.

04 · INPUT

One intent, every input

Click plays, double-click skips, scroll seeks, swipe adjusts, keys do the rest. Hovering any control shows its shortcut and ? opens a full cheat sheet, so the keyboard is discoverable instead of hidden.

Palette

InkPearlVioletTealGold

Type

Sora throughout: friendly, wide and clear at small sizes. Tabular figures keep the time from jittering.

Trade-offs

  • Dials stay hidden until you reach for them, so the picture stays clean. Mute and the keyboard cover volume meanwhile.
  • Edge-first controls trade a familiar bottom bar for fewer, larger targets.

Visual · 10

One violet, teal and gold language across dials, wheel, focus rings and keycaps.

Usability · 5

Click, double-click, scroll, swipe and keys all work, with the shortcut shown on hover.

Accessibility · 5

ARIA sliders, visible focus, Escape closes menus, larger touch hit areas and reduced-motion support.

Polish · 5

Loading, error and retry states, resume position, up-next, and an MP4 fallback for streams.

Built with Video.js v10 (video-player, media-container, play, mute and fullscreen buttons, time and time slider) · hls.js for adaptive streams · plain HTML, CSS and JavaScript. The custom dials, wheel, speed, captions and gestures drive the same media element.