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 |