0.5.6 • Published 8 years ago

blueberry-react-player v0.5.6

Weekly downloads
4
License
CC0-1.0
Repository
github
Last release
8 years ago

ReactPlayer

Latest npm version Build Status Dependency Status devDependency Status

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

Props

PropDescription
urlThe url of a video or song to play
playingSet to true or false to pause or play the media
volumeSets the volume of the appropriate player
widthSets the width of the player
heightSets the height of the player
classNamePass in a className to set on the top level element

Callback props

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

PropDescription
onProgressCallback containing played and loaded progress as a fractioneg { played: 0.12, loaded: 0.34 }
onDurationCallback containing duration of the media, in seconds
onPlayCalled when media starts or resumes playing after pausing or buffering
onPauseCalled when media is paused
onBufferCalled when media starts buffering
onEndedCalled when media finishes playing
onErrorCalled when an error occurs whilst attempting to play media

Config props

These props allow you to override the parameters for the various players

PropDescription
soundcloudConfigConfiguration object for the SoundCloud player. Set clientId, to your own SoundCloud app client ID
vimeoConfigConfiguration object for the Vimeo player. Set iframeParams, to override the default params. Set preload for preloading
youtubeConfigConfiguration 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

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