explaingit

cookpete/react-player

★ 10,234TypeScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

ReactPlayer is a single React component that embeds videos from YouTube, Vimeo, direct files, HLS, DASH, and more using one consistent API, pass a URL prop and get a working player with playback controls.

Mindmap

mindmap
  root((react-player))
    What it does
      Single video component
      Multi-source support
      Consistent prop API
    Sources
      YouTube and Vimeo
      HLS and DASH streams
      Direct video files
    Features
      Lazy load light mode
      Picture in picture
      Event callbacks
      Bundle splitting
    Setup
      npm install
      Single import
      One JSX line
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Embed a YouTube or Vimeo video in a React app without writing separate embed code for each video platform.

USE CASE 2

Build a video gallery page that shows only a thumbnail until the user clicks, then loads the full player on demand.

USE CASE 3

Control video playback programmatically from your own React UI, play, pause, seek, mute, without touching native player controls.

Tech stack

TypeScriptReact

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

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.

Copy-paste prompts

Prompt 1
Show me the minimal React code to embed a YouTube video using ReactPlayer with autoplay off and a fixed width of 640px.
Prompt 2
How do I listen for the onEnded event in ReactPlayer to automatically load and play the next video in a playlist?
Prompt 3
How does ReactPlayer's light prop work for showing a thumbnail preview, and how do I enable it for a Vimeo URL?
Prompt 4
What props do I pass to ReactPlayer to control playback speed and volume from my own React state variables?
Open on GitHub → Explain another repo

← cookpete on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.