YouTube y JavaScript (1)

Así como en Google Code hay una referencia bastante completa de los parámetros del reproductor de YouTube, también hay otras para quienes quieran crear los suyos propios utilizando Flash y otra para utilizar las API de YouTube. Si bien, algunas de esas funciones requieren que nos registremos para obtener una clave, hay otras que son accesibles de forma pública y que podemos usar en cualquier proyecto.

Estas últimas se manejan con JavaScript y, a simple vista, no parecen gran cosa ya que sólo hacen más o menos lo mismo que el reproductor en si mismo pero no es así, el poder manejar el reproductor con códigos, abre una serie de posibilidades que serán parte de otra entrada.

La forma más sencilla de probar estas funciones es usar la librería SWFObject que podemos cargar directamente desde Google:

<script src='http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js' type='text/javascript'></script>

Y un video lo cargamos de este modo:

<div id="contenedorPlayer"> Cargando ... </div>
<script type="text/javascript">
  var params = { allowScriptAccess: "always", bgcolor: "#cccccc" };
  var atts = { id: "objetoPlayer" };swfobject.embedSWF("http://www.youtube.com/v/XXXXXXXXXXX?border=0&amp;enablejsapi=1&amp;playerapiid=YTplayerDemo","contenedorPlayer", "425", "344", "8", null, null, params, atts);
</script>

Un conjunto de funciones permiten controlar su reproducción, leer los datos que envia y modificar algunos de ellos.

  // los controles
  function play() {
    if (YTplayerDemo) { YTplayerDemo.playVideo(); }
  }
  function pause() {
    if (YTplayerDemo) { YTplayerDemo.pauseVideo(); }
  }
  function stop() {
    if (YTplayerDemo) { YTplayerDemo.stopVideo(); }
  }
  function mute() {
    if (YTplayerDemo) { YTplayerDemo.mute(); }
  }
  function unMute() {
    if (YTplayerDemo) { YTplayerDemo.unMute(); }
  }

  // cargar y ejecutar el video
  function loadNewVideo(id, inicio) {
    if (YTplayerDemo) { YTplayerDemo.loadVideoById(id, parseInt(inicio)); }
  }
  // cargar el video y no ejecutarlo
  function cueNewVideo(id, inicio) {
    if (YTplayerDemo) { YTplayerDemo.cueVideoById(id, inicio); }
  }
  // eliminar el video
  function clearVideo() {
    if (YTplayerDemo) { YTplayerDemo.clearVideo(); }
  }

  // extraer información del video
  function getBytesLoaded() {
    if (YTplayerDemo) { return YTplayerDemo.getVideoBytesLoaded(); }
  }
  function getBytesTotal() {
    if (YTplayerDemo) { return YTplayerDemo.getVideoBytesTotal(); }
  }
  function getCurrentTime() {
    if (YTplayerDemo) { return YTplayerDemo.getCurrentTime(); }
  }
  function getDuration() {
    if (YTplayerDemo) { return YTplayerDemo.getDuration(); }
  }
  function getStartBytes() {
    if (YTplayerDemo) { return YTplayerDemo.getVideoStartBytes(); }
  }
  function getVolume() {
    if (YTplayerDemo) { return YTplayerDemo.getVolume(); }
  }
  function getPlayerState() {
    if (YTplayerDemo) {r eturn YTplayerDemo.getPlayerState(); }
  }

  // mostrar información del video
  function getEmbedCode() {
    alert(YTplayerDemo.getVideoEmbedCode());
  }
  function getVideoUrl() {
    alert(YTplayerDemo.getVideoUrl());
  }
  function setYTplayerDemoState(newState) {
    mostrarINFO("salidaStatus", newState);
  }
  function mostrarINFO(donde, valor) {
    document.getElementById(donde).innerHTML = valor;
  }
  function actualizarINFO() {
    mostrarINFO("salidaCargado", getBytesLoaded());
    mostrarINFO("salidaBytes", getBytesTotal());
    mostrarINFO("salidaDuracion", getDuration());
    mostrarINFO("salidaTiempo", getCurrentTime());
    mostrarINFO("salidaInicial", getStartBytes());
    mostrarINFO("salidaVolumen", getVolume());
  }

  // establecer funciones varias
  function seekTo(seconds) {
    if (YTplayerDemo) { YTplayerDemo.seekTo(seconds, true); }
  }
  function setVolume(newVolume) {
    if (YTplayerDemo) { YTplayerDemo.setVolume(newVolume); }
  }

  // manejo del API
  function onYouTubePlayerReady(playerId) {
    YTplayerDemo = document.getElementById("objetoPlayer");
    setInterval(actualizarINFO, 250);actualizarINFO();
    YTplayerDemo.addEventListener("onStateChange", "onYTplayerDemoStateChange");
    YTplayerDemo.addEventListener("onError", "onPlayerError");
  }
  function onPlayerError(errorCode) {
    alert("ERROR al cargar el video " + errorCode);
  }
  function onYTplayerDemoStateChange(newState) {
    setYTplayerDemoState(newState);
  }