Quick Start

This guide will walk you through the basic steps to get a video playing in your React application.

Basic Usage

The simplest way to use ReactPlayer is to import it and provide a src prop with the URL of the media you want to play.

import React from 'react';
import ReactPlayer from 'react-player';

function App() {
  return (
    <div>
      <h1>My Awesome Video</h1>
      <ReactPlayer src='https://www.youtube.com/watch?v=LXb3EKWsInQ' />
    </div>
  );
}

export default App;

This will render a YouTube player for the given URL with default dimensions.

Controlling Playback

You can control the playback state of the media using the playing prop. This is typically managed using React state.

Here is a more complete example demonstrating how to play and pause a video with a button.

import React, { useState } from 'react';
import ReactPlayer from 'react-player';

function VideoPlayer() {
  const [playing, setPlaying] = useState(false);

  const handlePlayPause = () => {
    setPlaying(!playing);
  };

  return (
    <div>
      <ReactPlayer 
        src='https://stream.mux.com/maVbJv2GSYNRgS02kPXOOGdJMWGU1mkA019ZUjYE7VU7k' 
        playing={playing} 
      />
      <button onClick={handlePlayPause}>{playing ? 'Pause' : 'Play'}</button>
    </div>
  );
}

export default VideoPlayer;

Using Refs for Instance Methods

To call instance methods on the player, you can use a ref. For example, to seek to a specific time in the video.

import React, { useRef } from 'react';
import ReactPlayer from 'react-player';

function ControllablePlayer() {
  const playerRef = useRef(null);

  const handleSeek = () => {
    // Seek to 10 seconds into the video
    if (playerRef.current) {
      playerRef.current.currentTime = 10;
    }
  };

  return (
    <div>
      <ReactPlayer 
        ref={playerRef} 
        src='https://stream.mux.com/maVbJv2GSYNRgS02kPXOOGdJMWGU1mkA019ZUjYE7VU7k' 
        controls // Show native controls
      />
      <button onClick={handleSeek}>Seek to 10s</button>
    </div>
  );
}

export default ControllablePlayer;

For a full list of options, see the API Reference.