Skip to main content

​
Overview

The VideoPlayerEvents interface defines all event callbacks that are triggered by the video player during playback. These events allow you to monitor and respond to changes in playback state, loading progress, audio handling, and more.

​
Event Categories

Events related to video playback state and progress.

​
onPlaybackStateChange

Called when the player playback state changes.Callback Signature:
onPlaybackStateChange: (data: onPlaybackStateChangeData) => void
Event Data:
​
isPlaying
boolean
Whether the video is playing.
​
isBuffering
boolean
Whether the video is buffering.
Example:
<Video
  source={videoSource}
  onPlaybackStateChange={(data) => {
    console.log('Playing:', data.isPlaying);
    console.log('Buffering:', data.isBuffering);
  }}
/>

​
onPlaybackRateChange

Called when the player playback rate changes.Callback Signature:
onPlaybackRateChange: (rate: number) => void
Parameters:
  • rate - The new playback rate (e.g., 1.0 for normal speed, 2.0 for 2x speed)
Example:
<Video
  source={videoSource}
  onPlaybackRateChange={(rate) => {
    console.log('Playback rate changed to:', rate);
  }}
/>

​
onProgress

Called when the player progress changes.Callback Signature:
onProgress: (data: onProgressData) => void
Event Data:
​
currentTime
number
The current time of the video in seconds.
​
bufferDuration
number
The time that player is able to play with only buffer.
Example:
<Video
  source={videoSource}
  onProgress={(data) => {
    console.log('Current time:', data.currentTime);
    console.log('Buffer duration:', data.bufferDuration);
  }}
/>

​
onEnd

Called when the video ends.Callback Signature:
onEnd: () => void
Example:
<Video
  source={videoSource}
  onEnd={() => {
    console.log('Video has ended');
    // Navigate to next video or show replay button
  }}
/>

​
onSeek

Called when the player seeks.Callback Signature:
onSeek: (seekTime: number) => void
Parameters:
  • seekTime - The time in seconds that the player seeked to
Example:
<Video
  source={videoSource}
  onSeek={(seekTime) => {
    console.log('Seeked to:', seekTime);
  }}
/>

​
Complete Example

Here’s a comprehensive example showing how to use multiple player events: 
import React, { useState } from 'react';
import { View, Text } from 'react-native';
import Video from 'react-native-video';

function VideoPlayer() {
  const [status, setStatus] = useState('idle');
  const [progress, setProgress] = useState(0);
  const [duration, setDuration] = useState(0);
  const [isBuffering, setIsBuffering] = useState(false);

  return (
    <View>
      <Video
        source={{ uri: 'https://example.com/video.mp4' }}
        onLoadStart={(data) => {
          console.log('Loading started:', data.sourceType);
        }}
        onLoad={(data) => {
          console.log('Video loaded');
          setDuration(data.duration);
        }}
        onStatusChange={(status) => {
          setStatus(status);
        }}
        onProgress={(data) => {
          setProgress(data.currentTime);
        }}
        onBuffer={(buffering) => {
          setIsBuffering(buffering);
        }}
        onPlaybackStateChange={(data) => {
          console.log('Playing:', data.isPlaying);
        }}
        onEnd={() => {
          console.log('Video ended');
        }}
      />
      
      <Text>Status: {status}</Text>
      <Text>Progress: {progress.toFixed(2)}s / {duration.toFixed(2)}s</Text>
      {isBuffering && <Text>Buffering...</Text>}
    </View>
  );
}

​
Error Handling

For error handling, see the onError event in the JSVideoPlayerEvents interface: 
<Video
  source={videoSource}
  onError={(error) => {
    console.error('Video error:', error);
  }}
/>

​
See Also