Video.js v10 skin
Videowave VJS-10
A video player that works like a microwave. Press Play and wait for the ding.
Everything around the window is a real control. Go ahead, press things.
01 Design notes
Why a microwave
Video player controls still borrow from the VCR. I borrowed mine from an appliance people still use every day, so most of it explains itself. The timer is the seek bar, the power knob is the volume, +30 adds thirty seconds, and the display tells you when it's cooking. The controls live on the appliance instead of floating over the picture, so they stay readable on bright and dark footage alike. The jokes are in the small print. The key labels use Video.js translations, the same ones behind the screen reader names.
02 Operating instructions
What to try
-
12:00
Before the first play the display blinks 12:00, like a microwave you just plugged in.
-
Power level
Drag the knob up or to the right to turn it up. A tap won't make the volume jump; it focuses the knob so the arrow keys can take over.
-
Time cook
Press it, type 1, 3, 0 and hit Start. The video jumps to 1:30.
-
Popcorn
Skips to the next chapter. Video.js doesn't ship a chapter control yet (issue #1873), so this key reads the chapter cues itself.
-
Ding
Let it finish. The window says Ding and you hear three short beeps, unless the player is muted.
-
Timer
The strip under the door is the seek bar, split into chapters, with a thumbnail preview.
03 Control panel reference
Keyboard
| Space or K | play and pause |
|---|---|
| M | mute |
| ← → Left and right arrows | seek |
| ↑ ↓ Up and down arrows | volume |
| F | fullscreen |
| C | captions |
| 0 to 9 | jump to that tenth of the video |
Inside Time cook: digits type, arrows move between keys, Enter starts, Escape closes.
04 Safety information
Accessibility
- Controls sit on solid panels, never over the video.
- Every control works from the keyboard and shows a two-tone focus ring made to show up on glass, aluminium and the accent.
- Key labels use the same Video.js translations as the names a screen reader announces. The skin's own words are translated into German, French, Spanish, Romanian, Russian and Arabic. The jokes stay in English.
- It respects reduced motion, reduced transparency, higher contrast and forced colors, and it works right to left.
- On a phone the panel moves under the door and the keys line up in four columns.
05 Specifications
Built with
- Base
- Started from the Scaffold skin with the Video.js CLI.
- Code
- HTML, CSS and a little TypeScript: a few small custom elements on Video.js UIElement and PlayerController.
- Font
- Inter (OFL).
- Icons
- Phosphor (MIT).
- License
- The skin is licensed Apache 2.0.