Video.js skin
Negative Space
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
- The chrome finds the quiet part of the picture. There is no bar, no panel and no gradient, only one short row of glyphs and a full-width seek line. Each time the controls wake, the frame under every allowed place is measured for luminance spread and edge density, and the row appears in the quietest one, in white over dark regions and near-black over bright ones. Captions do the same between the top and bottom thirds. While the controls are on screen nothing moves, so the hand always finds the same row in the same order.
- Accessibility
- Contrast comes from placement and ink instead of from darkening the film: the ink is chosen from the region's measured luminance, and a soft local knockout appears whenever the region is busy or the ink would fall under 4.5:1. If the frame cannot be read, the row sits bottom-left in white on a 55% plate. The seek line is always visible, the time uses tabular figures, every glyph target is 44px or larger, captions off shows the chip at 50% opacity, reduced motion keeps the row bottom-left, reduced transparency and forced colors turn the knockouts into solid plates, and more contrast keeps them on at all times, at 60%.
- Craft
- Every control image is Gemini's art cut from one sheet: white glyphs painted in one exact ink by a single CSS filter, the CC chip with its letters as real see-through holes, the thin line split at its baked dot, and the amber dot itself, the one warm accent, kept for the playhead. The frame is read from a 128 by 72 canvas, only 9216 pixels, when the controls wake and then every 250ms while the video plays or the row is on screen.