Skip to content
FrameworkStyle

live-video-minimal-skin

Compact live video controls with live-edge state, captions, feedback, and input support

Use it for a live stream with a smaller control footprint.

Use the packaged preset

<script type="module">
  import '@videojs/html/live-video/player';
  import '@videojs/html/live-video/minimal-skin';
  import '@videojs/html/media/hls-video';
</script>

<live-video-player>
  <live-video-minimal-skin>
    <hls-video src="https://example.com/live.m3u8" crossorigin="anonymous"></hls-video>
  </live-video-minimal-skin>
</live-video-player>

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 htmltailwind catalog, then install the editable source.

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

Installs editable Minimal Live Video Skin source under `@components/videojs/skins/live-video/minimal`. Requires `@videojs/html@10.0.0-beta.32`; import the matching Player and media registrations before using the installed light-DOM template.

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.

Place an image in the poster slot to replace the poster.

See Customize skins for the complete styling and ownership workflow.

Behavior and API

  • The packaged export is MinimalLiveVideoSkin in React and<live-video-minimal-skin> in HTML.
  • The live preset replaces on-demand time controls with live-edge state.
  • Minimal keeps the same feature family in a smaller responsive layout.

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