VideoPlayer

Name: Video Player — Nofinite NUI
Author: Nofinite

Note

@nofinite/media is the standalone media engine powered by Vidstack with customized NUICSS skins. For guides on HLS/DASH streaming, AudioPlayer, and keyboard shortcuts, visit the dedicated Media Documentation Hub.

A fully accessible, token-driven VideoPlayer component powered by Vidstack and styled with @nofinite/nuicss.

tsx

import { VideoPlayer } from '@nofinite/media/react';

Interactive Preview

Loading preview...

Usage

Basic Example

tsx

import { VideoPlayer } from '@nofinite/media/react';

export default function VideoDemo() {
  return (
    <div className="w-full max-w-lg rounded-xl overflow-hidden border border-default bg-surface">
      <VideoPlayer src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" />
    </div>
  );
}

API Reference

Prop	Type	Default	Description
`src`	`string`	—	—
`url`	`string`	—	—
`poster`	`string`	—	—
`title`	`string`	—	—
`autoPlay`	`boolean`	`false`	—
`loop`	`boolean`	`false`	—
`muted`	`boolean`	`false`	—
`playsInline`	`boolean`	`true`	—
`controls`	`boolean`	`true`	—
`theme`	`any`	`auto`	—
`aspectRatio`	`string`	`16/9`	—
`className`	`string`	—	—
`style`	`CSSProperties`	—	—
`tracks`	`MediaTrack[]`	—	—
`thumbnails`	`string`	—	—
`playbackRates`	`number[] \| { min: number; max: number; step: number; }`	—	—
`seekStep`	`number`	—	—
`crossOrigin`	`boolean \| "anonymous" \| "use-credentials"`	`anonymous`	—
`load`	`enum`	—	—
`preload`	`enum`	—	—
`slots`	`any`	—	—
`onPlay`	`(() => void)`	—	—
`onPause`	`(() => void)`	—	—
`onEnded`	`(() => void)`	—	—
`onTimeUpdate`	`((detail: { currentTime: number; duration: number; }) => void)`	—	—
`onVolumeChange`	`((detail: { volume: number; muted: boolean; }) => void)`	—	—
`onError`	`((error: any) => void)`	—	—
`onSeeked`	`((time: number) => void)`	—	—
`onLoadedMetadata`	`((detail: { duration: number; }) => void)`	—	—
`onFullscreenChange`	`((fullscreen: boolean) => void)`	—	—

Accessibility & Guidelines

Semantic Tokens: Built strictly using Nuicss semantic tokens (bg-surface, text-default, border-subtle, bg-primary).
Keyboard Navigation: Adheres to strict WAI-ARIA standards.
Screen Reader Support: Includes semantic roles and live regions where appropriate.