Video Player
An accessible video player built on Media Chrome with configurable playback controls.
Quick Start
Use Video Player to provide a fully featured media playback experience with built-in controls.
1<VideoPlayer 2src="/videos/sample.mp4" 3poster="/images/poster.jpg" 4className="aspect-video h-96 object-cover" 5/>
Default Player
The default configuration includes playback, timeline, volume, and fullscreen controls.
1<VideoPlayer 2src="/videos/sample.mp4" 3poster="/images/poster.jpg" 4/>
With Seek Controls
Display forward and backward seek buttons.
1<VideoPlayer 2src="/videos/sample.mp4" 3showSeekBackwardButton 4showSeekForwardButton 5seekOffset={10} 6/>
Compact Controls
Only display essential controls.
1<VideoPlayer 2src="/videos/sample.mp4" 3showTimeDisplay={false} 4showVolumeControl={false} 5/>
Volume Controls
Enable audio controls.
1<VideoPlayer 2src="/videos/sample.mp4" 3showVolumeControl 4/>
Autoplay
Videos can begin playback automatically.
1<VideoPlayer 2src="/videos/sample.mp4" 3autoPlay 4muted 5loop 6/>
Custom Styling
Customize the player and control bar appearance.
1<VideoPlayer 2src="/videos/sample.mp4" 3className="aspect-video overflow-hidden rounded-[20px] border" 4controlBarClassName="rounded-b-[20px]" 5/>
Full Featured Player
Display all available controls.
1<VideoPlayer 2src="/videos/sample.mp4" 3showSeekBackwardButton 4showSeekForwardButton 5seekOffset={10} 6/>
API Reference
VideoPlayer
Property | Type | Default | Description |
|---|---|---|---|
| src | string | - | Source URL of the video. |
| poster | string | - | Poster image shown before playback begins. |
| autoPlay | boolean | false | Automatically begins playback when loaded. |
| muted | boolean | false | Mutes audio playback. |
| loop | boolean | false | Restarts playback when the video ends. |
| showControls | boolean | true | Displays the control bar. |
| showPlayButton | boolean | true | Displays the play/pause button. |
| showSeekBackwardButton | boolean | false | Displays the seek backward button. |
| showSeekForwardButton | boolean | false | Displays the seek forward button. |
| seekOffset | number | 10 | Number of seconds to seek forward/backward. |
| showTimeRange | boolean | true | Displays the timeline control. |
| showTimeDisplay | boolean | true | Displays the current and total duration. |
| showVolumeControl | boolean | true | Displays the volume control. |
| showFullscreenButton | boolean | true | Displays the fullscreen control. |
| controlBarClassName | string | - | Additional classes applied to the control bar. |
| controllerClassName | string | - | Additional classes applied to the MediaController. |
Visual Reference
Configuration | Preview |
|---|---|
| Default | |
| With Seek Controls |