How to create Video Player in ReactJS ?

We are going to learn how we can create a Video Player in React JS. A video player is a kind of media player for playing back digital video data. React is a free and open-source front-end JavaScript library for building user interfaces or UI components.

Prerequisite:

• React JS
• Phases of JavaScript Event 

Approach to create Video Player:

To create our video player we are going to use the react-loading package because it is powerful, lightweight, and fully customizable. After that, we will add our video player to our homepage using the installed package. Subsequently, we'll integrate our video player onto our homepage using this installed package.

Steps to Create React Application:

Step 1: Create a react project folder and install locally by npm i create-react-app.

npm create-react-app project

Step 2: After creating your project folder, move to it by using the following command.

cd project

Step 3: Install the required package

npm i react-video-js-player

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "react-video-js-player": "^1.1.1",
    "web-vitals": "^2.1.4",
}

Example: In the below example first, we are importing the VideoPlayer component from the react-video-js-player package. After that, we are creating our onPlayerReady and state function. Then we are adding our Video Player using the VideoPlayer component of the installed package. Now add the below code in the App.js file to create the video player.

import React, { Component } from 'react';
import VideoPlayer from 'react-video-js-player';

class VideoApp extends Component {
    player = {}
    state = {
        video: {
            src: "/video.mp4",
            poster: "/1.png"
        }
    }

    onPlayerReady(player) {
        this.player = player;
    }

    render() {
        return (
            <div>
                <VideoPlayer
                    controls={true}
                    src={this.state.video.src}
                    poster={this.state.video.poster}
                    width="720"
                    height="420"
                    onReady={this.onPlayerReady.bind(this)}
                />
            </div>
        );
    }
}
export default VideoApp;

Steps to Run the application: Run the below command in the terminal to run the app.

npm start

Output: