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",
  }}
/>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component VideoPlayerDefault layout:inline style:video-player {
  aria-label:"Launch video"
  label "Launch video"
}

page "/audit/video-player/default" type:custom {
  use VideoPlayerDefault
}

API Reference

Generated from the component's exported types.

VideoPlayerLabels

Prop	Type	Default	Description
`play`*	`string`	—	Accessible name for the play buttons (center overlay + control bar).
`pause`*	`string`	—	Accessible name for the pause button.
`mute`*	`string`	—	Accessible name for the mute button while audio is audible.
`unmute`*	`string`	—	Accessible name for the unmute button while audio is muted.
`seek`*	`string`	—	Accessible name for the seek slider.
`volume`*	`string`	—	Accessible name for the volume slider.
`settings`*	`string`	—	Accessible name for the playback-rate cycle button.
`fullscreen`*	`string`	—	Accessible name for the fullscreen button while windowed.
`exitFullscreen`*	`string`	—	Accessible name for the fullscreen button while fullscreen.

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.
`asChild`	`boolean`	—	Render as the child element via Slot.
`className`	`string`	—	Additional class names merged onto the root.
`id`	`string`	—	DOM id of the root element.