Video.js skin
Layered Plywood
No video loaded
Captions are on. Keys: Space plays and pauses, M mutes, C toggles captions, F goes fullscreen, arrows seek and set volume.
Notes
- Idea
- Birch plywood for a woodworking school's lesson videos: the seek is a grooved birch board with its laminations showing along the edge, the volume a short board of the same wood, a wooden peg rides in each groove, and the glyphs are walnut inlay. Drag a peg and it dips at each stop it passes, like a jig with soft detents.
- Accessibility
- A plain dark scrim under the rows keeps the light time above 6:1 even over a pure white frame, the walnut glyphs are inlaid in opaque birch so no frame shows through them, captions on adds a birch bar under the disc while captions off dims it, and the focus ring is light with a dark gap so it shows on the wood and on footage. The detents are only a 3px dip of the peg at the true position: nothing snaps, the slider's value, keys and screen reader output stay exactly Video.js's own, and with reduced motion the peg does not dip at all.
- Craft
- The detent is pure CSS math on the slider's own fill value: the peg's offset from the nearest stop comes from round(), and its dip is clamped to zero away from a stop, so there is no script and no timer; the wood is the generated art, the walnut fill clipped to the groove so the birch and plies always come from one board, and the peg's travel ends where the board's ends start to round, so it always stands on the straight run.