Turn the dial, press a key, change the finish.
Try it with your own video
You can also drop a video file on the player. It plays only in your browser; nothing is uploaded.
The idea
Most players are a strip of icons on glass. Strata is an object. The picture sits in a recess milled into a block of material, and under it is a deck of keys cut from that same block.
Each key is its own piece of the surface, lifted toward you, so its grain is a little larger than the grain around it, the way something closer looks bigger. Press it and it drops back into its seat and the cut lights up.
The block comes in three finishes: graphite, slate and ebony. The whole player changes with one setting, data-st-finish.
Parts of the block
- 01
Lifted keys
Pieces of the block, each from its own spot of the surface. They sink into their seat when pressed.
- 02
The groove
The timeline is a channel milled into the block, lit along the bottom as the film plays.
- 03
Scene window
Move or drag along the groove and the scene at that point shows in a small window, with the time and the chapter.
- 04
The dial
Volume is a dial cut from the block. Drag it, scroll it or use the arrow keys; it clicks every 10 percent.
- 05
Time window
The time sits behind a small recessed pane, lit in the finish's colour.
- 06
Chapters, stop, frame step
Previous and next jump between chapters. Stop returns to the start. Frame step moves one frame at a time.
- 07
A-B loop
Mark a start and an end and that part plays on repeat, shown as a lit band inside the groove.
- 08
Your own video
Drop in a file or paste a link. If it has no preview stills, the skin makes them from the video.
On a phone
On a small screen the groove runs across the top of the deck and the keys sit under it, each at least 44 px for a thumb. The dial turns with a drag, and phones that allow it feel a short tick at every step.
For everyone
Every control is a real Video.js component or a labelled button, reachable by keyboard and announced to screen readers; the dial is a slider with its value read out. Focus is always visible in the finish's colour. Higher contrast, reduced motion and forced colors are supported, and the skin follows the public Video.js properties such as --media-accent-color and --media-font-family.
- Space / K
- Play, pause
- P / N
- Previous, next chapter
- S
- Stop
- , / .
- One frame back, forward
- A / B
- Loop start, loop end
- ← →
- 5 seconds
- J / L
- 10 seconds
- ↑ ↓
- Volume
- M
- Mute
- C
- Subtitles
- F
- Fullscreen
- I
- Picture in picture