Director's Monitor is my entry

Director's Monitor is my entry for the Video.js Skins Design Challenge: a Video.js v10 skin that turns the player into the on-set field monitor a director judges a take on.

The picture always wins. Controls sit on small opaque OSD plates instead of full-width gradients, so the frame stays clean and every label stays readable over overexposed whites, night blacks and colour bars. The details come straight from the camera: a REC / STBY / END tally, SMPTE timecode that counts every frame, crop marks, 2.39:1 frame guides on the G key, an edit-ruler timeline with chapters, a segmented audio meter for volume, and a NO SIGNAL error state over bars.

One colour rule keeps it calm: amber means on, and red is reserved for REC and mute. Every control works from the keyboard with a visible focus ring, touch targets grow to 44 px on phones, and motion stops under reduced motion.

The demo film, "Take 1", was made for the skin and is hosted on Mux. It alternates bright and dark scenes to prove the OSD holds up, with captions, chapters and a 24 fps cut the timecode counts frame for frame.

Live: https://directors-monitor.vercel.app Mux playback ID: 01W93wbTkYDNrO4bcZz01e3kl00FB01okOmc4p02NosFfpmg

Design and build: Jander Hoffmann · Method: AION Creative Studio OS