Cómo crear un reproductor de video en React
Crear un reproductor de video en React puede parecer una tarea desafiante. Pero con las herramientas y técnicas adecuadas, puede hacerlo con relativa facilidad.
Hay dos formas de crear un reproductor de video en React: usando funciones integradas y usando bibliotecas de terceros.
Crear un reproductor de video en React
Antes de crear un reproductor de video React, asegúrese de tener una comprensión básica de HTML, CSS y JavaScript.
Comience creando una aplicación React básica para agregar la siguiente funcionalidad de reproductor de video.
Uso de funciones integradas (React Hooks)
La primera opción para crear un reproductor de video en React es usar las funciones integradas.
Comience por crear el componente del reproductor que mostrará el video y todos sus controles. Para hacer esto, cree un archivo llamado “Player.js” y agregue el siguiente código:
import React from 'react';
const Player = () => {
return (
<div>
<video width="100%" height="100%" controls>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
</video>
</div>
)
}
export default Player;
Este código importa la biblioteca React y crea un componente de jugador. También agrega un elemento de video con el atributo de controles establecido en «verdadero». Esto agregará el reproductor de video básico a la página.
A continuación, agregue el botón de reproducción/pausa. Para hacer esto, deberá agregar algunas líneas de código al componente del reproductor. Agregue el siguiente código al archivo Player.js:
import React, { useState, useRef } from 'react';
const Player = () => {
const [isPlaying, setIsPlaying] = useState(false);
const videoRef = useRef(null);
const togglePlay = () => {
if (isPlaying) {
videoRef.current.pause();
} else {
videoRef.current.play();
}
setIsPlaying(!isPlaying);
};
return (
<div>
<video
ref={videoRef}
width="100%"
height="100%"
controls
>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
</video>
<button onClick={togglePlay}>
{isPlaying? "Pause": "Play"}
</button>
</div>
)
}
export default Player;
Este código usa los ganchos useState y useRef para realizar un seguimiento del estado del video (ya sea que se esté reproduciendo o en pausa) y la referencia al elemento de video. También agrega una función togglePlay que reproducirá y pausará el video. El elemento del botón activará la función togglePlay.
El último paso es agregar la barra de progreso. Para hacer esto, deberá agregar algunas líneas más de código al archivo Player.js. Agregue lo siguiente:
import React, { useState, useRef } from 'react';
const Player = () => {
const [isPlaying, setIsPlaying] = useState(false);
const [progress, setProgress] = useState(0);
const videoRef = useRef(null);
const togglePlay = () => {
if (isPlaying) {
videoRef.current.pause();
} else {
videoRef.current.play();
}
setIsPlaying(!isPlaying);
};
const handleProgress = () => {
const duration = videoRef.current.duration;
const currentTime = videoRef.current.currentTime;
const progress = (currentTime / duration) * 100;
setProgress(progress);
};
return (
<div>
<video
onTimeUpdate={handleProgress}
ref={videoRef}
width="100%"
height="100%"
controls
>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
</video>
<div>
<button onClick={togglePlay}>
{isPlaying? "Pause": "Play"}
</button>
<progress value={progress} max="100" />
</div>
</div>
)
}
export default Player;
Este código agrega la función handleProgress. Esta función actualizará la barra de progreso. También agrega un detector de eventos onTimeUpdate al elemento de video que activará la función handleProgress. Finalmente, agrega un elemento de progreso a la página con el valor y los atributos máximos establecidos en el progreso y 100 respectivamente.
Uso de bibliotecas de terceros
La segunda opción para crear un reproductor de video en React es usar bibliotecas de terceros. Hay muchas bibliotecas disponibles, pero algunas de las más populares son ReactPlayer y React-media-player.
ReactPlayer
ReactPlayer es una biblioteca simple y liviana que le permite crear un reproductor de video con solo unas pocas líneas de código. Para instalarlo, ejecute el siguiente comando en su terminal:
npm install react-player
Una vez instalado, puedes usarlo así:
import React from 'react';
import ReactPlayer from 'react-player';
const Player = () => {
return (
<ReactPlayer
url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
width="100%"
height="100%"
controls
/>
)
}
export default Player;
Este código importa el componente ReactPlayer de la biblioteca de react-player y lo agrega a la página. Establece los atributos de URL, ancho, alto y controles. Eche un vistazo a cada uno de estos parámetros uno por uno:
- url: esta es la URL del video que desea reproducir.
- ancho: este es el ancho del reproductor de video.
- altura: Esta es la altura del reproductor de video.
- controles: este es un atributo booleano que determina si el reproductor de video tendrá controles o no.
reaccionar-video-js-player
react-video-js-player es otra biblioteca simple y liviana que le permite crear un reproductor de video con solo unas pocas líneas de código. Para instalarlo, ejecute el siguiente comando en su terminal:
npm install react-video-js-player
Una vez instalado, puedes usarlo así:
import React from "react";
import VideoPlayer from "react-video-js-player";
const Player = () => {
return (
<VideoPlayer
width="100%"
height="100%"
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
controls
/>
)
}
export default Player;
Este código importa el componente VideoPlayer de la biblioteca react-video-js-player y lo agrega a la página.
Funciones adicionales del reproductor de video
Puede agregar funciones adicionales a su reproductor de video, como:
- Adición de un póster: puede agregar una imagen de póster a su reproductor de video configurando el atributo de póster del elemento de video en la URL de la imagen.
- Bucle: puede reproducir su video en bucle configurando el atributo de bucle del elemento de video en «verdadero».
- Silenciado: puede silenciar su video configurando el atributo silenciado del elemento de video en «verdadero».
- Reproducción automática: puede reproducir automáticamente su video configurando el atributo de reproducción automática del elemento de video en «verdadero».
También puede agregar sus propios controles personalizados al reproductor de video. Para hacer esto, deberá agregar detectores de eventos al elemento de video y escribir funciones para controlar el video.
Aumente la participación de los usuarios con un reproductor de video
Con las herramientas y técnicas adecuadas, puede crear fácilmente un reproductor de video en React. También puede agregar funciones adicionales para aumentar la participación del usuario. Los reproductores multimedia son una excelente manera de aumentar la participación de los usuarios en su sitio web o aplicación.
Después de agregar un reproductor de video a su sitio, asegúrese de realizar un seguimiento de la participación del usuario para ver si está teniendo el efecto deseado. También puede implementar pruebas A/B para ver si agregar un reproductor de video aumenta las tasas de conversión.
Deja una respuesta