Video.js v10 skin · Sheet 01

Blueprint

A video player drawn like a technical drawing: the timeline is a dimension line, the scrubber is a registration target, the time and speed sit in title-block cells. Navy sheet, cyan linework, one redline accent.

Test over

01 · Concept

Players usually hide their engineering. Blueprint shows it. Every control is drawn in the language of a drafting sheet, so the player feels precise and calm instead of glossy.

02 · Details

  • Timeline as a dimension line, with arrowheads, extension lines and tick marks every 10%.
  • Scrubber as a crosshair target; hovering draws a leader line up to a time callout.
  • Corner registration marks and a drawing-number tag frame the picture.
  • Playback speed reads as the drawing's scale, 1:1.5.

03 · Usable for everyone

  • Solid panels with a scrim stay readable over bright and dark footage.
  • Keyboard: Space/K, J/L, arrows, M, F, C, I, 0–9. One visible focus ring everywhere.
  • 44px targets and a 32px-tall timeline hit area for thumbs.
  • Container queries for small players; motion collapses with reduced motion; forced-colours support.