ReactPlayer Example

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

by Niranjan Rajendran

HTML

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/react-player/dist/ReactPlayer.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;
}

Babel + JSX

function Player() {
	const [playing, setPlaying] = React.useState(true);
  const ref = React.useRef(null);
  return (
    	<div>
        <div className='player-wrapper'>
          <ReactPlayer
            ref={ref}
            url='https://mockingjay-filestore.sgp1.digitaloceanspaces.com/tests/b78d0eb9-123b-4dac-99ba-caccfcf72059/recording.webm?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=45Y4F4R5KVHOLT7IX3NQ%2F20220511%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20220511T181233Z&X-Amz-Expires=3600&X-Amz-Signature=6bddfcd27276d153c628e42df3538ea65bbc6c7f2dc0800fbab2ac1986ae6e4a&X-Amz-SignedHeaders=host&x-id=GetObject'
            className='react-player'
            playing={playing}
            muted
            onDuration={(e) => console.log('onDuration', e)}
            onProgress={(e) => console.log('onProgress', e)}
            width={1024}
            height={768}
          />
        </div>
        <button onClick={() => setPlaying(!playing)}>
          {playing ? 'Pause' : 'Play'}  
        </button>
      </div>
    )
}

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