ReactPlayer

A react component for playing a variety of URLs, including file paths, YouTube, Facebook, SoundCloud, Streamable, Vidme, Vimeo, Wistia and DailyMotion. Used by rplayr, an app to generate playlists from Reddit URLs.

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.

Polyfills

If you are using npm and need to support browsers without Promise you will need a Promise polyfill. To support Streamable or Vidme videos you will also need a fetch polyfill for browsers without fetch

Usage

npm install react-player --save

import React, { Component } from 'react'
import ReactPlayer from 'react-player'

class App extends Component {
  render () {
    return <ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' playing />
  }
}

See the demo source for a full example.

For platforms like Meteor 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:browser

Bower

bower install react-player --save

<script src='bower_components/react/react.js'></script>
<script src='bower_components/react/react-dom.js'></script>
<script src='bower_components/react-player/dist/ReactPlayer.js'></script>
<script>
  ReactDOM.render(
    <ReactPlayer url='https://www.youtube.com/watch?v=d46Azg3Pm4c' playing />,
    document.getElementById('container')
  )
</script>

Demo

See a live demo, or run:

git clone https://github.com/CookPete/react-player.git
cd react-player
npm install
npm start
open http://localhost:3000

Mobile considerations

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).

Props

Prop	Description	Default
`url`	The url of a video or song to play
`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 Note: Vimeo player controls are not configurable and will always display	`false`
`volume`	Sets the volume of the appropriate player	`0.8`
`playbackRate`	Sets the playback rate of the appropriate player	`1`
`width`	Sets the width of the player	`640`
`height`	Sets the height of the player	`360`
`style`	Add inline styles to the root element
`progressFrequency`	The time between `onProgress` callbacks, in milliseconds	`1000`
`playsinline`	Applies the `playsinline` attribute where supported	`false`

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 progress `played`, `loaded` (fraction), `playedSeconds` and `loadedSeconds` (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
`onEnded`	Called when media finishes playing
`onError`	Called when an error occurs whilst attempting to play media

Config props

These props allow you to override the parameters for the various players:

Prop	Description
`soundcloudConfig`	Configuration object for the SoundCloud player. Set `clientId` to your own SoundCloud app client ID. Set `showArtwork` to `false` to not load any artwork to display.
`vimeoConfig`	Configuration object for the Vimeo player. Set `iframeParams` to override the default params. Set `preload` for preloading.
`youtubeConfig`	Configuration object for the YouTube player. Set `playerVars` to override the default player vars. Set `preload` for preloading.
`vidmeConfig`	Configuration object for the Vidme player. Set `format` to use a certain quality of video, when available. Possible values: `240p`, `480p`, `720p`, `1080p`, `dash`, `hls`
`wistiaConfig`	Configuration object for the Wistia player. Set `options` to override the default player options
`dailymotionConfig`	Configuration object for the DailyMotion player. Set `params` to override the default player vars. Set `preload` for preloading.
`fileConfig`	Configuration object for the file player. Set `attributes` to apply element attributes. Set `forceAudio` to always render an `<audio>` element. Set `forceHLS` to use hls.js for HLS streams. Set `forceDASH` to always use dash.js for DASH streams.
`facebookConfig`	Configuration object for the Facebook player. Set `appId` to your own Facebook app ID.

Preloading

Both youtubeConfig, vimeoConfig, dailymotionConfig props can take a preload value. Setting this to true will play a short, silent video in the background when ReactPlayer first mounts. This fixes a bug where videos would not play when loaded in a background browser tab.

Multiple Sources and Tracks

When playing file paths, an array of sources can be passed to the url prop to render multiple <source> tags.

<ReactPlayer playing url={['foo.webm', 'foo.ogg']} />

You can also specify a type for each source by using objects with src and type properties.

<ReactPlayer
  playing
  url={[
    {src: 'foo.webm', type: 'video/webm'},
    {src: 'foo.ogg', type: 'video/ogg'}
  ]}
/>

<track> elements for subtitles can be added using fileConfig:

<ReactPlayer
  playing
  url='foo.webm'
  fileConfig={{
    tracks: [
      {kind: 'subtitles', src: 'subs/subtitles.en.vtt', srcLang: 'en', default: true},
      {kind: 'subtitles', src: 'subs/subtitles.ja.vtt', srcLang: 'ja'},
      {kind: 'subtitles', src: 'subs/subtitles.de.vtt', srcLang: 'de'}
    ]
  }}
/>

Methods

Use ref to call methods on the player. See the demo app for an example of this.

Prop	Description
`seekTo(amount)`	Seek to the given number of seconds, or fraction if `amount` is between `0` and `1`.
`getCurrentTime()`	Returns the number of seconds that has been played. Returns `null` if duration is unavailable.
`getDuration()`	Returns the duration (in seconds) of the currently playing media. Returns `null` if duration is unavailable.

Supported media

YouTube videos use the YouTube iFrame Player API
Facebook videos use the Facebook Embedded Video Player API
Soundcloud tracks are resolved and played in an <audio> element using the track’s stream_url
Streamable videos are resolved and played in a <video> element using the track’s mp4 path
Vidme videos are resolved and played in a <video> element using the track’s complete_url path
Vimeo videos use the Vimeo Player API
Wistia videos use the Wistia Player API
DailyMotion videos use the DailyMotion Player API
Supported file types are playing using <video> or <audio> elements
- HLS streams are played using hls.js
- DASH streams are played using dash.js

Contributing

See the contribution guidelines before creating a pull request.

Thanks

Anyone who has contributed
gaearon for his react-transform-boilerplate, which this repo is roughly based on.

teramotodaiki/react-player