react-player

Since v3, ReactPlayer supports multiple <source> and <track> elements inside the component, similar to the native HTML5 <video> or <audio> elements.

<ReactPlayer controls>
  <source src="foo.webm" type="video/webm">
  <source src="foo.ogg" type="video/ogg">
  <track kind="subtitles" src="subs/subtitles.en.vtt" srclang="en" default>
  <track kind="subtitles" src="subs/subtitles.ja.vtt" srclang="ja">
  <track kind="subtitles" src="subs/subtitles.de.vtt" srclang="de">
</ReactPlayer>

When upgrading to v3.0, several player props have been renamed to align with the HTMLMediaElement interface.

• Rename url to src
• Rename playsinline to playsInline
• progressInterval is now deprecated
• stopOnUnmount is now deprecated
• The wrapper prop is undefined by default; set it to div if you require a wrapper element.

As of v2.2, you can use react-player/lazy to lazy load the appropriate player for a given url. This reduces your main bundle size by adding reactPlayer chunks to your output.

Note: This requires React 16.6 or later due to the use of lazy and Suspense.

// Before
import ReactPlayer from 'react-player'

// After
import ReactPlayer from 'react-player/lazy'

Install the react-player package using npm or yarn to use the React component for playing various media URLs (YouTube, Vimeo, HLS, DASH, etc.).

npm install react-player # or yarn add react-player

As of v2.2, the location for importing single players has changed. Single players were not available in v2.0 or v2.1.

// Before
import ReactPlayer from 'react-player/lib/players/YouTube'

// After
import ReactPlayer from 'react-player/youtube'

The light prop renders a video thumbnail and only loads the full player upon user interaction.

• Set light={true} to use Noembed to fetch a thumbnail.
• Pass an image URL to light to override the preview image: <ReactPlayer light='https://example.com/thumb.png' />.
• Pass a component to light to use a custom preview: <ReactPlayer light={<MyCustomComponent />} />.

Target CSS classes react-player__preview, react-player__shadow, and react-player__play-icon to style the preview.

In v3.0, callback props have been renamed to match native HTMLMediaElement event naming:

• onProgress $\rightarrow$ onTimeUpdate and onProgress
• onDuration $\rightarrow$ onDurationChange
• onPlaybackRateChange $\rightarrow$ onRateChange
• onSeek $\rightarrow$ onSeeking and onSeeked
• onBuffer $\rightarrow$ onWaiting
• onBufferEnd $\rightarrow$ onPlaying
• onEnablePIP $\rightarrow$ onEnterPictureInPicture
• onDisablePIP $\rightarrow$ onLeavePictureInPicture

In v2.0, the onReady callback is invoked with the ReactPlayer instance. This allows you to store the instance and call methods (like getInternalPlayer) immediately without worrying about whether the player is ready.

// After v2.0
class Player extends Component {
  handleReady = player => {
    this.player = player            // Store a player that is ready for methods
    this.player.getInternalPlayer() // Internal player now ready
  }
  render () {
    return (
      <ReactPlayer onReady={this.handleReady} />
    )
  }
}

In v2.0, deprecated player-specific config props (like youtubeConfig) have been removed. All player configurations must now be passed through the single config prop.

If you are only using one type of URL, you can place player-specific options directly inside config without a provider key.

// Before
<ReactPlayer 
  youtubeConfig={{ playerVars: { showinfo: 1 } }} 
/>

// After (using provider key)
<ReactPlayer 
  config={{ youtube: { playerVars: { showinfo: 1 } }}} 
/>

// After (direct config for single-provider use cases)
<ReactPlayer 
  config={{ playerVars: { showinfo: 1 } }} 
/>