Changes in this fork
This fork adds the "progressCallbackFrequency" prop.
A react component for playing media from YouTube, SoundCloud and 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.
npm install react-player --save
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 install react-player --save
See a live demo, or run:
git clone https://github.com/CookPete/react-player.gitcd react-playernpm installnpm startopen http://localhost:3000
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:
<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).
||The url of a video or song to play|
||Sets the volume of the appropriate player|
||Sets the width of the player|
||Sets the height of the player|
||Pass in a
Callback props take a function that gets fired on various player events
||Callback containing duration of the media, in seconds|
||Called when media starts or resumes playing after pausing or buffering|
||Called when media is paused|
||Called when media starts buffering|
||Called when media finishes playing|
||Called when an error occurs whilst attempting to play media|
These props allow you to override the parameters for the various players
||Configuration object for the SoundCloud player. Set
||Configuration object for the Vimeo player. Set
||Configuration object for the YouTube player. Set
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.
There is a static method
ReactPlayer.canPlay(url) to determine if a URL can be played by the media player. Note that this does not detect media that is unplayable due to streaming permissions etc. In that case,
onError will occur after attemping to play.
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
- YouTube videos use the YouTube iFrame Player API
- Soundcloud tracks use the Soundcloud JS SDK 2.0
- Vimeo videos use the Vimeo Player API
- MP4/WEBM/OGG/MP3/WAV files use the HTML media object
This project uses standard code style.
npm run lint
npm run test