React Media Player

Components and decorators to help build video & audio players in React. Supports HTML5, Youtube, and Vimeo media types.

Install

npm install react-media-player --save

<scriptsrc="https://unpkg.com/react-media-player/dist/react-media-player.js"></script>
(UMD library exposed as `ReactMediaPlayer`)

Media component

A special wrapper component that collects information from the Player component and passes down the proper props to withMediaProps decorator.

Player component

This is another special component that renders your player and communicates with the Media wrapper.

src: PropTypes.string.isRequired

This is the source of the media you want to play. Currently supporting Youtube, Vimeo, and any HTML5 compatible video or audio.

vendor: PropTypes.oneOf(['youtube', 'vimeo', 'audio', 'video'])

Explicitly choose which internal component to render for the player. If nothing is set, the library does its best to determine what player to render based on the source passed in.

autoPlay: PropTypes.bool

Autoplay media when the component is mounted or src changes.

loop: PropTypes.bool

Loop the current src indefinitely.

onPlay: PropTypes.func

Callback when media starts playing.

onPause: PropTypes.func

Callback when media has been paused.

onError:PropTypes.func

Callback when an error occurs.

onDuration: PropTypes.func

Callback when the duration of the media has been calculated.

onProgress: PropTypes.func

Callback when media starts downloading.

onTimeUpdate: PropTypes.func

Callback when media time has changed.

onMute: PropTypes.func

Callback when the player has been muted.

onVolumeChange: PropTypes.func

Callback when the player volume has changed.

importReact,{Component}from'react'import{Media,Player,controls}from'react-media-player'const{ PlayPause, MuteUnmute,}=controlsclassMediaPlayerextendsComponent{render(){return(<Media><divclassName="media"><divclassName="media-player"><Playersrc="http://www.youtube.com/embed/h3YVKTxTOgU"/></div><divclassName="media-controls"><PlayPause/><MuteUnmute/></div></div></Media>)}}

withMediaProps decorator props exposed under this.props.media

Passes down helpful state information and methods to build custom media player controls.

currentTime: PropTypes.number

progress: PropTypes.number

duration: PropTypes.number

volume: PropTypes.number

isLoading: PropTypes.bool

isPlaying: PropTypes.bool

isMuted: PropTypes.bool

isFullscreen: PropTypes.bool

play: PropTypes.func

pause: PropTypes.func

playPause: PropTypes.func

stop: PropTypes.func

seekTo: PropTypes.func

mute: PropTypes.func

muteUnmute: PropTypes.func

setVolume: PropTypes.func

fullscreen: PropTypes.func

importReact,{Component}from'react'import{withMediaProps}from'react-media-player'classCustomPlayPauseextendsComponent{shouldComponentUpdate({ media }){returnthis.props.media.isPlaying!==media.isPlaying}_handlePlayPause=()=>{this.props.media.playPause()}render(){const{ className, style, media }=this.propsreturn(<buttontype="button"className={className}style={style}onClick={this._handlePlayPause}>{media.isPlaying ? 'Pause' : 'Play'}</button>)}}exportdefaultwithMediaProps(CustomPlayPause)

utils.keyboardControls

A special function that will provide keyboard support to the media player.

importReact,{Component}from'react'import{Media,Player,controls,utils}from'react-media-player'const{ PlayPause, CurrentTime, Progress, SeekBar, Duration, MuteUnmute, Volume, Fullscreen }=controlsconst{ keyboardControls }=utilsclassMediaPlayerextendsComponent{render(){const{ Player, keyboardControls }=this.propsreturn(<Media>{mediaProps=><divclassName="media"onKeyDown={keyboardControls.bind(null,mediaProps)}><Playersrc="against-them-all.mp3"className="media-player"/><divclassName="media-controls"><PlayPause/><CurrentTime/><Progress/><SeekBar/><Duration/><MuteUnmute/><Volume/><Fullscreen/></div></div>}</Media>)}}

utils.formatTime

A helper function to format time.

importReact,{Component}from'react'import{withMediaProps,utils}from'react-media-player'const{ formatTime }=utilsclassCurrentTimeextendsComponent{shouldComponentUpdate({ media }){returnthis.props.media.currentTime!==media.currentTime}render(){const{ className, style, media }=this.propsreturn(<timeclassName={className}style={style}>{formatTime(media.currentTime)}</time>)}}exportdefaultwithMediaProps(CurrentTime)

Running Locally

clone repo

git clone git@github.com:souporserious/react-media-player.git

move into folder

cd ~/react-media-player

install dependencies

npm install

run dev mode

npm run dev

open your browser and visit: http://localhost:8080/