Insertar Videos y Listas de YouTube como Reproductor de Audio en una Web

Por noviembre 16, 2016 0
Insertar Videos y Listas de YouTube como Reproductor de Audio en una Web

Este artículo representa la primera publicación (espero de muchas) acerca de cómo personalizar blogs o páginas web en general. Sin embargo, no está entre mis planes generar artículos sobre diseños de páginas web completas ni explicar para qué sirve tal o cual etiqueta, selector, variable, o función, etc, salvo en ciertos casos. Lo que propongo está más que todo centrado en snippets y widgets, cosas sencillas y breves para crear algo específico, algo rápido y que se pueda implementar en nuestros sitios web sin tanto enredo.

Pues bien, empecemos con este primer post sobre Personalización de Páginas Web.


1. Insertar el audio de un Video de YouTube

Hace algún tiempo atrás estaba navegando entre las páginas de uno de los blogs que suelo visitar sobre implementación y diseño web y encontré algo interesante, se trataba de cómo insertar el audio de un video de YouTube en nuestra web, no el video completo sino solo el audio, y usando un pequeño botón para pausar y/o reproducir. Esta idea proviene del blog de @Labnol y es la que les mostraré, aunque vale decir que modifiqué algunos elementos y agregué otros.

Aquí un demo para que vean su funcionamiento antes de pasar al código que la genera:




1.1. El Marcado HTML

Como se puede ver en el demo anterior se trata de un botón que nos permite reproducir o pausar el audio, a ello le he incluido la posibilidad de ver el título del audio reproducido. Para obtener esta estructura primero crearemos un contenedor DIV con tres atributos modificables:

  • data-video contiene el ID del video de YouTube deseado. Aquí cambiar el valor VIDEO_ID por el de nuestro video.
  • data-autoplay toma dos valores: 0 o 1. El valor predeterminado 0 evita la reproducción automática cuando se carga el reproductor. Un valor de 1 la inicia.
  • data-loop toma dos valores: 0 o 1. Si damos un valor de 1, el reproductor reproduce el video una y otra vez.

Luego crearemos un par de etiquetas DIV adicionales, una que contiene la ventana del video (iframe "invisible") y otra para el título del mismo. Veamos el markup completo:


<!-- Agregar aquí el ID del video -->
<div data-video="VIDEO_ID"  
  data-autoplay="0"         
  data-loop="1"             
  id="youtube-audio">
</div>

<div id="youtube-title"></div>
<div id="youtube-box"></div>


1.2. El CSS

Aplicaremos algunos estilos básicos al DIV contenedor del título del video. Aquí podemos personalizar según nuestros gustos, o simplemente ocultarlo añadiendo display: none;


#youtube-title {
  background-color: #444;
  color: #FFF;
  font-family: 'Arial', sans-serif;
  font-size: 13px;
  font-weight: 700;
  display: inline-block;
  padding: 4px 15px;
  border-radius: 3px;
  margin-top: 15px; /* Controla la altura del título */
  margin-left: 5px;
  /*display: none;*/ /* Descomentar para ocultar el título */
}


1.3. El Javascript

A continuación construiremos la función que creará el iframe del video dentro del marcado HTML. Primero cargaremos de forma asíncrona la API IFrame de YouTube, y luego la función objetivo.


// 1. Carga asíncrona de la API IFrame de YouTube.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 2. Función que crea un <iframe> conteniendo el reproductor de YouTube.
// Autor: Amit Agarwal | Web: http://www.labnol.org/?p=26740
// Adaptación: JaszAndre

function onYouTubeIframeAPIReady() {

  var box = document.getElementById("youtube-box");
  var ctrlq = document.getElementById("youtube-audio");

  var icon = document.createElement("img");
  icon.setAttribute("id", "youtube-icon");
  icon.style.cssText = "float:left;cursor:pointer;width:55px;";
  ctrlq.appendChild(icon);

  var div = document.createElement("div");
  div.setAttribute("id", "youtube-player");
  box.appendChild(div);

  var toggleButton = function(play) {
    var img = play ? "GddldI3.png" : "XrAWYmu.png";
    icon.setAttribute("src", "https://i.imgur.com/" + img);
  };

  ctrlq.onclick = function() {
    if (player.getPlayerState() === YT.PlayerState.PLAYING || player.getPlayerState() === YT.PlayerState.BUFFERING) { 
      player.pauseVideo();
      toggleButton(false);
    } else {
      player.playVideo();
      toggleButton(true);
    };
  };

  var player = new YT.Player("youtube-player", {
    height: "0",
    width: "0",
    videoId: ctrlq.dataset.video,
    playerVars: {
      autoplay: ctrlq.dataset.autoplay,
      loop: ctrlq.dataset.loop,
    },
    events: {
      'onReady': function(e) {
        player.setPlaybackQuality("small");
        toggleButton(player.getPlayerState() !== YT.PlayerState.CUED);
        document.getElementById("youtube-title").innerText = player.getVideoData().title;
      },
      'onStateChange': function(e) {
        if (e.data === YT.PlayerState.ENDED) {
          toggleButton(false);
        };
      }
    }
  });
};

Notemos que en realidad el reproductor de YouTube sí se está cargando por completo en segundo plano, solamente hemos hecho que su contenedor iframe sea "invisible" haciendo que sus parámetros width (ancho) y height (alto) tomen el valor de 0, esto lo podemos ver en las líneas 42 y 43 donde height: "0" y width: "0". Si cambiamos esos valores, veremos nuevamente el iframe del reproductor de video.

Los botones de reproducción son imágenes alojadas en imgur. Estas pueden ser modificadas si lo deseamos, solo tendremos que cambiar los indicadores en la línea 27: GddldI3.png (Stop) y XrAWYmu.png (Play). Notemos que no debemos incluir el dominio de imgur, sino solo el ID de la imagen.

Por último, he añadido una declaración adicional al botón para poder redimensionarlo según nuestro gusto. Solo tenemos que ir a la línea 19 y cambiar el valor width:55px.


2. Insertar el audio de una Lista de Videos de YouTube

Es posible adaptar el script anterior para insertar solo el audio de una lista de videos de YouTube. Para ello he modificado el script de manera que cumpla esta nueva función añadiéndole también un botón para avanzar y otro para retroceder. Aquí el demo:




2.1. El Marcado HTML

En cuanto al HTML esta vez manejaremos cinco contenedores DIV: para el Botón Play, el Botón Anterior, el Botón Siguiente, el del Título y finalmente del Reproductor (iframe "invisible"). Seguiremos usando el atributo data-video para añadir el ID de la lista (VIDEO_ID) deseada como en el caso anterior.


<!-- Agregar aquí el ID de la lista -->
<div data-video="VIDEO_ID"
  data-autoplay="0"
  data-loop="1"
  id="youtube-play">
</div>

<div id="youtube-prev"></div>
<div id="youtube-next"></div>
<div id="youtube-title"></div>
<div id="youtube-box"></div>


2.2. El CSS

Es exactamente igual que en el caso anterior y aplica solo al título del audio. Personalizamos según nuestros gustos, o sino lo ocultamos añadiendo display: none;


#youtube-title {
  background-color: #444;
  color: #FFF;
  font-family: 'Arial', sans-serif;
  font-size: 13px;
  font-weight: 700;
  display: inline-block;
  padding: 4px 15px;
  border-radius: 3px;
  margin-top: 15px; /* Controla la altura del título */
  margin-left: 5px;
  /*display: none;*/ /* Descomentar para ocultar el título */
}


2.3. El Javascript

Como en el caso previo primero cargaremos de forma asíncrona la API IFrame de YouTube, y luego la función objetivo.


// 1. Carga asíncrona de la API IFrame de YouTube.
var tag = document.createElement('script');

tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 2. Función que crea un <iframe> conteniendo la lista de YouTube.
// Script base: Amit Agarwal
// Adaptación: JaszAndre

function onYouTubeIframeAPIReady() {

  var box = document.getElementById('youtube-box');
  var ctrlq = ['ctrlqPlay', 'ctrlqPrev', 'ctrlqNext'],
      ctrlqID = ['youtube-play', 'youtube-prev', 'youtube-next'],
      icons = ['iconPlay', 'iconPrev', 'iconNext'],
      iconsID = ['play-video', 'previous-video', 'next-video'];

  for (var i = 0; i < ctrlq.length; i++) {
    ctrlq[i] = document.getElementById(ctrlqID[i]);
    icons[i] = document.createElement('img');
    icons[i].setAttribute('id', iconsID[i]);
    icons[i].style.cssText = 'float:left;cursor:pointer;width:55px;';
    ctrlq[i].appendChild(icons[i]);
  };

  var div = document.createElement('div');
  div.setAttribute('id', 'youtube-player');
  box.appendChild(div);

  var playButton = function(play) {
    var img = play ? 'GddldI3.png' : 'XrAWYmu.png';
    icons[0].setAttribute('src', 'https://i.imgur.com/' + img);
  };

  icons[1].setAttribute('src', 'http://i.imgur.com/UMzNnl6.png');
  icons[2].setAttribute('src', 'http://i.imgur.com/1Dd33Ls.png');

  ctrlq[0].onclick = function() {
    if (player.getPlayerState() === YT.PlayerState.PLAYING || player.getPlayerState() === YT.PlayerState.BUFFERING) { 
      player.pauseVideo();
      playButton(false);
    } else {
      player.playVideo();
      playButton(true);
    };
  };
  
  ctrlq[1].onclick = function() {
    if (player.getPlayerState() === YT.PlayerState.PLAYING || player.getPlayerState() === YT.PlayerState.BUFFERING) { 
      player.previousVideo();
      document.getElementById('youtube-title').innerText = player.getVideoData().title;
    };
  };
  
  ctrlq[2].onclick = function() {
    if (player.getPlayerState() === YT.PlayerState.PLAYING || player.getPlayerState() === YT.PlayerState.BUFFERING) { 
      player.nextVideo();
      document.getElementById('youtube-title').innerText = player.getVideoData().title;
    };
  };

  var player = new YT.Player('youtube-player', {
    height: '0',
    width: '0',
    playerVars: {
      autoplay: ctrlq[0].dataset.autoplay,
      loop: ctrlq[0].dataset.loop,
      listType: 'playlist',
      list: ctrlq[0].dataset.video,
    },
    events: {
      'onReady': function(e) {
        player.setPlaybackQuality('small');
        playButton(player.getPlayerState() !== YT.PlayerState.CUED);
        document.getElementById('youtube-title').innerText = player.getVideoData().title;
      },
      'onStateChange': function(e) {
        if (e.data === YT.PlayerState.ENDED) {
          playButton(false);
        };
        if (e.data === YT.PlayerState.BUFFERING) {
          playButton(true);
          document.getElementById('youtube-title').innerText = player.getVideoData().title;
        };
      }
    }
  });
};

Aquí también es posible aplicar cambios como lo explicado en la sección anterior. Para modificar el tamaño de los botones tenemos que ir a la línea 24 y cambiar el valor width:55px.

Para cambiar la imagen del botón de reproducción vamos a la línea 33 en GddldI3.png (Stop) y XrAWYmu.png (Play). Similarmente en las líneas 37 y 38 ubicaremos los enlaces de las imágenes de los botones Retroceder y Avanzar respectivamente.


Y eso fue todo, espero que esta guía les sea útil. Cualquier duda me dejan un comentario para ver en qué puedo ayudarles, o sino para ver sus nuevas creaciones si se animan a hacer cambios en el reproductor de audio.

0 comentarios

Suscribirse a: Enviar comentarios (Atom)