cookpete
commented
6 years ago Hi @inglesuniversal,
Editing the app.js bundle is a bad idea. That file is just a minified version of App.js that serves the demo page.
This jsFiddle example will hopefully get you started. It renders a simple ReactPlayer instance with play/pause/fullscreen buttons. Notice under External Resources on the left that it is pulling in the React development files, the ReactPlayer dist file, and the screenfull util for the fullscreen function.
If you wanted a standalone HTML version to use, you could paste the code from the fiddle into React's HTML file example, like so:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>ReactPlayer Example</title>
<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/babel-standalone@6.15.0/babel.min.js"></script>
<script src="https://unpkg.com/react-player/dist/ReactPlayer.js"></script>
<script src="https://unpkg.com/screenfull"></script>
</head>
<body>
<div id="container" style="width: 480px"></div>
<script type="text/babel">
class App extends React.Component {
constructor (props) {
super(props)
this.onClickFullscreen = this.onClickFullscreen.bind(this)
this.state = {
playing: true
}
}
onClickFullscreen () {
screenfull.request(ReactDOM.findDOMNode(this.refs.player))
}
render() {
return (
<div>
<ReactPlayer
ref='player'
url="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
playing={this.state.playing}
width='100%'
height='100%'
/>
<button onClick={() => this.setState({ playing: true })}>Play</button>
<button onClick={() => this.setState({ playing: false })}>Pause</button>
<button onClick={this.onClickFullscreen}>Fullscreen</button>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('container')
);
</script>
</body>
</html>Note that both the fiddle and the HTML example use Babel to transpile the code inline. This is fine for demo purposes, but for a production app you should compile/bundle your files using webpack or similar.
Hello:
Since I am new to react, I am not quite sure how to go about editing the code so I can have a simplified version to show only the player's window and play/pause fullscreen buttons. I tried to edit the app.js from the demo website, but the code is huge and is all merged into one line.
I can install the code on my own AWS EC2 server. Just need a little advice.
Any pointers to help me get started?
Thanks