Preview
Video / Audio Preview
Render video and audio with the browser's native controls. The browser handles streaming — the previewer just provides a frame around it.
Video extensions: mp4, webm, mov, m4v
Audio extensions: mp3, wav, ogg, flac, m4a, aac
Loading strategy
<video src={url} controls preload="metadata" />
{/* or */}
<audio src={url} controls preload="metadata" />preload="metadata" is the key choice: the browser fetches just enough to know the duration and codec, then waits for the user to press play. This means a 30 GB video previews in a few hundred KB until interacted with.
Once playback starts, the browser issues progressive Range requests to stream the file. We do not interpose — there is no JS decode pipeline.
No internal size enforcement
Because video and audio stream natively, there is no equivalent to the image hard-limit. A 50 GB video tile is fine; only the bytes the user actually plays through are downloaded.
This means the imageMaxBytes / *MaxBytes limits in PreviewLimits are not consulted for video/audio.
HLS / DASH
Adaptive streams (.m3u8, .mpd) are not handled by <FilePreview> — those need a player like hls.js or dash.js. Use the timeline system's VideoPlayer view for HLS, which integrates hls.js and the timeline clock.
<FilePreview> covers progressive containers only (mp4, webm, mov, etc.) — files the browser can play with a single <video> tag.
Codec support
Codec support is the browser's. Common matrix:
- H.264 in MP4 — universal.
- VP9 in WebM — Chromium, Firefox; Safari with hardware support.
- AV1 — recent Chromium/Firefox/Safari.
- HEVC (H.265) — Safari only without flags.
If a file fails to play, the <video> element's error event fires and the previewer surfaces an error card with a download fallback.
Live demo
import { FilePreview } from '@vuer-ai/vuer-m3u/preview'
export function MyComponent() {
return (
<>
<FilePreview url="/media/sample.mp4" />
<FilePreview url="/media/sample.mp3" />
</>
)
}