ReactPlayer
A React component that plays video and audio from YouTube, Vimeo, file paths and other URLs.
- Stars
- 10.3k
- Forks
- 1.2k
- Licence
- MIT
- Language
- TypeScript
- Last update
- 1 months ago
- Type
- Library
What it is
ReactPlayer is a React component you add to a web page to play media. You pass it a URL, and it works out which player to load, such as YouTube, Vimeo, or a plain HTML5 media file, and loads the needed scripts. Developers use it so they do not have to write a separate embed for each video or audio service.
- Embed a YouTube video in a React page with a single src prop
- Play an MP4 or audio file from a URL using the same component
- Show a video thumbnail that loads the full player only when clicked (light mode)
- Listen to playback events such as onProgress or onEnded to track viewing
- Add custom playback controls using Media Chrome
Great for
- React developers who need to embed videos from several services behind one component
- Projects that play YouTube or Vimeo videos and want playback props and events like onPlay, onEnded, and onProgress
- Apps that want a click-to-load thumbnail via the light prop
- Teams that want to add custom controls with a library such as Media Chrome
Not ideal for
- People who are not building a React web app, since it is a React component and needs React to run
- Projects that need guaranteed long-term maintenance under the original author, since the README says maintenance is being taken over by Mux
- Anyone needing v2 compatibility without a migration, since v3 is not backwards compatible
How to get it
- 1
Install with a package manager
You'll need: Node.js and npm or yarn · React
Install the package
npm install react-player - 2
Run it
- Install the package with npm install react-player
- Import ReactPlayer from 'react-player' in a React component
- Render <ReactPlayer src='https://www.youtube.com/watch?v=LXb3EKWsInQ' /> to play a YouTube video
- Add muted={true} if you need autoplay to work in Chrome
- 3
Get the most out of it
- Use the config prop to pass player-specific settings, such as youtube or vimeo options
- Use the onProgress, onDurationChange, and onEnded callbacks to react to playback
- Use the light prop with playIcon to show a custom thumbnail before loading the player
- Use ReactPlayer.canPlay(src) to check a URL before rendering
- Pair with Media Chrome for custom controls, as shown in the README
Downloads
Strengths
- One component supports many URL sources, as listed in the README
- Callback props and a ref-based instance API that aims to match HTMLMediaElement
- Supports lazy loading of the player code through dynamic import to reduce bundle size
Trade-offs
- Version 3 is not backwards compatible with v2 and requires a migration
- The README says maintenance is moving to Mux, so future direction may change
- Some services restrict autoplay and unmuting, and the README notes some players cannot be unmuted until the user interacts
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| react-player (this) | 10.3k | Library | intermediate | 1 months ago | React developers who need to embed videos from several services behind one component |
| plyr | 30k | Library | beginner | 16 days ago | Developers maintaining an existing site that already uses Plyr |
| ffmpeg.wasm | 17.9k | Library | intermediate | 1 months ago | Web developers who want video or audio conversion inside a browser page |
| DPlayer | 16.5k | Library | intermediate | 8 months ago | Web developers who want an embeddable video player with scrolling comments |
| lux | 31.8k | CLI | beginner | 7 months ago | People who want to save videos from supported sites to a local file from the command line |
| YoutubeDownloader | 16.6k | App | beginner | 4 days ago | People who want to keep a local copy of YouTube videos or playlists |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.