Cómo reproducir un video usando ReactJS

Siendo ReactJS una tecnología con apenas 5 años de haber lanzado en el mercado, ha pegado con fuerza y ha gustado mucho. En lo personal me gusta mucho más que angular, ya que a pesar de que hacer desarrollo de interfaces no es mi cosa favorita ReactJS lo hace bastante simple y fácil de entender.

En este post muestro de manera sencilla cómo podemos reproducir todo tipo de archivos de video, incluyendo:

• URLs en general
• Archivos Locales
• YouTube
• Facebook
• Twitch
• SoundCloud
• Streamable
• Vimeo
• Wistia
• DailyMotion

Para ello vamos a usar un componente muy completo llamado ReactPlayer el cual nos permite integrar a todos estos servicios de forma sencilla.

Para ello lo primero que tenemos que hacer es instalar la dependencia en nuestro proyecto de esta forma:

NPM

npm install react-player --save

YARN

yarn add react-player

Una vez instalada la dependencia procedemos a utilizar el componente importandolo en el archivo que queremos.

import React, { Component } from 'react'
import ReactPlayer from 'react-player'

Y para usar el componente ponemos esto dentro del método render() de su componente principal, o el componente que ustedes están creando:

class App extends Component {
  render() {
    return (
      <div>
        <ReactPlayer
          url='https://www.youtube.com/watch?v=rnwlWn603g4'
          className='react-player'
          playing
          width='100%'
          height='100%'
        />
      </div>
    );
  }
}

Dentro de las propiedades que podemos configurar estan:

Y así, sin mucho esfuerzo tienen un reproductor que es capaz de reproducir casi cualquier cosa que le pongan 🙂

Disfruten!