ReactPlayer

A react component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vidme, Vimeo, Wistia and DailyMotion.

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 Vidme videos you will need a fetch polyfill for browsers without fetch
• To support IE11 you will need to use babel-polyfill or a similar ES2015+ polyfill.

Usage

npm install react-player --save
# or
yarn add react-player

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:dist

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 # or yarn
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, Twitch and Wistia player controls are not configurable and will always display | false volume | Sets the volume of the appropriate player | 0.8 muted | Mutes the player | false playbackRate | Sets the playback rate of the appropriate playerNote: Only supported by YouTube, Wistia, and file paths | 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 config | Override options for the various players, see config prop

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, and playedSeconds and loadedSeconds in 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 onSeek | Called when media seeks with seconds parameter onEnded | Called when media finishes playing onError | Called when an error occurs whilst attempting to play media

Config prop

As of version 0.24, there is a single config prop to override the settings for the various players. If you are migrating from an earlier version, you must move all the old config props inside config:

<ReactPlayer
  url={url}
  config={{
    youtube: {
      playerVars: { showinfo: 1 }
    },
    facebook: {
      appId: '12345'
    }
  }}
/>

The old style config props still work but will produce a console warning:

<ReactPlayer
  url={url}
  youtubeConfig={{ playerVars: { showinfo: 1 } }}
  facebookConfig={{ appId: '12345' }}
/>

Settings for each player live under different keys:

Key | Options --- | ------- youtube | playerVars: Override the default player varspreload: Used for preloading facebook | appId: Your own Facebook app ID soundcloud | options: Override the default player options vimeo | playerOptions: Override the default paramspreload: Used for preloading. vidme | format: Use a certain quality of video, when available  ◦  Possible values: 240p, 480p, 720p, 1080p, dash, hls wistia | options: Override the default player options dailymotion | params: Override the default player varspreload: Used for preloading file | attributes: Apply element attributesforceAudio: Always render an <audio> elementforceHLS: Use hls.js for HLS streamsforceDASH: Always use dash.js for DASH streams

Preloading

When preload is set to true for players that support it, a short, silent video is played 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'
  config={{ file: {
    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

Static Methods

Method | Description ---- | ----------- ReactPlayer.canPlay(url) | Determine if a URL can be played. This does not detect media that is unplayable due to privacy settings, streaming permissions, etc. In that case, the onError prop will be invoked after attemping to play. Any URL that does not match any patterns will fall back to a native HTML5 media player.

Instance Methods

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

Method | 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 getInternalPlayer() | Returns the internal player of whatever is currently playing  ◦  eg the YouTube player instance, or the <video> element when playing a video file  ◦  Use getInternalPlayer('hls') to get the hls.js player  ◦  Use getInternalPlayer('dash') to get the dash.js player

Supported media

• YouTube videos use the YouTube iFrame Player API
• Facebook videos use the Facebook Embedded Video Player API
• SoundCloud tracks use the SoundCloud Widget API
• 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
• Twitch videos use the Twitch Interactive Frames 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

Huge thanks to anyone who has contributed