Media player

We will customize the player controls on ReactPlayer to replace the default browser controls with a custom look and functionality, as seen in this screenshot:

The controls will be added below the video and will include the progress seekbar, the play, pause, next, volume, loop, and fullscreen options, and also display the played-duration time.

Updating the Media component

We will create a new MediaPlayer component that will contain the customized ReactPlayer. In the Media component, we will replace the previously used ReactPlayer with the new MediaPlayer component, and pass on the video source URL, the next video's URL and the handleAutoPlay method, which are received as props from the PlayMedia component.

mern-mediastream/client/media/Media.js:

const mediaUrl = this.props.media._id
          ? `/api/media/video/${this.props.media._id}`
          : null
...
<MediaPlayer srcUrl={mediaUrl} 
             nextUrl={this.props.nextUrl} 
             handleAutoplay={this.props.handleAutoplay...