Media Player

Видео и аудио: свои контролы, субтитры, PiP, полный экран, волна. Pro · Контент и соцсети › Медиа

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add media-player

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { MediaPlayer } from 'valyro-ui-pro';

Пропсы

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.

Media Player

Установка

Пропсы

Похожие компоненты