Data Display

Video Player

Native video wrapped in token-styled custom controls: seek, volume, playback speed, and fullscreen.

Import

tsx

import { VideoPlayer } from "@cronus-ui/ui";

bash

npx cronus-ui add video-player

Examples

Default

A token-styled wrapper around the native `<video>` element with custom controls: play/pause, a seek slider, volume, playback speed, and fullscreen. Controls fade in on hover or keyboard focus and stay visible while paused. Captions are your data: pass a `<track kind="captions">` child — here a tiny inline WebVTT stub.

0:00 / 0:00

tsx

<VideoPlayer
  src="https://media.w3.org/2010/05/sintel/trailer.mp4"
  poster="https://media.w3.org/2010/05/sintel/poster.png"
>
  <track
    kind="captions"
    src="data:text/vtt,WEBVTT%0A%0A00:00.000%20--%3E%2000:04.000%0AWind%20howls%20across%20a%20snowy%20mountain%20pass."
    srcLang="en"
    label="English"
    default
  />
</VideoPlayer>

Aspect ratios

`aspect` locks the frame to 16:9 (`video`), 1:1 (`square`), or 21:9 (`wide`), so the layout stays stable before metadata loads.

0:00 / 0:00

tsx

<div className="flex w-full flex-col gap-4">
  <VideoPlayer
    src="https://media.w3.org/2010/05/sintel/trailer.mp4"
    poster="https://media.w3.org/2010/05/sintel/poster.png"
    aspect="wide"
  />
  <VideoPlayer
    src="https://media.w3.org/2010/05/sintel/trailer.mp4"
    poster="https://media.w3.org/2010/05/sintel/poster.png"
    aspect="square"
    className="mx-auto max-w-xs"
  />
</div>

Localized labels

Every control name is overridable through `labels`, so assistive tech announces the app's language — here pt-BR. `muted` and `loop` suit ambient background clips.

0:00 / 0:00

tsx

<VideoPlayer
  src="https://media.w3.org/2010/05/sintel/trailer.mp4"
  poster="https://media.w3.org/2010/05/sintel/poster.png"
  muted
  loop
  labels={{
    play: "Reproduzir",
    pause: "Pausar",
    mute: "Silenciar",
    unmute: "Ativar som",
    seek: "Avançar",
    volume: "Volume",
    settings: "Velocidade",
    fullscreen: "Tela cheia",
  }}
/>

API Reference

Generated from the component's exported types.

VideoPlayerProps

Extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof videoPlayerVariants>

Prop	Type	Default	Description
`src`*	`string`	—	Video source URL.
`poster`	`string`	—	Preview image shown before the first frame is available.
`autoPlay`	`boolean`	`false`	Starts playback automatically once the media can play.
`loop`	`boolean`	`false`	Restarts playback from the beginning when the video ends.
`muted`	`boolean`	`false`	Starts with the audio muted.
`aspect`	`"video" \| "square" \| "wide"`	`"video"`	Frame aspect ratio: 16:9 (`"video"`), 1:1 (`"square"`) or 21:9 (`"wide"`).
`labels`	`Partial<VideoPlayerLabels>`	—	Control-label overrides for i18n. Every label defaults to English.
`videoRef`	`Ref<HTMLVideoElement>`	—	Ref to the underlying `<video>` element, for imperative control.
`children`	`ReactNode`	—	Extra media children, e.g. a captions `<track>` or additional `<source>` elements.