In this article, we are going to learn how we can create Video Player in ReactJS. 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. It is maintained by Facebook and a community of individual developers and companies.
Approach: 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.
Create ReactJs Application: You can create a new ReactJs project using the below command:
npx create-react-app gfg
Install the required package: Now we will install the react-video-js-player package using the below command:
npm i react-video-js-player
Project Structure: It will look like this.
Adding Video Player: In this example, we are going to add the react-loading on the homepage of our app using the package that we installed. We are using the below image and video in the example.
Now add the below code in the App.js file to create the video player.
Javascript
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; |
Explanation: In the above 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.
Steps to run the application: Run the below command in the terminal to run the app.
npm start
Output:
