simple-react-player v0.0.2
SimpleReactPlayer
A react audio component for playing a variety of URLs, including file paths. This is a modified version of react player (http://cookpete.com/react-player) for a dj app i built. I stripped down react-player to a basic audio element that retains the props from the original react-player. I have also added a crossOrigin prop (works with SoundCloud SDK)
Polyfills
If you are using npm and need to support browsers without Promise you will need a Promise polyfill. To support Streamable or Vidme videos you will also need a fetch polyfill for browsers without fetch
Usage
npm install simple-react-player --saveimport 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 />
}
}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 player controls are not configurable and will always display | false |
volume | Sets the volume of the appropriate player | 0.8 |
playbackRate | Sets the playback rate of the appropriate player | 1 |
width | Sets the width of the player | 640 |
height | Sets the height of the player | 360 |
hidden | Set to true to hide the player | false |
className | Pass in a className to set on the root element | |
style | Add inline styles to the root element | |
progressFrequency | The time between onProgress callbacks, in milliseconds | 1000 |
crossOrigin | either 'anonymous' or 'use-credentials' | anonymous |
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 fractioneg { played: 0.12, loaded: 0.34 } |
onDuration | Callback containing duration of the media, in seconds |
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
This prop allows you to override the parameters for the player:
| Prop | Description |
|---|---|
fileConfig | Configuration object for the file player.Set attributes to apply element attributes. |
Methods
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
- Supported file types are playing using
<audio>elements
Thanks
- Anyone who has contributed
- gaearon for his react-transform-boilerplate, which this repo is roughly based on.