Renderizando Elementos Multimedia con React JS 16

Nube Colectiva

hace 5 años

Demo Github

Cuando estas creando un proyecto con React JS es habitual el uso de elementos o archivos multimedia, por ello queremos compartirte una forma de renderizarlos, existen muchas maneras de hacerlo, cada forma cambia según lo que necesites hacer. Si no sabes que es React JS te recomendamos leer nuestro artículo Que es React JS, Historia y otros detalles para que estés familiarizado con este tutorial.

La forma más sencilla de crear los elementos es simplemente creando la etiqueta del elemento que puede ser una <img>, <iframe>, <video> o <audio> , Pero vamos a usar una variable const para almacenar los datos que va cargar cada elemento multimedia, así mantenemos un orden y limpieza en nuestro código.

Los elementos que vamos a renderizar son un Mapa de Google, Imagen, Audio, Video MP4 y un Video de Youtube, vamos con ello.

Mapa de Google

Creamos un componente llamado GoogleMap.js y agregamos lo siguiente, en el código colocamos unos comentarios que explican para que sirve cierta parte del componente


import React, { Component } from 'react';
import './App.css';

class App extends Component {

  render() {

    // Datos del Google Map

    const imagen = [
      {
        id: 1,
        fuente: 'https://www.google.com/maps/embed/v1/place?key=TU_API_KEY_GOOGLE_MAP&q=Space+Needle,Seattle+WA"',        
        title: 'Google Maps'
      }
    ];

    return (

      // Renderizamos el Mapa de Google, dentro de este colocamos cada objeto del array 'const imagen'

      imagen.map(item => { 

        // Es necesario colocar una 'key' a partir de la versión de React JS 16
        // colocamos el objeto 'id: 1' en <div key={ item.id } 

        return <div key={ item.id } className='embed-responsive embed-responsive-4by3'>
            <iframe className='embed-responsive-item' src={ item.fuente } title={ item.title } style={{Border: + "0" }}></iframe>
          </div>
       

      })

    )
    

  }

};

export default App;

import React, { Component } from 'react';

import './App.css';

class App extends Component {

render() {

// Datos del Google Map

const imagen = [

{

id: 1,

fuente: 'https://www.google.com/maps/embed/v1/place?key=TU_API_KEY_GOOGLE_MAP&q=Space+Needle,Seattle+WA"',

title: 'Google Maps'

}

];

return (

// Renderizamos el Mapa de Google, dentro de este colocamos cada objeto del array 'const imagen'

imagen.map(item => {

// Es necesario colocar una 'key' a partir de la versión de React JS 16

// colocamos el objeto 'id: 1' en <div key={ item.id }

return <div key={ item.id } className='embed-responsive embed-responsive-4by3'>

</div>

})

)

}

};

export default App;

React JS nos pide agregar la etiqueta title para que pueda cargar el elemento iframe para el mapa. Así mismo no olvides agregar tu API Key de Google Maps.

Imagen

Quizás sea un elemento muy usado en la mayoría de proyectos, pero nunca esta de más recordar como se renderiza en Reac JS, creamos un componente llamado Imagen.js y agregamos lo siguiente, en el código colocamos unos comentarios que explican que hace cada parte del componente


import React, { Component } from 'react';
import './App.css';

class App extends Component {

  render() {

    // Datos que debe renderizar la imagen

    const item = [
      {
        id: 1,
        img: 'https://blog.nubecolectiva.com/wp-content/uploads/2019/03/img_destacada_blogdevs-2-930x360.png',
        class: 'img-fluid',
        alt: 'Efecto Sticky o Video Flotante mientras te desplazas verticalmente en una Página Web',
        title: 'Efecto Sticky o Video Flotante mientras te desplazas verticalmente en una Página Web',
        target: '_blank',
        link: 'https://blog.nubecolectiva.com/efecto-sticky-o-video-flotante-mientras-te-desplazas-verticalmente-en-una-pagina-web/'
      }
    ];

    return (

      item.map(item => { 

        // Es necesario colocar una 'key' a partir de la versión de React JS 16
        // colocamos el objeto 'id: 1' en <div key={ item.id } 

        return <a key={ item.id } href={ item.link } target={ item.target }>
                <img className={ item.class } src={ item.img } alt={ item.alt } title={ item.title } />
               </a>

      })

    )
    

  }

};

export default App;

import React, { Component } from 'react';

import './App.css';

class App extends Component {

render() {

// Datos que debe renderizar la imagen

const item = [

{

id: 1,

img: 'https://blog.nubecolectiva.com/wp-content/uploads/2019/03/img_destacada_blogdevs-2-930x360.png',

class: 'img-fluid',

alt: 'Efecto Sticky o Video Flotante mientras te desplazas verticalmente en una Página Web',

title: 'Efecto Sticky o Video Flotante mientras te desplazas verticalmente en una Página Web',

target: '_blank',

link: 'https://blog.nubecolectiva.com/efecto-sticky-o-video-flotante-mientras-te-desplazas-verticalmente-en-una-pagina-web/'

}

];

return (

item.map(item => {

// Es necesario colocar una 'key' a partir de la versión de React JS 16

// colocamos el objeto 'id: 1' en <div key={ item.id }

return <a key={ item.id } href={ item.link } target={ item.target }>

</a>

})

)

}

};

export default App;

React JS nos pide agregar el atributo alt como requisito para renderizar la imagen.

Audio

Este elemento es muy utilizado en los proyectos de música, creamos un componente llamado Audio.js y agregamos lo siguiente, igualmente en el código colocamos unos comentarios para explicar que hace cada parte del componente


import React, { Component } from 'react';
import './App.css';

class App extends Component {

  render() {

    // Datos que debe cargar el audio

    const item = [
      {
        id: 1,
        audio: 'https://nubecolectiva.com/blog/tutos/demos/renderizando_elementos_multimedia_react/mp3/cancion.mp3',
        formato: 'audio/mpeg',
      }
    ];

    return (

      item.map(item => { 

        // Es necesario colocar una 'key' a partir de la versión de React JS 16
        // colocamos el objeto 'id: 1' en <div key={ item.id } 

        return  <div key={ item.id }>
                  <audio controls>
                    <source src={ item.audio } type={ item.formato }/>
                  </audio>
                </div>
       

      })

    )
    

  }

};

export default App;

import React, { Component } from 'react';

import './App.css';

class App extends Component {

render() {

// Datos que debe cargar el audio

const item = [

{

id: 1,

audio: 'https://nubecolectiva.com/blog/tutos/demos/renderizando_elementos_multimedia_react/mp3/cancion.mp3',

formato: 'audio/mpeg',

}

];

return (

item.map(item => {

// Es necesario colocar una 'key' a partir de la versión de React JS 16

// colocamos el objeto 'id: 1' en <div key={ item.id }

return <div key={ item.id }>

</audio>

</div>

})

)

}

};

export default App;

No olvides que debemos de especificar el tipo de formato que tiene el archivo de audio que deseas reproducir, esto le dirá al navegador que tipo de archivo es para poder reproducirlo sin problemas.

Video

Existen muchas páginas que usan videos en su plataforma, pero también las que no, de igual forma es importante que sepas como renderizar este importante formato multimedia, crea un componente llamado Video.js y agrega lo siguiente, agregamos comentarios para explicar que hacen ciertas partes del componente.


import React, { Component } from 'react';
import './App.css';

class App extends Component {

  render() {

    // Datos del Video

    const item = [
      {
        id: 1,
        video: 'https://nubecolectiva.com/blog/tutos/demos/video_fijo_flotante/video/video.mp4',
        formato: 'video/mp4',
      }
    ];

    return (

      item.map(item => {

        // Es necesario colocar una 'key' a partir de la versión de React JS 16
        // colocamos el objeto 'id: 1' en <div key={ item.id }  

        return  <div key={ item.id }>
                  <video width='100%' controls>
                    <source src={ item.video} type={ item.formato }/>
                  </video>
                </div>
       

      })

    )
    

  }

};

export default App;

import React, { Component } from 'react';

import './App.css';

class App extends Component {

render() {

// Datos del Video

const item = [

{

id: 1,

video: 'https://nubecolectiva.com/blog/tutos/demos/video_fijo_flotante/video/video.mp4',

formato: 'video/mp4',

}

];

return (

item.map(item => {

// Es necesario colocar una 'key' a partir de la versión de React JS 16

// colocamos el objeto 'id: 1' en <div key={ item.id }

return <div key={ item.id }>

</video>

</div>

})

)

}

};

export default App;

Recuerda especificar el formato del video, esto le dará una idea al navegador, sobre que debe de reproducir.

Youtube

En la actualidad hasta la fecha de este Tutorial, los videos de Youtube siguen siendo quizás uno de los elementos más usados en las páginas Web, bien para este elemento crea un componente llamado Youtube.js y agrega lo siguiente, también colocamos comentarios para explicar que hace cada parte del componente


import React, { Component } from 'react';
import './App.css';

class App extends Component {

  render() {

    // Datos del Video de Youtube

    const imagen = [
      {
        id: 1,
        url: 'https://www.youtube.com/embed/t_ZEavuVcZ0',
        title: 'Cambiemos el aspecto visual(UI) de nuestro Sublime Text 3'
      }
    ];

    return (

      imagen.map(item => {

        // Es necesario colocar una 'key' a partir de la versión de React JS 16
        // colocamos el objeto 'id: 1' en <div key={ item.id  

        return <div key={ item.id } className='embed-responsive embed-responsive-4by3'>
            <iframe className='embed-responsive-item' src={ item.url } title={ item.title } ></iframe>
          </div>
       

      })

    )
    

  }

};

export default App;

import React, { Component } from 'react';

import './App.css';

class App extends Component {

render() {

// Datos del Video de Youtube

const imagen = [

{

id: 1,

url: 'https://www.youtube.com/embed/t_ZEavuVcZ0',

title: 'Cambiemos el aspecto visual(UI) de nuestro Sublime Text 3'

}

];

return (

imagen.map(item => {

// Es necesario colocar una 'key' a partir de la versión de React JS 16

// colocamos el objeto 'id: 1' en <div key={ item.id

return <div key={ item.id } className='embed-responsive embed-responsive-4by3'>

</div>

})

)

}

};

export default App;

Si deseas ver el resultado final de los elementos, puedes ver la Demo que esta al inicio de este tutorial.

Notas

La forma de renderizar los elementos pueden cambiar en futuras versiones de React JS, esto no depende de nosotros si no de los desarrolladores que dan soporte a React JS.
La versión exacta que usamos para este tutorial es React JS 16.8.5

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.