Media Player
Video and audio: custom controls, captions, PiP, fullscreen, waveform. Pro · Content and social › Media
Video and audio player with custom controls, captions, keyboard shortcuts and an audio waveform.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add media-playernpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { MediaPlayer } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
src * | string | Media URL: a file, a blob: URL or anything the browser plays natively. | |
type | string | MIME type of src, e.g. "video/webm". | |
variant | 'video' | 'audio' | 'video' | video overlays controls on the picture; audio is a compact card with a waveform. Default video. |
poster | string | Image shown before playback (video). | |
title | ReactNode | Video: shown over the picture with the controls. Audio: the track name. | |
artist | ReactNode | Audio: artist or show under the title. | |
artwork | ReactNode | Audio: cover art, e.g. an <img>. | |
tracks | MediaPlayerTrack[] | [] | WebVTT caption tracks; the first default one (or the first) is used by the captions button. |
autoPlay | boolean | Start playing as soon as possible (browsers allow it only when muted). | |
loop | boolean | Start over at the end. | |
defaultMuted | boolean | false | Start muted (needed for autoplay in most browsers). |
preload | 'none' | 'metadata' | 'auto' | 'metadata' | How much to load before playback. Default metadata (duration and first frame). |
crossOrigin | 'anonymous' | 'use-credentials' | CORS mode for media on another origin; needed there for the computed waveform and captions. | |
playbackRates | number[] | [0.5, 0.75, 1, 1.25, 1.5, 2] | Speeds in the speed menu. Default 0.5–2. |
peaks | number[] | Audio waveform, values 0–1. Default: computed from the audio (needs a same-origin or CORS-enabled src) once playback starts, or on mount with preload="auto"; files over 20 MB keep a plain track. | |
aspectRatio | string | '16 / 9' | Video frame ratio before the media loads, e.g. "16 / 9". Default 16 / 9. |
skipSeconds | number | Seconds moved by the skip buttons, J/L and the scrubber's Page keys. Default 10 (video), 15 (audio). | |
mediaRef | Ref<HTMLVideoElement | HTMLAudioElement> | The underlying <video> or <audio> element. | |
locale | string | BCP 47 locale for the speed labels. Default: the ThemeProvider locale, then the browser's. | |
labels | Partial<MediaPlayerLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Media Gallery — Image gallery
- Article Header — Article header: section, headline, lede, authors and date
- Byline — Byline: authors, published and updated dates, reading time
- Article Figure — Image with caption and photo credit
- Pull Quote — Pull quote with attribution
- Key Points — “Key points” summary block
- Editor Note — Update, correction, disclosure and sponsored-content notes
- Article Toc — Article table of contents that tracks the current section
- Reading Progress — Reading progress bar
- Share Bar — Share: Telegram, VK, X, WhatsApp, email and copy link
- Author Bio — Author card at the end of an article, with a follow button
- Article Card — News card: vertical, horizontal and over a photo
Previous: Media Gallery · Next: Tier List · All Content and social