react-player

ReactPlayer is a React component that lets you embed videos and audio from many different sources using a single consistent interface. Instead of writing separate code for a YouTube embed, a Vimeo embed, and a plain video file, you use the same ReactPlayer component and pass it a URL. The component figures out what kind of source it is and loads the appropriate player automatically.

Supported sources include YouTube, Vimeo, Wistia, Mux, direct video and audio file paths, and streaming formats HLS and DASH. You pass a src prop with the URL, and optionally props to control playback: playing to start or pause, muted, loop, volume, playback speed, and controls to show or hide the native player interface. Callback props let your app respond to events like the video starting, buffering, ending, or an error occurring.

The component is installed via npm as react-player, and the most basic usage is a single line: import ReactPlayer and render it with a src. The package can split its bundle so that only the code needed for the specific player type is loaded, which reduces the size of your JavaScript for users.

The component also has a light mode where it shows only the video thumbnail until the user clicks to load the full player, which is useful for pages with multiple embedded videos where you do not want all the external scripts to load at once. Picture-in-picture mode is supported in browsers that allow it.

Maintenance of the project transferred to Mux, a video API company, which has committed to continuing it as open source with more active development. Version 3 is a major rewrite that is not compatible with version 2, and a migration guide is included in the repository.