Components and decorators to help build video & audio players in React. Supports HTML5, Youtube, and Vimeo media types.
npm install react-media-player --save
<scriptsrc="https://unpkg.com/react-media-player/dist/react-media-player.js"></script> (UMD library exposed as `ReactMediaPlayer`)A special wrapper component that collects information from the Player component and passes down the proper props to withMediaProps decorator.
This is another special component that renders your player and communicates with the Media wrapper.
This is the source of the media you want to play. Currently supporting Youtube, Vimeo, and any HTML5 compatible video or audio.
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 media when the component is mounted or src changes.
Loop the current src indefinitely.
When playing HTML5 audio, it will construct audio using the Audio class instead of rendering an element to the page.
A chance to connect a series of AudioNode[s] when using the audio vendor. Must return a new audio node that will be connected to audioContext.destination internally.
Callback when media starts playing.
Callback when media has been paused.
Callback when an error occurs.
Callback when the duration of the media has been calculated.
Callback when media starts downloading.
Callback when media time has changed.
Callback when the player has been muted.
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>)}}Passes down helpful state information and methods to build custom media player controls. Please note that children must be wrapped in the Media component.
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)importReactfrom'react'importCustomPlayPausefrom'./CustomPlayPause'functionApp(){return(<Media><CustomPlayPause/><Playersrc="https://youtu.be/VOyYwzkQB98"/></Media>)}exportdefaultAppA 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>)}}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)clone repo
git clone [email protected]: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/