Copy this complete component into a page file. Edit and run it in the Playground.
Loading editor…
Custom HTML video player styled with Opus chrome: play/pause, playlist previous/next, scrubber, mute, volume, share/cast, fullscreen, and optional route-persistent mini-player playback.
Mount PersistentVideoPlayerProvider once in the application layout, outside the segment that changes during navigation. Render PersistentVideoPlayer where the inline player belongs. After playback starts, navigating away keeps the same media element alive and docks it at the bottom right. Returning to the route restores it to its inline anchor.
| Prop | Type | Default | Description |
|---|---|---|---|
tracks | VideoTrack[] | — | Preferred playlist API (src, title, optional previewTime). |
src | string | — | Single-video fallback when tracks is omitted. |
title | string | "Video" | Label for the single-video fallback. |
initialIndex | number | 0 | Starting track index. |
autoPlay | boolean | false | Start playback automatically. |
loop | boolean | false | Loop the current track. |
loopPlaylist | boolean | true | Wrap previous/next and advance past the last track. |
muted | boolean | false | Start muted. |
showTitle | boolean | true | Show the title row. |
onPlayingChange | (playing: boolean) => void | — | Reports play and pause state. |
