Composable Video Player
1. Qualities, subtitles, thumbnails
[360p]…,[720p]… + subtitle (VTT + SRT) + sprite thumbnails. Settings menu, hotkeys, memory.
2. Audio tracks
{English}…;{Russian}… — separate files per language (440 Hz vs 660 Hz tone).
3. HLS
Adaptive stream via lazily loaded hls.js (native in Safari). Qualities come from the manifest, with “Auto”.
4. Playlist with folders
JSON playlist URL, panel open, autonext, prev/next buttons.
5. Extensibility: custom plugin, custom layout, theme
A plugin registers a skip10 component; the layout is a modified copy of defaultLayout; an action string api:seek,-10 drives a text button.
6. Fallback and errors
Left: missing.mp4 or video-360 (falls back). Right: a missing file (error overlay with retry).
7. Layout gallery
Four interfaces over the same core — each is just a different layout tree (see demo/customization.ts).
Minimal — play, timeline, fullscreen
Mobile — centered −10 / play / +10, settings top-right
Classic — always-visible solid bar, {time} text templates
Headless — layout: false, page buttons call player.api()
8. Theme builder
Theme options are CSS variables on .vp-root, so they can change live without recreating the player. Copy the generated object into createPlayer({ theme }).
9. Example plugins: timecodes and share with a timestamp
Both live in demo/plugins/ and use only the public API. Timecodes: timecodes option in YouTube description format →
gaps on the timeline, chapter name on hover and in the toolbar, a “Chapters” submenu in settings. Share: the arrow button opens a panel with
the link and “Start at 0:12”; opening ?t=16 starts this player at 0:16.