Loading...
Installation
Usage
import VideoPlayerPro from "@/components/ui/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 |
Features
- Custom Controls: Beautiful custom video controls with smooth animations
- Play/Pause/Restart: Click video or button to control playback
- Progress Scrubbing: Click anywhere on progress bar to seek
- Volume Control: Slider for precise volume adjustment
- Mute Toggle: Quick mute/unmute with visual feedback
- Playback Speed: Adjustable playback speed (0.5x to 2x)
- Fullscreen Support: Enter/exit fullscreen mode
- Time Display: Current time and total duration
- Auto-hide Controls: Controls fade out during playback
- Responsive Design: Adapts to different screen sizes
- Smooth Animations: Framer Motion powered transitions
- Professional Styling: Backdrop blur and modern design
Control Features
Playback Controls
- Play/Pause: Space bar or click video
- Restart: Automatically restarts when video ends
- Seeking: Click progress bar to jump to specific time
Audio Controls
- Volume Slider: Precise volume control from 0-100%
- Mute Button: Toggle mute with visual state
- Volume Icons: Different icons for muted, low, and normal volume
Display Controls
- Fullscreen: Enter/exit fullscreen mode
- Settings Popover: Access playback speed settings
- Time Formatting: MM:SS format for current time and duration
Keyboard Shortcuts
| Key | Action |
|---|---|
Space | Play/Pause toggle |
Click | Play/Pause toggle |
F | Toggle fullscreen |
M | Toggle mute |
Browser Support
- Modern browsers with HTML5 video support
- Fullscreen API support for fullscreen functionality
- Requires JavaScript enabled for custom controls