Reproductor de video responsivo con React

¿Quieres reproducir videos de una web externa o directamente de tu PC?

En este post vamos a aprender a crear un reproductor de video desde cero ya sea con videos de webs externas como YouTube, como con videos que tengas en tu propio PC.

Para realizarlo será necesaria la instalación del componente React-Player que nos proporciona React.

Una vez instalado este componente realizaremos un ejemplo sencillo aunque conciso de como realizar nuestro reproductor.

React-Player

React-Player es un componente de React para reproducir una variedad de URL, incluidas rutas de archivos, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, DailyMotion y Kaltura.

Por ello una vez creado nuestro proyecto desde terminal introduciremos el siguiente comando para proceder a su instalación:

Una vez finalizada la instalación abriremos nuestro proyecto introduciendo el comando code .

Ya abierto nos situaremos en src y crearemos la carpeta assets, dentro de esta crearemos la carpeta videos, y dentro de esta ultima arrastraremos el video que queramos importar de nuestro PC.

App.js

Con el video ya dentro de nuestro proyecto, nos situaremos en App.js donde irá nuestro código.

Por defecto App.js ya incluye este contenido:

Importar React-Player

Lo primero que haremos será importar React-Player componente que habíamos instalado previamente.

A continuación eliminamos el contenido innecesario, dejamos nuestra aplicación con este aspecto:

Dentro de la etiqueta div llamaremos a nuestro componente React-Player

Dentro del componente llamaremos a la url de nuestro componente, que en este caso será ./assets/videos/TheGoodDoctor.mp4 cuya ruta importaremos dentro de video

De momento este es el resultado de nuestra app

Como podemos apreciar nuestro reproductor carece de controles, y su tamaño es muy reducido con respecto a la pantalla, por lo que para su mejora añadiremos una serie de propiedades que darán la funcionalidad que nuestro reproductor necesita, las cuales seran:

Controls

propiedad que proporciona los controles a nuestro reproductor.

Loop

Propiedad cuya finalidad es reproducir un video de forma infinita.

Una vez añadidas las propiedades este será el aspecto de nuestro código

y por ende este el resultado de nuestra aplicación

Como vemos funciona correctamente.

Pero como hemos dicho al principio también utilizaremos videos de webs externas como en este caso YouTube, y veremos que la estructura es la misma, únicamente tendremos que copiar y pegar la url de nuestro video.

y como vemos el resultado es el mismo

nuestro ultimo paso es hacerlo responsivo

¿Qué es responsivo?

Con responsivo nos referimos a adaptar nuestro reproductor a cualquier tipo de ancho de pantalla, sin que sobresalga en pantallas mas pequeñas y sin que que sobre espacio en el contenedor en el que se encuentra.

para ello solo necesitaremos situarnos en nuestra hoja de estilos css ->App.css

En ella crearemos dos clases una para el contenedor de nuestro video y otra para el reproductor de nuestro video, cuyo código será el siguiente:

Ahora nos situaremos nuevamente en App.js y desde allí llamaremos a las clases que acabamos de crear.

Es importarte añadir un height y un width de 100% (que hacen referencia al alto y ancho) para que funcione.

Y este será nuestro resultado, como vemos funciona perfectamente

Anotaciones

Posiblemente por actualizaciones de la nueva versión de React, Si importas la ruta directamente en la url del componente React-Player, esta no funciona, aunque añadamos el elemento require, como vemos a continuación( este problema solo sucede cuando nuestro archivo esta en local, con webs externas funciona correctamente)

Y este seria el aspecto de la app, que como vemos los controles están inhabilitados y nuestro video no ha cargado correctamente.

Autor/a: Yesenia Pozo Vargas

Curso: Desarrollo Web Full Stack, Multicloud y Multiplataforma

Centro: Tajamar

Recursos: https://www.npmjs.com/package/react-player

GitHub: https://github.com/yesismiile/Visual-Studio-Code.git

Video: https://web.microsoftstream.com/video/39f721e6-df1b-439c-a96c-5dc4af54d876