Default live audio skin

Use it for a live audio stream with explicit live-edge state.

Use the packaged preset

import { LiveAudioPlayer, LiveAudioSkin } from '@videojs/react/live-audio';
import { HlsAudio } from '@videojs/react/media/hls-audio';
import '@videojs/react/live-audio/skin.css';

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

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.

See Customize skins for the complete styling and ownership workflow.

Behavior and API

• The packaged export is LiveAudioSkin in React and<live-audio-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.