ReactPlayer Example

Starting point for creating JSFiddles with React. This uses React with Addons.

by mrcoles

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/react-player/dist/ReactPlayer.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.player-wrapper {
  position: relative;
  padding-top: 56.25%; /* 720 / 1280 = 0.5625 */
}

.react-player {
  position: absolute;
  top: 0;
  left: 0;
}

.buttons {
  display: flex;
  align-items: center;
}

.buttons > * {
  margin-right: 5px;
  margin-top: 20px;
  margin-bottom: 20px;
}

Babel + JSX

class Player extends React.Component {
	constructor() {
  	super()
  	this.state = {
  		playing: false
  	}
    this.setPlaying = this.setPlaying.bind(this)
  }
  
  setPlaying (value) {
  	this.setState(prevState => ({ ...prevState, playing: value }));
  }
  
  render () {
  	const { playing } = this.state
    return (
    	<div>
        <h3>react-player: playing = undefined or false test</h3>
        <p>
         This react-player component starts off with `playing` set to undefined. Try the following: 
        </p>
        <ol>
          <li>Start the video by pressing play on the video itself</li>
          <li>Click the “Set playing to: false” button below to try and stop the video</li>
          <li>Video keeps playing.</li>
        </ol>
        <div className='player-wrapper'>
          <ReactPlayer
            url='https://www.youtube.com/watch?v=qWVc-xVZxho'
            className='react-player'
            playing={playing}
            controls
            width='100%'
            height='100%'
            onPlay={() => this.setPlaying(true)}
            onPause={() => this.setPlaying(false)}
          />
        </div>
        <p>
          <span>Current state of playing = {playing === undefined ? 'undefined' : String(playing)}</span>
        </p>
        <p>
          <button onClick={() => this.setState({ playing: playing === false ? true : false })}>
            Set playing to {playing === false ? 'true' : 'false'}  
          </button>
          <br /><br />
        </p>
      </div>
    )
  }
}

ReactDOM.render(
  <Player />,
  document.getElementById('container')
);