A react component for playing a variety of URLs, including file paths, YouTube, SoundCloud and Vimeo
JavaScript CSS HTML
Latest commit a6191cf Jan 8, 2017 @CookPete Use cross-env for build scripts
Further fixes for #139

README.md

ReactPlayer

Latest npm version Build Status Dependency Status devDependency Status

A react component for playing a variety of URLs, including file paths, YouTube, SoundCloud, Streamable, Vidme, Vimeo and Wistia. 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
hidden Set to true to hide the player false
className Pass in a className to set on the root element
style Add inline styles to the root element
progressFrequency The time between onProgress callbacks, in milliseconds 1000

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
eg { played: 0.12, loaded: 0.34 }
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.
fileConfig Configuration object for the file player.
Set attributes to apply element attributes.
Preloading

Both youtubeConfig and vimeoConfig 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.

Methods

To seek to a certain part of the media, there is a seekTo(fraction) instance method that will seek to the appropriate place in the media. See App.js for an example of this using refs.

Supported media

Contributing

See the contribution guidelines before creating a pull request.

Thanks