Tally, a Video.js 10 skin

The idea

Tally treats the player like the reference monitor in a broadcast gallery. A tally lamp lights red on program while it plays and green on preview when paused. Timecode is burnt in at the clip's own frame rate. The scrubber is drawn from the clip's real audio waveform, so you can see the loud moments before you scrub to them.

Details that do a job

• Solid graphite panels instead of glass, so contrast holds over a white frame or a black one.
• The waveform is a CSS mask, so the slider's own buffer and progress paint through it.
• An editor-style playhead, a skimmer line, and storyboard previews with timecode.
• A ten-segment channel meter for volume. Settings use a selection lamp in place of a check mark.
• Safe-area guides (G) for action safe, title safe and 4:3 protection. Color bars appear behind errors.

Keyboard

Space K

Play or pause

← → J L

Seek

↑ ↓

Volume

M

Mute

F

Fullscreen

C

Captions

G

Safe-area guides

Esc

Close a menu

Accessibility

Text measures at least 4.5:1 and every non-text part at least 3:1 against its panel. Lamp colors always come with a label. Focus shows as a white ring with a dark halo on every key, slider and menu item. Keys are 36px with a mouse and 44px on touch. With reduced motion, nothing slides or scales, and the timecode drops its frame digits while playing.