YouTube y JavaScript (2)

Tal vez, lo más interesante de las API de YouTube sea la posibilidad de usar un reproductor sin bordes. El uso es prácticamente igual al mostrado anteriormente pero, el hecho de no tener bordes nos obliga a usar nuestros propios botones como enlaces.

Comenzamos siempre con 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 también cesitamos las funciones del script; lo mejor es empezar con las funciones tal como las muestra el ejemplo online:

<script type='text/javascript'>
function updateHTML(elmId, value) {
  document.getElementById(elmId).innerHTML = value;
}

function setytplayerState(newState) {
  updateHTML("playerstate", newState);
}

function onYouTubePlayerReady(playerId) {
  ytplayer = document.getElementById("myytplayer");
  setInterval(updateytplayerInfo, 250);
  updateytplayerInfo();
  ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
  ytplayer.addEventListener("onError", "onPlayerError");
}

function onytplayerStateChange(newState) {
  setytplayerState(newState);
}

function onPlayerError(errorCode) {
  alert("An error occured: " + errorCode);
}

function updateytplayerInfo() {
  updateHTML("bytesloaded", getBytesLoaded());
  updateHTML("bytestotal", getBytesTotal());
  updateHTML("videoduration", getDuration());
  updateHTML("videotime", getCurrentTime());
  updateHTML("startbytes", getStartBytes());
  updateHTML("volume", getVolume());
}

// functions for the api calls
function loadNewVideo(id, startSeconds) {
  if (ytplayer) {
    ytplayer.loadVideoById(id, parseInt(startSeconds));
  }
}

function cueNewVideo(id, startSeconds) {
  if (ytplayer) {
    ytplayer.cueVideoById(id, startSeconds);
  }
}

function play() {
  if (ytplayer) {
    ytplayer.playVideo();
  }
}

function pause() {
  if (ytplayer) {
    ytplayer.pauseVideo();
  }
}

function stop() {
  if (ytplayer) {
    ytplayer.stopVideo();
  }
}

function getPlayerState() {
  if (ytplayer) {
    return ytplayer.getPlayerState();
  }
}

function seekTo(seconds) {
  if (ytplayer) {
    ytplayer.seekTo(seconds, true);
  }
}

function getBytesLoaded() {
  if (ytplayer) {
    return ytplayer.getVideoBytesLoaded();
  }
}

function getBytesTotal() {
  if (ytplayer) {
    return ytplayer.getVideoBytesTotal();
  }
}

function getCurrentTime() {
  if (ytplayer) {
    return ytplayer.getCurrentTime();
  }
}

function getDuration() {
  if (ytplayer) {
    return ytplayer.getDuration();
  }
}

function getStartBytes() {
  if (ytplayer) {
    return ytplayer.getVideoStartBytes();
  }
}

function mute() {
  if (ytplayer) {
    ytplayer.mute();
  }
}

function unMute() {
  if (ytplayer) {
    ytplayer.unMute();
  }
}

function getEmbedCode() {
  alert(ytplayer.getVideoEmbedCode());
}

function getVideoUrl() {
  alert(ytplayer.getVideoUrl());
}

function setVolume(newVolume) {
  if (ytplayer) {
    ytplayer.setVolume(newVolume);
  }
}

function getVolume() {
  if (ytplayer) {
    return ytplayer.getVolume();
  }
}

function clearVideo() {
  if (ytplayer) {
    ytplayer.clearVideo();
  }
}
</script>

Y ahora, donde queremos mostrar los videos agregamos lo siguiente:

<div id="ytapiplayer"> Cargando ... </div>
<script type="text/javascript">
  var params = { allowScriptAccess: "always", bgcolor: "#000000" };
  var atts = { id: "myytplayer" }; swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer", "ytapiplayer", "560", "420", "8", null, null, params, atts);
</script>

Las funciones permiten controlar la carga y reproducción del video, además de darnos información. Algunos ejemplos:

CARGAR VIDEO <a href="javascript:void(0);" onclick="play();"><img src="URL_BOTON_PLAY" /></a>

PAUSAR VIDEO <a href="javascript:void(0);" onclick="pause();"><img src="URL_BOTON_PAUSE" /></a>

STOP VIDEO <a href="javascript:void(0);" onclick="stop();"><img src="URL_BOTON_STOP" /></a>

SILENCIAR  <a href="javascript:void(0);" onclick="mute();"><img src="URL_BOTON_MUTE" /></a>

SONIDO  <a href="javascript:void(0);" onclick="unMute();"><img src="URL_BOTON_NOMUTE" /></a>

Los videos se cargan indicando su ID con dos funciones diferentes, con la primera se autoejecutan y con la segundan se cargan y se espera que se haga click en play:

<a href="javascript:void(0)" onclick="loadNewVideo('ID_VIDEO', 0)">Cargar</a>

<a href="javascript:void(0)" onclick="cueNewVideo(document.getElementById('cuevideoid').value, 0)">Precargar</a>

Todo esto sólo es una muestra simple de esas funciones pero son lo suficientemente interesantes como para que quien quiera, pueda exerimentar con ellas y crear sus propios reproductores.

You need Flash player 8+ and JavaScript enabled to view this video.