Full-Stack React Projects - Second Edition

Customizing the media player

In MERN Mediastream, we want to provide users with a media player with more controls than those available in the default browser options, and with a look that matches the rest of the application. We will customize the player controls on ReactPlayer to replace these default controls with a custom look and functionality, as seen in the following screenshot:

The controls will be added below the video and will include the progress seeking bar; the play, pause, next, volume, loop, and fullscreen options; and will also display full duration of the video and the amount that's been played. In the following sections, we ...