01 — Filmstrip
The filmstrip is the video.
A strip of the video’s own frames hangs below the display. Each frame is a key that jumps to that moment. Mux provides the frames.
KON · A skin for Video.js v10
Press and hold a coloured latch, then drag to rearrange.
What makes it different
Seeking gets hardware of its own.
On normal sizes the controls sit beside the picture, so they stay readable over any video. Every player on this page is live.
02 — Jog dial
Turn to find a moment.
On short clips, each dial tick moves 1 second. Longer videos scrub faster. Clockwise is forward in every language. The timeline stays the keyboard control.
03 — Notch
Play, in the corner.
Set play="notch" and play button moves into a notch cut in the screen’s corner, so the playback module is free.
Every page has a different shape. KON fits each one.
Live
Change its shape. Watch it re-dock.
The same player, resized. The deck picks the dock and the size of every key itself.
Shape
Options
Loading the player
<kon-deck arrangement="strip">
Modules
Rearrange it by the latches.
Every module has a coloured latch on its mount. The order you choose is remembered on your device.
- Press and hold a coloured latch, then drag its module.The other modules slide aside and a well shows where it will land.
- Drag it off the deck to take it off.The modules after it close up. Playback and options always stay.
- Put it back from Settings › Modules.Add-ons like cue and chapters attach there too.
- Or use the keys.Focus a latch: ↑ ↓ move it a slot, Delete takes it off.
- Playback
- Wordmark, play
- Skip
- Back 10, forward 10, speed
- Dial
- Jog dial
- Sound
- Mute, volume fader
- Options
- Captions, settings, fullscreen
- Chapters
- Previous, number, next
- Cue
- Frame steps, loop in and out
- Screens
- Picture in picture, AirPlay, Cast
- Live
- Go to live
Light and dark
Off-white, or Graphite.
Graphite, the charcoal edition, follows the page’s colour scheme. Switch this page at the top, or pin a player with one attribute.
color-scheme="light"color-scheme="dark"Accessibility
Works without the mouse, and without the dial.
The dial only adds. The timeline stays the keyboard and screen reader control for seeking.
Keyboard shortcuts
- SpaceK
- Play or pause
- JL
- Back or forward 10 s
- ←→
- Seek
- ↑↓
- Volume
- M
- Mute
- C
- Captions
- F
- Fullscreen
- I
- Picture in picture
- 0–9
- Jump to 0–90%
- <>
- Speed
- ⇧←→
- Previous or next chapter
- ,.
- Step a frame
- []
- Loop in, loop out
- ⇧R
- Loop the video
Press ? on any player on this page for the full sheet.
Captions
The captions key latches down when they’re on, and they have their own style settings.
Reduced motion
With reduced motion set, every duration in the skin collapses through its base tokens.
Contrast and forced colours
Forced colours keep an outline on every control.
One focus ring
A dark line with a light halo, the same on every key, latch and menu row.
Keys that fit a finger
Docked keys start at 32px, with hit areas that reach into the gaps. Compact touch controls expand their caps and spacing for 44px targets.
Use it
Copy one folder, then size the player.
Copy src/ into your project, import the skin, and put your media where the template marks it. The deck does the rest.
player.ts
import '@videojs/html/video/player';
import '@videojs/html/media/mux-video';
import './src/video/skin';
import template from './src/video/skin.html?raw';
const player = document.createElement('video-player');
player.setAttribute('content-title', 'Your title');
player.innerHTML = template.replace(
'<!-- Add a compatible media component here. -->',
'<mux-video src="https://stream.mux.com/YOUR_PLAYBACK_ID.m3u8" playsinline crossorigin></mux-video>'
);| Attribute | What it does | Try it |
|---|---|---|
dock | side or bottom pins the modules to one edge. Left out, the deck picks from the player’s size. | |
side-size | The percent of the width the side rail takes, 5 to 40. | |
bottom-size | The percent of the height the bottom band takes, 5 to 40. | |
play | notch moves play into a notch in the screen’s corner. | |
arrangement | The starting order, and the add-ons to attach: chapters, live, out, cue, strip. | |
exclude | Keeps modules off. Playback and options can’t be excluded. | |
--media-accent-color | Recolours the orange on play, time, tabs and frames. Try it with the accent controls in the live demo. | |
color-scheme | On the player, light or dark pins the edition. |
Try every option.
The workbench sets the player to any shape or exact size, any dock, play position and set of modules, in light or dark.
Try every optionAbout the artwork
How were all these images made in one style?
Every image on this page was made with AI using one saved style, Screentone Vinyl Hero, on StyleRef. Reusing the same style keeps the colours, texture and drawing consistent, so the pictures read as one series.