Player API

Comprehensive API reference for the VideoPlayer component

Basic Usage

tsx
1import { VideoPlayer } from 'react-advanced-video-player';
2
3function App() {
4 return (
5 <VideoPlayer
6 src="https://example.com/video.mp4"
7 poster="https://example.com/poster.jpg"
8 controls
9 />
10 );
11}

Props

NameTypeDefaultDescription
srcstring-URL of the video to play (required)
posterstringundefinedURL of the poster image to display before the video plays
widthnumber | string'100%'Width of the video player
heightnumber | string'auto'Height of the video player
autoPlaybooleanfalseWhether to start playing the video automatically
mutedbooleanfalseWhether the video is muted
loopbooleanfalseWhether to loop the video when it ends
controlsbooleantrueWhether to show the default video controls
preload'auto' | 'metadata' | 'none''auto'How the browser should load the video
volumenumber1Volume level (0-1)
playbackRatenumber1Playback rate (0.25-2)
onPlay() => voidundefinedCallback when the video starts playing
onPause() => voidundefinedCallback when the video is paused
onEnded() => voidundefinedCallback when the video ends
onTimeUpdate(currentTime: number) => voidundefinedCallback when the current time of the video changes
onVolumeChange(volume: number, muted: boolean) => voidundefinedCallback when the volume or muted state changes
onPlaybackRateChange(rate: number) => voidundefinedCallback when the playback rate changes
customControlsReact.ReactNodeundefinedCustom controls component to replace the default controls
classNamestringundefinedAdditional CSS class to apply to the video player container
styleReact.CSSPropertiesundefinedAdditional 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';
3
4function App() {
5 const playerRef = useRef<VideoPlayerRef>(null);
6
7 const handlePlay = () => {
8 playerRef.current?.play();
9 };
10
11 const handlePause = () => {
12 playerRef.current?.pause();
13 };
14
15 const handleSeek = (time: number) => {
16 playerRef.current?.seek(time);
17 };
18
19 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}
MethodDescription
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