[dskripchenko]

Dependency-free media players on the native <video> / <audio> elements, plus a lazily loaded HLS entry.

What's inside

• useMediaController: the core both players share. It keeps a normalised reactive state and offers play/pause/seek/skip, volume, mute, rate, full screen (with the iOS webkitEnterFullscreen fallback) and picture-in-picture (standard API or Safari's presentation mode). It also has the hotkey map, allows one active player per page (with an exclusive opt-out) and resumes from a saved position (resumeKey). Errors come as readable, localised kinds, and a 404 is reported as a network error rather than "unsupported format".
• UidVideo:
  • src/sources with fallback; labelled sources form the quality menu.
  • Scrub bar with buffered ranges, chapter gaps and a hover preview showing time, chapter and sprite thumbnail.
  • Subtitles and captions drawn by the player.
  • Speed, quality and captions menus rendered inside the player, so they work in full screen. Two groups sit side by side, and in a small player the menu becomes a sheet.
  • Touch: double-tap seeks, and the centre button toggles play/pause.
  • Controls hide automatically; reduced motion is respected; ARIA throughout.
• UidAudio:
  • Compact row, plus a mini variant for table rows.
  • Waveform decoded in the browser: low sample-rate decodeAudioData, peaks computed in chunks with idle yields, cached per src, decoded one file at a time and only when near the viewport, with size and duration caps. Precomputed peaks are also accepted.
  • Playlist with prev/next, auto-advance and Media Session.
  • Narrow containers get a two-line layout.
• @dskripchenko/ui/hls (separate entry, loaded with a dynamic import):
  • Native HLS where the browser has it; otherwise MSE.
  • Master and media playlists, fMP4/CMAF with EXT-X-MAP and byte ranges.
  • MPEG-TS → fMP4 transmuxer: PAT/PMT/PES demux, H.264 Annex-B → AVCC with avcC built from SPS/PPS, ADTS → raw AAC with esds, timestamps kept continuous across 33-bit wrap and discontinuities. Other containers can plug in their own converter.
  • AES-128 decryption via WebCrypto.
  • Live playlists with reload and sliding window, discontinuities, buffer-ahead and eviction, gap jumping.
  • ABR from an EWMA bandwidth estimate, capped to the player size, with manual level selection.
  • Retries with backoff.
• en/ru locale bag media, docs docs/{en,ru,de,zh}/{video,audio}.md (with a formats table and HLS notes), stories, a changeset (minor).

Checks

• Vitest covers mediaUtils (VTT, thumbnails, sources), waveform downsampling, the controller, playlist parsing, ABR, the mp4 reader, the TS demuxer/transmuxer (on a real ffmpeg TS fixture), and UidVideo/UidAudio behaviour.
• Real-browser matrix: pnpm media:fixtures && PLAYWRIGHT=… pnpm media:check (Playwright with ffmpeg-generated fixtures). All 24 checks pass in Chromium 156, Chrome 156 and WebKit 27:
  • MP4 and WebM playback, seeking, volume, rate, captions, chapters, thumbnails, hotkeys.
  • Source fallback, the progressive quality switch, and errors for broken and missing files.
  • HLS fMP4 and MPEG-TS, both native and through MSE, including the 360p↔720p switch.
  • AES-128, a discontinuity, live TS and live fMP4.
  • Five audio formats with the waveform, the exclusive player, and the playlist.
• Firefox could not be launched in the local environment, so it is untested.

Sizes

• dist/index.mjs grows by +60 KB raw (+15.4 KB min+gzip). The components are tree-shakeable.
• dist/hls/index.mjs is 40.8 KB raw, 31.6 KB min, 11.7 KB min+gzip. It is loaded only when an HLS source appears.

Not included

SAMPLE-AES/DRM, HEVC/MP3 inside MPEG-TS, alternate audio renditions (EXT-X-MEDIA TYPE=AUDIO with a URI), LL-HLS parts, HLS in UidAudio.

🤖 Generated with Claude Code