Videojs end screen / overlay at the end on React

This article will explain how to add an end screen or an overlay at the end of a video on videojs. There are few videojs plugins for end screen such as `videojs-endcard` and `videojs-suggestedvideoendcap`. However, these plugins weren’t compatible with react at the time. Therefore, we decided to implement it in React. This example can be taken as an example for videojs implementation in React js as well. ( videojs in react js )

Demo here

First, a video component was created.

Next, the component was imported in the page required.

The end screen data can be taken from a back-end call, with the details required as referred as `endScreenData` prop in Player component.

Next, back in video component, a flag added in the state for `isEnd`

this.state = { isEnd: false };

After, to change the flag when ‘ended’ event fired, the following was implemented.

this.player.on('ended', () => {     
 this.setState({ isEnd: true });      
});

Finally, overlay was added in render when the state ‘isEnd’ is true.

Here is the final result.

Demo

Final Video component

Hope it was helpful for you.

I would like to thank Zhang Ji Zhen for the help me in implementation.