Crear un reproductor de video en React puede parecer una tarea desalentadora. Pero con las herramientas y técnicas adecuadas, puede hacerlo con relativa facilidad.
Hay algunas formas simples de crear un reproductor de video en React: usando funciones integradas y usando bibliotecas de terceros. Verificar Cómo crear objetos de arrastrar y soltar en React.
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.
Usar funciones integradas (ganchos de interacción)
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 el componente de inicio. También agrega un elemento de video con el atributo de controles establecido en verdadero. Esto agregará el reproductor de video principal 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 configurador del iniciador. 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 un gancho usoEstado و utilizarRef Realiza un seguimiento del estado del video (si se está reproduciendo o está en pausa) e indica el elemento del video. También agrega funcionalidad alternarReproducir que reproducirá y pausará el video. El elemento del botón activará la función togglePlay.
El último paso es agregar una barra de progreso. Para hacer esto, deberá agregar algunas líneas de código al archivo Player.js. Necesitas agregar 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 manejar el progreso. Esta función actualizará la barra de progreso. El código también agrega un detector de eventos. actualización en el tiempo al elemento de video que activará la función handleProgress. Finalmente, agrega un elemento de progreso a la página con los atributos valor, progreso máximo y 100 establecidos respectivamente. Verificar Cómo configurar el ratón para usarlo cómodamente.
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 las más populares son ReactPlayer y React-media-player.
Reaccionar jugador
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 instalarlos, ejecute el siguiente comando en la Terminal:
npm install react-player
Una vez instalado, puede usarlo de la siguiente manera:
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 ReactPlayer 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 especifica si el reproductor de video incluirá controles.
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 instalarlos, ejecute el siguiente comando en la Terminal:
npm install react-video-js-player
Una vez instalado, puede usarlo de la siguiente manera:
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:
- Agregue un póster: puede agregar una imagen de póster a su reproductor de video configurando el atributo "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.
- Silencio: puede silenciar el video configurando el atributo silenciado del elemento de video en verdadero.
- Reproducción automática: puede reproducir el video automáticamente 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. Verificar Las mejores formas de corregir el error "Este video no se puede reproducir" en Google Drive.
Aumentar la interacción del usuario con el 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 web, asegúrese de realizar un seguimiento de la interacción del usuario para ver si tiene el efecto deseado. También puede publicar una prueba A/B para ver si agregar un reproductor de video aumenta las tasas de conversión. Puedes ver ahora Las mejores maneras de mejorar la tasa de conversión de su sitio web.
