Video.js v10 skin · HTML + CSS

Projector

A player built like a film gate. The interface is the machine: rails that pull the film, a strip you scrub, a leader that counts you in.

Press play. Then pause and wait a few seconds.

The idea

Most players hide the machine. Projector shows it. Every control borrows a part of a 35 mm projector, so the skin has one clear voice instead of a set of icons.

The film runs between two sprocket rails. While it plays, the holes advance in the projector's own rhythm: three quick steps, then the frame holds still in the gate. Change the speed and the rhythm changes with it.

The personality stays in the frame around the picture. The controls themselves sit on a solid plate, so they stay readable over a snowfield or a night sky, and every animated part goes still when reduced motion is on.

Parts of the machine

  1. 01

    Sprocket rails

    Holes that pull the film in intermittent steps while it plays and stop when it stops.

  2. 02

    Leader

    The big play button is a countdown leader: a crosshair circle with a sweeping hand.

  3. 03

    Film-strip timeline

    Perforated edges and frame lines. The projected part is exposed and bright. Each chapter is its own reel, spliced to the next.

  4. 04

    Gate thumb

    The scrubber is an open frame. Hover the strip for a still in its own little gate with the reel name.

  5. 05

    Frame timecode

    HH:MM:SS:FF at 24 frames a second, the way an editor reads time.

  6. 06

    Speed in fps

    0.75× is 18 fps, 2× is 48 fps. The rails speed up and slow down with it.

  7. 07

    Pull-down start

    Play pulls the first frame into the gate in four jumps and a settle, and the lamp flickers as it catches.

  8. 08

    Film burn

    Hold a frame in front of the lamp too long and it melts. Pause for a few seconds and watch. Play pulls fresh film in.

On a phone

At small sizes the rails get narrower, secondary controls step aside and every target stays at least 44 px for a thumb. Tap to show the controls, double-tap a side to skip 10 seconds.

For everyone

Every control is a real Video.js component, so it is labelled, announced and reachable by keyboard. Focus is always visible and keeps the controls on screen. The skin supports forced colors, higher contrast and reduced motion, and follows the public Video.js properties such as --media-accent-color, --media-font-family and --media-scale-unit.

Space / K
Play, pause
← →
5 seconds
J / L
10 seconds
↑ ↓
Volume
0-9
Jump to 0-90 %
< >
Frame rate
M
Mute
C
Subtitles
F
Fullscreen
I
Picture in picture