Player API
Comprehensive API reference for the VideoPlayer component
Basic Usage
tsx
1import { VideoPlayer } from 'react-advanced-video-player';23function App() {4 return (5 <VideoPlayer 6 src="https://example.com/video.mp4" 7 poster="https://example.com/poster.jpg"8 controls9 />10 );11}Props
| Name | Type | Default | Description |
|---|---|---|---|
| src | string | - | URL of the video to play (required) |
| poster | string | undefined | URL of the poster image to display before the video plays |
| width | number | string | '100%' | Width of the video player |
| height | number | string | 'auto' | Height of the video player |
| autoPlay | boolean | false | Whether to start playing the video automatically |
| muted | boolean | false | Whether the video is muted |
| loop | boolean | false | Whether to loop the video when it ends |
| controls | boolean | true | Whether to show the default video controls |
| preload | 'auto' | 'metadata' | 'none' | 'auto' | How the browser should load the video |
| volume | number | 1 | Volume level (0-1) |
| playbackRate | number | 1 | Playback rate (0.25-2) |
| onPlay | () => void | undefined | Callback when the video starts playing |
| onPause | () => void | undefined | Callback when the video is paused |
| onEnded | () => void | undefined | Callback when the video ends |
| onTimeUpdate | (currentTime: number) => void | undefined | Callback when the current time of the video changes |
| onVolumeChange | (volume: number, muted: boolean) => void | undefined | Callback when the volume or muted state changes |
| onPlaybackRateChange | (rate: number) => void | undefined | Callback when the playback rate changes |
| customControls | React.ReactNode | undefined | Custom controls component to replace the default controls |
| className | string | undefined | Additional CSS class to apply to the video player container |
| style | React.CSSProperties | undefined | Additional inline styles to apply to the video player container |
Ref Methods
You can access the player instance using a ref to control the video programmatically:
tsx
1import { VideoPlayer, VideoPlayerRef } from 'react-advanced-video-player';2import { useRef } from 'react';34function App() {5 const playerRef = useRef<VideoPlayerRef>(null);67 const handlePlay = () => {8 playerRef.current?.play();9 };1011 const handlePause = () => {12 playerRef.current?.pause();13 };1415 const handleSeek = (time: number) => {16 playerRef.current?.seek(time);17 };1819 return (20 <>21 <VideoPlayer 22 ref={playerRef}23 src="https://example.com/video.mp4" 24 />25 <div>26 <button onClick={handlePlay}>Play</button>27 <button onClick={handlePause}>Pause</button>28 <button onClick={() => handleSeek(30)}>Jump to 30s</button>29 </div>30 </>31 );32}| Method | Description |
|---|---|
| play() | Starts playing the video |
| pause() | Pauses the video |
| seek(time: number) | Seeks to the specified time in seconds |
| togglePlay() | Toggles between play and pause |
| mute() | Mutes the video |
| unmute() | Unmutes the video |
| toggleMute() | Toggles between muted and unmuted |
| setVolume(volume: number) | Sets the volume (0-1) |
| setPlaybackRate(rate: number) | Sets the playback rate (0.25-2) |
| getVideoElement() | Returns the HTML video element |