Package Exports

react-player
react-player/lib/players/FilePlayer
react-player/lib/players/YouTube

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-player) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ReactPlayer

A react component for playing media from YouTube, SoundCloud and Vimeo, as well as supported media files.

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.

Usage

npm install react-player --save

import React, { Component } from 'react'
import ReactPlayer from 'react-player'

class App extends Component {
  render () {
    <ReactPlayer
      url='https://www.youtube.com/watch?v=ysz5S6PUM-U'
      playing={true}
    />
  }
}

See App.js for a full example

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

Props

Prop	Description
`url`	The url of a video or song to play
`playing`	Set to `true` or `false` to pause or play the media
`volume`	Sets the volume of the appropriate player
`width`	Sets the width of the player
`height`	Sets the height of the player
`className`	Pass in a `className` to set on the top level element

Callback props

Callback props take a function that gets fired on various player events

Prop	Description
`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
`onPlay`	Called when media starts or resumes playing after pausing or buffering
`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
`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

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

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 refs.

Supported Media

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

Linting

This project uses standard code style.

npm run lint

Testing

This project uses mocha with chai assertions for unit testing.

npm run test

Thanks

gaearon for his react-transform-boilerplate, which this repo is roughly based on.
Simon Smith for his intro to react testing with shallow rendering
Fauntleroy for his contributions