MinimalAudioSkin

Use it for audio playback in a narrow or secondary surface.

Use the packaged preset

import { AudioPlayer, MinimalAudioSkin } from '@videojs/react/audio';
import { Audio } from '@videojs/react/audio';
import '@videojs/react/audio/minimal-skin.css';

export function Player() {
  return (
    <AudioPlayer>
      <MinimalAudioSkin>
        <Audio src="audio.mp3" />
      </MinimalAudioSkin>
    </AudioPlayer>
  );
}

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.

{
  "registries": {
    "@videojs": "https://shadcn.videojs.org/r/react/{name}.json"
  }
}

pnpm dlx shadcn@latest add @videojs/audio-minimal

{
  "registries": {
    "@videojs": "https://shadcn.videojs.org/r/react/css/{name}.json"
  }
}

pnpm dlx shadcn@latest add @videojs/audio-minimal

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 MinimalAudioSkin in React and<audio-minimal-skin> in HTML.
• The on-demand preset includes duration and seeking behavior.
• 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.