May 2018
Intermediate to advanced
470 pages
13h 54m
English
The MediaPlayer component will contain the ReactPlayer component, starting with the initial control values before we add the custom controls and handling code.
First, we will set the initial control values to state.
mern-mediastream/client/media/MediaPlayer.js:
state = { playing: true, volume: 0.8, muted: false, played: 0, loaded: 0, duration: 0, ended:false, playbackRate: 1.0, loop: false, fullscreen: false, videoError: false}
In the view, we will add ReactPlayer with the control values and source URL, using the prop sent from the Media component.
mern-mediastream/client/media/MediaPlayer.js:
const { playing, ended, volume, muted, loop, played, loaded, duration, playbackRate, fullscreen, videoError } = this.state ...Read now
Unlock full access