Listen
Two tones
Transcript
An eight-second sequence of alternating low and high tones. No speech.
Media player
Connects native audio or video to playback, seeking, captions, speed, volume, and full screen.
Preview
Audio preview
In action
When to use
Use it for
- Playing an actual audio or video source with consistent controls.
- Media with captions and a supplied text transcript.
Not for
- DRM, adaptive streaming protocols, or a video editing timeline.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { MediaPlayer } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/media-player.
2. Vendor the source
npx @noorddev/vlak-cli add media-player
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/media-player.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { MediaPlayer } from "@noorddev/vlak-react";
<MediaPlayer src="/film.mp4" title="A closer look" tracks={[{ src: "/film-en.vtt", srcLang: "en", label: "English", default: true }]} transcript={<p>A text transcript of the film.</p>} />Props
MediaPlayer
Native media with Vlak transport, seeking, volume, captions, and recoverable loading errors.
| Prop | Type | Default | Description |
|---|---|---|---|
srcrequired | string | ||
titlerequired | string | ||
kind | "audio" | "video" | "video" | |
poster | string | ||
preload | "none" | "metadata" | "auto" | "metadata" | |
tracks | readonly MediaTrack[] | [] | |
transcript | ReactNode | ||
onPlayingChange | (playing: boolean) => void | ||
onTimeChange | (seconds: number) => void |
Also accepts HTMLAttributes<HTMLDivElement>.
Keyboard
| Keys | Does |
|---|---|
| Tab, Shift+Tab | Moves through transport, seeking, volume, speed, captions, and available full-screen actions. |
| Enter, Space | Activates buttons; range and select controls retain native keyboard behavior. |
| Escape | Exits browser full screen. |
Accessibility
- Native controls remain available before hydration.
- Supply caption tracks for spoken video and a transcript where appropriate.
- Load and play failures are announced; retry preserves access to the player.
- Full screen is shown only when the browser supplies the API.
Markup
<div class="rs-media-player" role="region" aria-label="Film"><h3 class="rs-media-player-title">Film</h3><video class="rs-media-player-media" controls aria-label="Film"><track kind="captions" src="captions.vtt" srclang="en" label="English" /></video></div>
Classes
.rs-media-player.rs-media-player-media.rs-media-player-title.rs-media-player-controls.rs-media-player-action.rs-media-player-volume.rs-media-player-status.rs-media-player-transcript.rs-media-player-summary