JMiur [E]

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);
}

Esta es una copia del ejemplo que nos da Google:

Cargando ...
PLAYER STATE --
no iniciado (-1), finalizado (0), en reproducción (1), pausado (2), almacenamiento en búfer (3), en cola de vídeos (5)
CONTROLESPlayPauseStopMuteUnmute
INFORMACIONDuración
--:--
Tiempo
--:--
Tamaño
--
Inicio
--
Cargado
--
Volumen
--
Volumen: cambiar
CARGAR VIDEOload [desde]
PRECARGAR VIDEOcue [desde]
CLEAR VIDEOclear
código para insertar el videoURL del video

En este archivo de texto hay una copia del ejemplo

7 comentarios:

Gem@  

Estoy deseando ver esas posibilidades :O

Responder
Cristian  

Muy buen articulo! te felicito Jmiur! :) me gusta..esperando la otra parte del post..

Responder
DE INTERES  

Hola Jmiur, tienes un premio para tí, esperando en mi Blog, Felictaciones!!!! pasa por él. Un fuerte abrazo

Responder
JMiur  

La semana que viene estará lista la segunda parte pero, la más interesante, para mi gusto, será la tercera :D No, esto no es autopromo :D

DE INTERES: Te alo agradezco mucho, aunque no sepa cuál es tu blog porque el perfil es privado :)

Responder
Gem@  

No, no es autopromo es dejarnos con más curiosidad todavía jajajaja

Responder
Neko  

Interesante comp siempre JMiur, esperando con ansias las siguientes partes :P

Responder
JMiur  

MMMM esto de crear expectativas puede ser contraproducente :$
:D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR