MERN Mediastream with a custom media player

The MERN Mediastream application developed in the previous chapter implemented a simple media player with default browser controls that played one video at a time. In this chapter, we will update the view that plays the media with a customized ReactPlayer and a related media list that can be set to play automatically when the current video ends. The updated view with the custom player and related playlist will look as pictured in this screenshot:

Note

The code for the complete MERN Mediastream application is available on GitHub at github.com/shamahoque/mern-mediastream. You can clone this code and run the application as you go through the code explanations in the rest of this chapter. 

The following component tree diagram shows all the custom components that make up the MERN Mediastream frontend, highlighting the components that will be improved or added in this chapter:

New components added in this chapter include theMediaPlayercomponent, which adds...