Skip to content
FrameworkStyle

LiveVideoSkin

Full live video controls with live-edge state, captions, feedback, and remote playback

Use it for a live stream that needs the full video control set.

Use the packaged preset

import { LiveVideoPlayer, LiveVideoSkin } from '@videojs/react/live-video';
import { HlsVideo } from '@videojs/react/media/hls-video';
import '@videojs/react/live-video/skin.css';

export function Player() {
  return (
    <LiveVideoPlayer>
      <LiveVideoSkin>
        <HlsVideo src="https://example.com/live.m3u8" crossOrigin="anonymous" />
      </LiveVideoSkin>
    </LiveVideoPlayer>
  );
}

Install editable source

Install this Skin and its exact dependencies with Shadcn, or copy the same generated files manually. The Player and media remain package imports.

Add the @videojs namespace for the reacttailwind catalog, then install the editable source.

{
  "registries": {
    "@videojs": "https://shadcn.videojs.org/r/react/{name}.json"
  }
}
pnpm dlx shadcn@latest add @videojs/live-video

Requires `@videojs/react@10.0.0-beta.32`, which is installed with this item.

Customize the skin

Packaged skins support --media-accent-color, --media-accent-text-color,--media-border-radius, and --media-scale-unit. Add your own class name and style values to the skin root.

Use the skin's renderPoster prop to replace its poster.

See Customize skins for the complete styling and ownership workflow.

Behavior and API

  • The packaged export is LiveVideoSkin in React and<live-video-skin> in HTML.
  • The live preset replaces on-demand time controls with live-edge state.
  • Default exposes the full primary and secondary control regions.

For player state and feature details, see Presets. For the UI building blocks, see UI components.