Gathering detailed insights and metrics for react-player
Gathering detailed insights and metrics for react-player
Gathering detailed insights and metrics for react-player
Gathering detailed insights and metrics for react-player
react-lottie-player
Fully declarative React Lottie player
@lottiefiles/react-lottie-player
Lottie web player wrapper for React
react-audio-player
A simple React wrapper for the audio tag
react-h5-audio-player
A customizable React audio player. Written in TypeScript. Mobile compatible. Keyboard friendly
A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion
npm install react-player
Typescript
Module System
Node Version
NPM Version
91.9
Supply Chain
100
Quality
81.5
Maintenance
100
Vulnerability
100
License
JavaScript (100%)
Total Downloads
141,780,945
Last Day
151,046
Last Week
947,975
Last Month
4,050,432
Last Year
44,296,300
9,469 Stars
1,002 Commits
1,155 Forks
80 Watching
8 Branches
137 Contributors
Minified
Minified + Gzipped
Latest Version
2.16.0
Package Id
react-player@2.16.0
Unpacked Size
1.43 MB
Size
343.22 kB
File Count
99
NPM Version
10.5.0
Node Version
20.12.1
Publised On
09 Apr 2024
Cumulative downloads
Total Downloads
Last day
-0.7%
151,046
Compared to previous day
Last week
1.3%
947,975
Compared to previous week
Last month
-0.1%
4,050,432
Compared to previous month
Last year
26.7%
44,296,300
Compared to previous year
A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, DailyMotion and Kaltura. Not using React? No problem.
Using Next.js and need to handle video upload/processing? Check out next-video.
Maintenance of ReactPlayer is being taken over by Mux. The team at Mux have worked on many highly respected projects and are committed to improving video tooling for developers.
ReactPlayer will remain open source, but with a higher rate of fixes and releases over time. Thanks to everyone in the community for your ongoing support.
1npm install react-player # or yarn add react-player
1import React from 'react' 2import ReactPlayer from 'react-player' 3 4// Render a YouTube video player 5<ReactPlayer url='https://www.youtube.com/watch?v=LXb3EKWsInQ' />
By default, ReactPlayer supports many different types of url
. If you only ever use one type, use imports such as react-player/youtube
to reduce your bundle size. See config keys for all player keys.
1import React from 'react' 2import ReactPlayer from 'react-player/youtube' 3 4// Only loads the YouTube player 5<ReactPlayer url='https://www.youtube.com/watch?v=LXb3EKWsInQ' />
If your build system supports import()
statements, use react-player/lazy
to lazy load the appropriate player for the url
you pass in. This adds several reactPlayer
chunks to your output, but reduces your main bundle size.
1import React from 'react' 2import ReactPlayer from 'react-player/lazy' 3 4// Lazy load the YouTube player 5<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />
Demo page: https://cookpete.github.io/react-player
The component parses a URL and loads in the appropriate markup and external SDKs to play media from various sources. Props can be passed in to control playback and react to events such as buffering or media ending. See the demo source for a full example.
For platforms without direct use of npm
modules, a minified version of ReactPlayer
is located in dist
after installing. To generate this file yourself, checkout the repo and run npm run build:dist
.
As of Chrome 66, videos must be muted
in order to play automatically. Some players, like Facebook, cannot be unmuted until the user interacts with the video, so you may want to enable controls
to allow users to unmute videos themselves. Please set muted={true}
.
Prop | Description | Default |
---|---|---|
url | The url of a video or song to play  ◦  Can be an array or MediaStream object | |
playing | Set to true or false to pause or play the media | false |
loop | Set to true or false to loop the media | false |
controls | Set to true or false to display native player controls. ◦  For Vimeo videos, hiding controls must be enabled by the video owner. | false |
light | Set to true to show just the video thumbnail, which loads the full player on click ◦  Pass in an image URL to override the preview image | false |
volume | Set the volume of the player, between 0 and 1 Â â—¦ Â null uses default volume on all players #357 | null |
muted | Mutes the player  ◦  Only works if volume is set | false |
playbackRate | Set the playback rate of the player  ◦  Only supported by YouTube, Wistia, and file paths | 1 |
width | Set the width of the player | 640px |
height | Set the height of the player | 360px |
style | Add inline styles to the root element | {} |
progressInterval | The time between onProgress callbacks, in milliseconds | 1000 |
playsinline | Applies the playsinline attribute where supported | false |
pip | Set to true or false to enable or disable picture-in-picture mode ◦  Only available when playing file URLs in certain browsers | false |
stopOnUnmount | If you are using pip you may want to use stopOnUnmount={false} to continue playing in picture-in-picture mode even after ReactPlayer unmounts | true |
fallback | Element or component to use as a fallback if you are using lazy loading | null |
wrapper | Element or component to use as the container element | div |
playIcon | Element or component to use as the play icon in light mode | |
previewTabIndex | Set the tab index to be used on light mode | 0 |
config | Override options for the various players, see config prop |
Callback props take a function that gets fired on various player events:
Prop | Description |
---|---|
onReady | Called when media is loaded and ready to play. If playing is set to true , media will play immediately |
onStart | Called when media starts playing |
onPlay | Called when media starts or resumes playing after pausing or buffering |
onProgress | Callback containing played and loaded progress as a fraction, and playedSeconds and loadedSeconds in seconds ◦  eg { played: 0.12, playedSeconds: 11.3, loaded: 0.34, loadedSeconds: 16.7 } |
onDuration | Callback containing duration of the media, in seconds |
onPause | Called when media is paused |
onBuffer | Called when media starts buffering |
onBufferEnd | Called when media has finished buffering  ◦  Works for files, YouTube and Facebook |
onSeek | Called when media seeks with seconds parameter |
onPlaybackRateChange | Called when playback rate of the player changed  ◦  Only supported by YouTube, Vimeo (if enabled), Wistia, and file paths |
onPlaybackQualityChange | Called when playback quality of the player changed  ◦  Only supported by YouTube (if enabled) |
onEnded | Called when media finishes playing  ◦  Does not fire when loop is set to true |
onError | Called when an error occurs whilst attempting to play media |
onClickPreview | Called when user clicks the light mode preview |
onEnablePIP | Called when picture-in-picture mode is enabled |
onDisablePIP | Called when picture-in-picture mode is disabled |
There is a single config
prop to override settings for each type of player:
1<ReactPlayer 2 url={url} 3 config={{ 4 youtube: { 5 playerVars: { showinfo: 1 } 6 }, 7 facebook: { 8 appId: '12345' 9 } 10 }} 11/>
Settings for each player live under different keys:
Key | Options |
---|---|
youtube | playerVars : Override the default player varsembedOptions : Override the default embed optionsonUnstarted : Called when state changes to unstarted (usually when video fails to autoplay) |
facebook | appId : Your own Facebook app IDversion : Facebook SDK versionplayerId : Override player ID for consistent server-side rendering (use with react-uid )attributes : Extra data attributes to pass to the fb-video element |
soundcloud | options : Override the default player options |
vimeo | playerOptions : Override the default paramstitle : Set the player iframe title attribute |
mux | attributes : Apply element attributesversion : Mux player version |
wistia | options : Override the default player optionsplayerId : Override player ID for consistent server-side rendering (use with react-uid ) |
mixcloud | options : Override the default player options |
dailymotion | params : Override the default player vars |
twitch | options : Override the default player optionsplayerId : Override player ID for consistent server-side rendering (use with react-uid ) |
file | attributes : Apply element attributesforceVideo : Always render a <video> elementforceAudio : Always render an <audio> elementforceHLS : Use hls.js for HLS streamsforceSafariHLS : Use hls.js for HLS streams, even on SafariforceDisableHLS : Disable usage hls.js for HLS streamsforceDASH : Always use dash.js for DASH streamsforceFLV : Always use flv.jshlsOptions : Override the default hls.js optionshlsVersion : Override the hls.js version loaded from jsdelivr , default: 0.13.1 dashVersion : Override the dash.js version loaded from cdnjs , default: 2.9.2 flvVersion : Override the flv.js version loaded from jsdelivr , default: 1.5.0 |
Method | Description |
---|---|
ReactPlayer.canPlay(url) | Determine if a URL can be played. This does not detect media that is unplayable due to privacy settings, streaming permissions, etc. In that case, the onError prop will be invoked after attempting to play. Any URL that does not match any patterns will fall back to a native HTML5 media player. |
ReactPlayer.canEnablePiP(url) | Determine if a URL can be played in picture-in-picture mode |
ReactPlayer.addCustomPlayer(CustomPlayer) | Add a custom player. See Adding custom players |
ReactPlayer.removeCustomPlayers() | Remove any players that have been added using addCustomPlayer() |
Use ref
to call instance methods on the player. See the demo app for an example of this.
Method | Description |
---|---|
seekTo(amount, type) | Seek to the given number of seconds, or fraction if amount is between 0 and 1 Â â—¦ Â type parameter lets you specify 'seconds' or 'fraction' to override default behaviour |
getCurrentTime() | Returns the number of seconds that have been played  ◦  Returns null if unavailable |
getSecondsLoaded() | Returns the number of seconds that have been loaded  ◦  Returns null if unavailable or unsupported |
getDuration() | Returns the duration (in seconds) of the currently playing media  ◦  Returns null if duration is unavailable |
getInternalPlayer() | Returns the internal player of whatever is currently playing  ◦  eg the YouTube player instance, or the <video> element when playing a video file ◦  Use getInternalPlayer('hls') to get the hls.js player ◦  Use getInternalPlayer('dash') to get the dash.js player ◦  Returns null if the internal player is unavailable |
showPreview() | When using light mode, returns to the preview overlay |
The light
prop will render a video thumbnail with simple play icon, and only load the full player once a user has interacted with the image. Noembed is used to fetch thumbnails for a video URL. Note that automatic thumbnail fetching for Facebook, Wistia, Mixcloud and file URLs are not supported, and ongoing support for other URLs is not guaranteed.
If you want to pass in your own thumbnail to use, set light
to the image URL rather than true
.
You can also pass a component through the light
prop:
1<ReactPlayer light={<img src='https://example.com/thumbnail.png' alt='Thumbnail' />} />
The styles for the preview image and play icon can be overridden by targeting the CSS classes react-player__preview
, react-player__shadow
and react-player__play-icon
.
Set width
and height
to 100%
and wrap the player in a fixed aspect ratio box to get a responsive player:
1class ResponsivePlayer extends Component { 2 render () { 3 return ( 4 <div className='player-wrapper'> 5 <ReactPlayer 6 className='react-player' 7 url='https://www.youtube.com/watch?v=ysz5S6PUM-U' 8 width='100%' 9 height='100%' 10 /> 11 </div> 12 ) 13 } 14}
1.player-wrapper { 2 position: relative; 3 padding-top: 56.25%; /* Player ratio: 100 / (1280 / 720) */ 4} 5 6.react-player { 7 position: absolute; 8 top: 0; 9 left: 0; 10}
See jsFiddle
example
You can use your own version of any player SDK, assuming the correct window
global is set before the player mounts. For example, to use a local version of hls.js
, add <script src='/path/hls.js'></script>
to your app. If window.Hls
is available when ReactPlayer mounts, it will use that instead of loading hls.js
from cdnjs
. See #605 for more information.
If you aren’t using React, you can still render a player using the standalone library:
1<script src='https://cdn.jsdelivr.net/npm/react-player/dist/ReactPlayer.standalone.js'></script> 2<script> 3 const container = document.getElementById('container') 4 const url = 'https://www.youtube.com/watch?v=d46Azg3Pm4c' 5 6 renderReactPlayer(container, { url, playing: true }) 7 8 function pausePlayer () { 9 renderReactPlayer(container, { url, playing: false }) 10 } 11</script>
See jsFiddle
example
If you have your own player that is compatible with ReactPlayer’s internal architecture, you can add it using addCustomPlayer
:
1import YourOwnPlayer from './somewhere'; 2ReactPlayer.addCustomPlayer(YourOwnPlayer);
Use removeCustomPlayers
to clear all custom players:
1ReactPlayer.removeCustomPlayers();
It is your responsibility to ensure that custom players keep up with any internal changes to ReactPlayer in later versions.
Due to various restrictions, ReactPlayer
is not guaranteed to function properly on mobile devices. The YouTube player documentation, for example, explains that certain mobile browsers require user interaction before playing:
The HTML5
<video>
element, in certain mobile browsers (such as Chrome and Safari), only allows playback to take place if it’s initiated by a user interaction (such as tapping on the player).
Passing an array of YouTube URLs to the url
prop will load them as an untitled playlist.
1<ReactPlayer 2 url={[ 3 'https://www.youtube.com/watch?v=oUFJJNQGwhk', 4 'https://www.youtube.com/watch?v=jNgP6d9HraI' 5 ]} 6/>
When playing file paths, an array of sources can be passed to the url
prop to render multiple <source>
tags.
1<ReactPlayer playing url={['foo.webm', 'foo.ogg']} />
You can also specify a type
for each source by using objects with src
and type
properties.
1<ReactPlayer 2 playing 3 url={[ 4 {src: 'foo.webm', type: 'video/webm'}, 5 {src: 'foo.ogg', type: 'video/ogg'} 6 ]} 7/>
<track>
elements for subtitles can be added using config.file
:
1<ReactPlayer 2 playing 3 url='foo.webm' 4 config={{ file: { 5 tracks: [ 6 {kind: 'subtitles', src: 'subs/subtitles.en.vtt', srcLang: 'en', default: true}, 7 {kind: 'subtitles', src: 'subs/subtitles.ja.vtt', srcLang: 'ja'}, 8 {kind: 'subtitles', src: 'subs/subtitles.de.vtt', srcLang: 'de'} 9 ] 10 }}} 11/>
v2.0
ReactPlayer v2.0
changes single player imports and adds lazy loading players. Support for preload
has also been removed, plus some other changes. See MIGRATING.md
for information.
Player.js
<mux-player>
elementreact-player
implementation uses the embed.ly Player.js
API but Kaltura specific APIs are also available, see Kaltura Player API<video>
or <audio>
elements
See the contribution guidelines before creating a pull request.
Jackson Doherty |
Joseph Fung |
No vulnerabilities found.
Reason
8 commit(s) out of 30 and 5 issue activity out of 30 found in the last 90 days -- score normalized to 10
Reason
no vulnerabilities detected
Reason
no dangerous workflow patterns detected
Reason
tokens are read-only in GitHub workflows
Reason
license file detected
Details
Reason
all dependencies are pinned
Details
Reason
no binaries found in the repo
Reason
update tool detected
Details
Reason
GitHub code reviews found for 15 commits out of the last 30 -- score normalized to 5
Details
Reason
no badge detected
Reason
security policy file not detected
Reason
branch protection not enabled on development/release branches
Details
Reason
project is not fuzzed
Score
Last Scanned on 2022-08-15
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More