whatisgithub

What is react-player?

cookpete/react-player — explained in plain English

Analysis updated 2026-06-24

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

In one sentence

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

What do people build with it?

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.

What is it built with?

TypeScriptReact

How does it compare?

cookpete/react-playerkatspaugh/wavesurfer.jsraineorshine/npm-check-updates
Stars10,23410,23110,231
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyeasyeasy
Complexity2/52/51/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

So what is it?

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?

Frequently asked questions

What is react-player?

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.

What language is react-player written in?

Mainly TypeScript. The stack also includes TypeScript, React.

How hard is react-player to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is react-player for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.