Anex UI logoAnex UI
npm install anexui
Documentation

Documentation

VideoPlayer

A styled video player with custom overlay controls: play/pause, seek bar, volume slider, time display, and fullscreen toggle. Controls auto-hide during playback. A minimal variant defers to native browser controls.

Preview

0:00 / 0:00

Usage

import { VideoPlayer } from "anexui";

<VideoPlayer
  src="/video/clip.mp4"
  poster="/video/thumb.jpg"
  title="Demo video"
  aspectRatio="16/9"
/>
Copy code

Variants

Default

Custom overlay controls with auto-hide behavior — controls fade out 3 seconds after the last mouse move during playback. Click anywhere on the video to play or pause.

<VideoPlayer src="/video/clip.mp4" title="Demo" variant="default" />
Copy code

Minimal

Uses the browser's native controls attribute — no custom UI overhead.

<VideoPlayer src="/video/clip.mp4" title="Demo" variant="minimal" />
Copy code

Aspect Ratios

<VideoPlayer src="/video/clip.mp4" aspectRatio="16/9" />  {/* default */}
<VideoPlayer src="/video/clip.mp4" aspectRatio="4/3" />
<VideoPlayer src="/video/clip.mp4" aspectRatio="1/1" />
Copy code

Keyboard Shortcuts

These shortcuts apply when the video container has focus (default variant only):

| Key | Action | |---|---| | Space / K | Play / Pause | | F | Toggle fullscreen | | M | Toggle mute |

Props

| Prop | Type | Default | Description | |---|---|---|---| | src | string | — | URL of the video file | | poster | string | — | Poster image shown before playback begins | | title | string | — | Accessible label for the video region | | variant | "default" \| "minimal" | "default" | Player layout variant | | aspectRatio | "16/9" \| "4/3" \| "1/1" | "16/9" | Aspect ratio of the video frame | | autoPlay | boolean | false | Autoplay on mount — requires muted in most browsers | | loop | boolean | false | Loop the video when it ends | | muted | boolean | false | Start the video muted | | className | string | — | Extra class applied to the root wrapper | | onPlay | () => void | — | Fired when playback starts | | onPause | () => void | — | Fired when playback is paused | | onEnded | () => void | — | Fired when the video ends |

Accessibility