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.
Comienza por 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:
importar Reaccionar de 'reaccionar';constante Jugador = () => {
devolver (
<división>
<ancho de video ="100%" altura="100%" control S>
<fuente origen="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" tipo ="vídeo/mp4" />
</video>
</div>
)
}
exportarpor defecto Jugador;
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:
importar Reaccionar, { estado de uso, referencia de uso } de 'reaccionar';constante Jugador = () => {
constante [se está reproduciendo, establecer se está reproduciendo] = useState(FALSO);
constante videoRef = useRef(nulo);
constante alternarReproducir = () => {
si (está jugando) {
vídeoRef.actual.pausa();
} demás {
vídeoRef.actual.jugar();
}
setEstáReproduciendo(!estáReproduciendo);
};
devolver (
<división>
<video
ref={referencia de video}
ancho ="100%"
altura="100%"
control S
>
<fuente origen="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" tipo ="vídeo/mp4" />
</video>
<botón onClick={togglePlay}>
{¿está jugando? "Pausa": "Jugar"}
</button>
</div>
)
}
exportarpor defecto Jugador;
Este código utiliza los ganchos useState y useRef para realizar un seguimiento del estado del video (ya sea que esté reproduciéndose 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:
importar Reaccionar, { estado de uso, referencia de uso } de 'reaccionar';constante Jugador = () => {
constante [se está reproduciendo, establecer se está reproduciendo] = useState(FALSO);
constante [progreso, establecerProgreso] = useState(0);
constante videoRef = useRef(nulo);
constante alternarReproducir = () => {
si (está jugando) {
vídeoRef.actual.pausa();
} demás {
vídeoRef.actual.jugar();
}
setEstáReproduciendo(!estáReproduciendo);
};
constante manejarProgreso = () => {
constante duración = videoRef.current.duration;
constante horaActual = videoRef.actual.horaActual;
constante progreso = (tiempo actual / duración) * 100;
setProgress (progreso);
};
devolver (
<división>
<video
onTimeUpdate={manejarProgreso}
ref={referencia de video}
ancho ="100%"
altura="100%"
control S
>
<fuente origen="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" tipo ="vídeo/mp4" />
</video>
<división>
<botón onClick={togglePlay}>
{¿está jugando? "Pausa": "Jugar"}
</button>
<valor de progreso = {progreso} max ="100" />
</div>
</div>
)
}
exportarpor defecto Jugador;
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 instalar reaccionar-jugadorUna vez instalado, puedes usarlo así:
importar Reaccionar de 'reaccionar';
importar ReactPlayer de 'reaccionar-jugador';constante Jugador = () => {
devolver (
<ReactPlayer
dirección URL ="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
ancho ="100%"
altura="100%"
control S
/>
)
}
exportarpor defecto Jugador;
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.
- control S: 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 instalar reaccionar-video-js-playerUna vez instalado, puedes usarlo así:
importar Reaccionar de "reaccionar";
importar Reproductor de video de "reaccionar-video-js-player";constante Jugador = () => {
devolver (
<Reproductor de video
ancho ="100%"
altura="100%"
origen="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
control S
/>
)
}
exportarpor defecto Jugador;
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:
- Agregar 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".
- Apagado: Puede silenciar su video configurando el atributo silenciado del elemento de video en "verdadero".
- Auto-reproducción: 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.
