ReactPlayer

A React component for playing a variety of URLs, including file paths, YouT...

ReactVideo
cookpete/react-playercookpete.com/react-playerreact-player

README

  ReactPlayer

Latest npm version Build Status Test Coverage Become a sponsor on Patreon

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.


Migrating to ReactPlayer 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](/MIGRATING.md) for information.

Usage


  1. ``` sh
  2. npm install react-player # or yarn add react-player
  3. ```

  1. ``` js
  2. import React from 'react'
  3. import ReactPlayer from 'react-player'

  5. // Render a YouTube video player
  6. <ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />
  7. ```

By default, ReactPlayer supports many different types ofurl. 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.

  1. ``` js
  2. import React from 'react'
  3. import ReactPlayer from 'react-player/youtube'

  5. // Only loads the YouTube player
  6. <ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />
  7. ```

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.

  1. ``` js
  2. import React from 'react'
  3. import ReactPlayer from 'react-player/lazy'

  5. // Lazy load the YouTube player
  6. <ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />
  7. ```

Demo page: [https://cookpete.com/react-player](https://cookpete.com/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.

Polyfills


If you are using npm and need to support [browsers without Promise](http://caniuse.com/#feat=promises) you will need a [Promise polyfill](https://github.com/stefanpenner/es6-promise).
To support IE11 you will need to use [babel-polyfill](https://babeljs.io/docs/usage/polyfill) or a similar ES2015+ polyfill.

Autoplay


As of Chrome 66, [videos must be muted in order to play automatically](https://www.theverge.com/2018/3/22/17150870/google-chrome-autoplay-videos-sound-mute-update). 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}.

Props


Prop | Description | Default
`url` | The url of a video or song to play
  ◦  Can be an [array](#multiple-sources-and-tracks) or [`MediaStream`](https://developer.mozilla.org/en-US/docs/Web/API/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`](https://github.com/cookpete/react-player/issues/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](https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture)
  ◦  Only available when playing file URLs in [certain browsers](https://caniuse.com/#feat=picture-in-picture) | `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


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](https://developer.vimeo.com/player/sdk/reference#playbackratechange)), Wistia, and file paths`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

Config prop


There is a single config prop to override settings for each type of player:

  1. ``` js
  2. <ReactPlayer
  3.   url={url}
  4.   config={{
  5.     youtube: {
  6.       playerVars: { showinfo: 1 }
  7.     },
  8.     facebook: {
  9.       appId: '12345'
  10.     }
  11.   }}
  12. />
  13. ```

Settings for each player live under different keys:

Key | Options
`youtube` | `playerVars`: Override the [default player vars](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5)
`embedOptions`: Override the [default embed options](https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player)
`onUnstarted`: Called when state changes to `unstarted` (usually when video fails to autoplay)`facebook` | `appId`: Your own [Facebook app ID](https://developers.facebook.com/docs/apps/register#app-id)
`version`: Facebook SDK version
`playerId`: Override player ID for consistent server-side rendering (use with [`react-uid`](https://github.com/thearnica/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 params](https://developer.vimeo.com/player/sdk/embed)
`title`: Set the player `iframe` title attribute`wistia` | `options`: Override the [default player options](https://wistia.com/doc/embed-options#options_list)
`playerId`: Override player ID for consistent server-side rendering (use with [`react-uid`](https://github.com/thearnica/react-uid))
mixcloud | options: Override the default player options
dailymotion | params: Override the default player vars
`twitch` | `options`: Override the [default player options](https://dev.twitch.tv/docs/embed)
`playerId`: Override player ID for consistent server-side rendering (use with [`react-uid`](https://github.com/thearnica/react-uid))`file` | `attributes`: Apply [element attributes](https://developer.mozilla.org/en/docs/Web/HTML/Element/video#Attributes)
`forceVideo`: Always render a `