Video.js skin
Subtitle Stage
No video loaded
Captions are on. Keys: Space plays and pauses, M mutes, C toggles captions, F goes fullscreen, arrows seek and set volume.
Notes
- Idea
- Built for low-vision and near-blind viewers: for them the words are the point, so captions are promoted to the design itself. The caption line is the hero: the player's real caption track, set large in Archivo ExtraBold on one measured dark band just above the controls, while everything else steps back into one quiet bar of smoked glass, its controls scaled up for the same viewers (bigger glyphs, thicker seek and volume lines, a larger play triangle inside the center disc), where the captions chip is the largest button. Turn captions off and the chip goes quiet with them: dimmer, smaller, still there.
- Accessibility
- Stated audience: low-vision and near-blind viewers; that is the design intent, not an accessibility certification. The caption band is a measured near-black at 84% opacity, so the white caption words stay above 12:1 even over a pure white frame, and the bar's smoke at 88% keeps the white glyphs and the tabular time above 13:1 (the grey duration about 7.8:1). Captions are a real WebVTT track that the CC chip and the C key toggle; nothing is burned in. Captions off is shown by the chip's size and brightness, never by hue alone. Every button is 48px or larger (56px at full width), focus is a white ring outside a dark gap, reduced transparency and more contrast make the bar and band solid, and forced colors switch both to system colors with an outline kept on the white glyphs.
- Craft
- Every control is ChatGPT's own art cut from one sheet: the white glyphs, the white CC chip, the fine seek line split at its baked handle into played and unplayed runs, the lone handle, and the smoky disc for the center play, frosted by a blur of the picture behind it. Video.js 10 leaves cue rendering to the browser, and the Mux video element keeps its video in a shadow root that page styles never reach, so a small skin script adopts the caption rules there. The caption rests just above the bar at every width, one line or two, and both handles stay inside their tracks at both ends.