¿Cómo crear un reproductor de video en ReactJS?

En este artículo, vamos a aprender cómo podemos crear un reproductor de video en ReactJS. Un reproductor de video es un tipo de reproductor multimedia para reproducir datos de video digital.

React es una biblioteca JavaScript front-end gratuita y de código abierto para crear interfaces de usuario o componentes de interfaz de usuario. Es mantenido por Facebook y una comunidad de desarrolladores individuales y empresas.

Enfoque: para crear nuestro reproductor de video, usaremos el paquete de carga reactiva porque es poderoso, liviano y totalmente personalizable. Después de eso, agregaremos nuestro reproductor de video a nuestra página de inicio usando el paquete instalado.

Crear aplicación ReactJs: puede crear un nuevo proyecto ReactJs usando el siguiente comando:

npx create-react-app gfg

Instale el paquete requerido: ahora instalaremos el paquete react-video-js-player usando el siguiente comando:

npm i react-video-js-player

Estructura del proyecto: Se verá así.

Agregar reproductor de video: en este ejemplo, agregaremos la carga de reacción en la página de inicio de nuestra aplicación usando el paquete que instalamos. Estamos usando la imagen y el video a continuación en el ejemplo.

Ahora agregue el siguiente código en el archivo App.js para crear el reproductor de video.

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;

Explicación: primero en el ejemplo anterior, estamos importando el componente VideoPlayer del paquete react-video-js-player. Después de eso, estamos creando nuestra función onPlayerReady y state. Luego estamos agregando nuestro reproductor de video usando el componente VideoPlayer del paquete instalado.

Pasos para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar la aplicación.

npm start

Producción: