Customizing the Media Player and Improving SEO

Users visit a media-streaming application mainly to play media and explore other related media. This makes the media player—and the view that renders the related media details—crucial to a streaming application.

In this chapter, we will focus on developing the play media page for the MERN Mediastream application that we started building in the previous chapter, Chapter 11, Building a Media Streaming Application. We will address the following topics to bolster the media-playing functionalities and to help boost the presence of the media content across the web so that it reaches more users:

• Customizing player controls on ReactPlayer
• Playing the next video from a list of related videos
• Autoplaying a list of related media
• Server-side rendering (SSR) of the PlayMedia view with data to improve search engine optimization ...

Adding a custom media player to MERN Mediastream

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 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 resemble the following screenshot:

The code for the complete MERN Mediastream application is available on GitHub at https://github.com/PacktPublishing/Full-Stack-React-Projects-Second-Edition/tree/master/Chapter11%20and%2012/mern-mediastream. You can clone this code and run the application as you go through the code explanations for the rest of this chapter.

The following component tree diagram shows all the custom components...

Listing related media

When a user is viewing an individual media on the application, they will also see a list of related media on the same page. The related media list will consist of other media records that belong to the same genre as the given video and is sorted by the highest number of views. For this feature, we will need to integrate a full-stack slice that retrieves the relevant list from the Media collection in the backend and renders it in the frontend. In the following sections, we will add a related media list API in the backend, along with a way to fetch this API in the frontend, and a React component that renders the list of media retrieved by this API.

The related media list API

We will implement an API endpoint...

The PlayMedia component

The PlayMedia component will render the play media page. This component consists of the Media and RelatedMedia child components along with an autoplay toggle, and it provides data to these components when it loads in the view.

To render the PlayMedia component when individual media links are accessed by the user, we will add a Route in MainRouter and mount PlayMedia at '/media/:mediaId', as follows:

mern-mediastream/client/MainRouter.js

<Route path="/media/:mediaId" component={PlayMedia}/>

When the PlayMedia component mounts, it will fetch the media data and the related media list from the server with useEffect hooks based on the mediaId parameter in the route link.

In one useEffect hook, it will fetch the media to be loaded in the media player, as shown in the following code:

mern-mediastream/client/media/PlayMedia.js

useEffect...

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 will first update the Media component discussed in the previous chapter, Chapter 11, Building a Media Streaming Application, to accommodate the new player features. Then, we will initialize a MediaPlayer component that will contain the...

Autoplaying related media

In the play media page, users will have the option to autoplay one video after the other from the related media list. To make this feature possible, the PlayMedia component will manage the autoplay state, which will determine the data and how it will be rendered next in the MediaPlayer and RelatedMedia components after the current video finishes streaming in the player. In the following sections, we will complete this autoplay functionality by adding a toggle in the PlayMedia component and implementing the handleAutoplay method, which needs to be called when a video ends in the MediaPlayer component.

Toggling autoplay

On the play media page, we will add an autoplay toggle option above the related...

Server-side rendering with data

SEO is important for any web application that delivers content to its users and wants to make the content easy to find. Generally, content on any web page will have a better chance of getting more viewers if the content is easily readable to search engines. When a search-engine bot accesses a web URL, it will get the SSR output. Hence, to make the content discoverable, the content should be part of the SSR output.

In MERN Mediastream, we will use the case of making media details popular across search engine results, to demonstrate how to inject data into an SSR view in a MERN-based application. We will focus on implementing SSR with data injected for the PlayMedia component that is returned at the '/media/:mediaId' path. The general implementation steps outlined here can be used to implement SSR with data for other views.

In the following...

Summary

In this chapter, we completely upgraded the play media page on MERN Mediastream. We first added custom media player controls, utilizing options available in the ReactPlayer component. Then, we incorporated the autoplay functionality for a related media playlist, after retrieving the related media from the database. Finally, we made the media details search-engine-readable by injecting data from the server when the view is rendered on the server.

You can apply the techniques explored in this chapter to build the play media page, to compose and build your own complex user interface with React components that are interdependent, and to add SSR with data for views that need to be SEO-friendly in your applications.

We have now explored advanced capabilities, such as streaming and SEO, with the MERN stack technologies. In the next two chapters, we will test the potential of...