Installation
Usage
import { VideoPlayerPro } from "@/components/ruixen/video-player-pro";
export default function MyVideoPlayer() {
return <VideoPlayerPro src="https://example.com/video.mp4" />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | - | Required. URL of the video file to play |
poster | string | - | Optional poster image URL |
sound | boolean | true | Enable audio tick feedback on interactions |
Features
- Glass control bar with
backdrop-filter: blur(24px)— springs up on hover, auto-hides after 3s - Custom progress scrubber — expands on hover, draggable with thumb
- Inline volume slider next to speaker icon — click to mute, drag to adjust
- Speed pills with
layoutIdspring indicator (0.5× 1× 1.5× 2×) - Center play button with spring scale when controls are hidden
- Fullscreen toggle with inline SVG icons
- Error overlay with retry button
- All inline styles, CSS custom properties for border theming
- No shadcn, no lucide — only
motion/react