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.

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

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

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.