ReactPlayer
A react component for playing media from YouTube, SoundCloud, Streamable, Vidme or Vimeo, as well as supported media files. 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 controlsNote: Vimeo player controls are not configurable and will always display |
false |
volume |
Sets the volume of the appropriate player | 0.8 |
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 fractioneg { 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
- YouTube videos use the YouTube iFrame Player API
- Soundcloud tracks are resolved and played in an
<audio>
element using the track’sstream_url
- Streamable videos are resolved and played in a
<video>
element using the track’smp4
path - Vidme videos are resolved and played in a
<video>
element using the track’scomplete_url
path - Vimeo videos use the Vimeo Player API
- Supported file types are playing using
<video>
or<audio>
elements
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.