JMiur [E]

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.

37 comentarios:

Unknown  

wow, la posibilidad de hacer un reproductor es fantastica!
Realmente me encanta :)

Responder
Gem@  

Es un trabajo de hormiguitas componer todo para mostrar el reproductor aunque bien mirado puede guardarse en la plantilla de entrada y luego sustituir lo necesario para nuevos vídeos ¿es así?

Responder
JMiur  

Las posibilidades son ... muchas :D

Efectivamente, no hace falta escribir todo cada vez que se inserta un video, podría, perfectamente, agregarse algún script en la plantilla para que todo fuera más cómodo.

En realidad, sólo es una alternativa a explorar :-)

Lo que más me gusta es que ... bueno será para la parte tres ... :D

Responder
Gem@  

jajajaja eres un hombre cruel.

Responder
HaCk CrAcK  

Jmiur tengo un problemilla, cada vez que entro a un post el formulario de comentarios no se ve y tengo que recargar la pagina para poder verlo, porq sera? en un principio pense q era porq tenia un iframe pero lo saque y seguia pasando lo mismo..

Responder
JMiur  

Paciencia, Gem@ A decir verdad, ya está hecho, hasta usted lo ha visto pero .. no se dio cuenta :D No puedo ponerlos seguidos porque son demos y se perturban entre si, por lo tanto, debo dejar ... espacio entre ellos :D

HaCk CrAcK: Ahí veo que hay un IFRAME sobre el formulario y ese IFRAME carga esto:
http://codigobasura.co.cc/script/emoticon.html
así ue, es muy probable que sea eso lo que impida funcione correctamente.

Responder
Gem@  

Lo tuve delante de mis narices y yo sin verlo :S

Responder
Prof. Cristian E. Moyano  

JMiur Y en vez de mostrar la información en bytes, ¿se pueden mostrar en mega bytes?...y el formato del tiempo, ¿se puede cambiar a 00:00?

PD: me encanto la 2da parte de ésta magnifica idea de crear tus propios reproductores de youtube! te felicito

Responder
JMiur  

Gem@: No se crea que es gran cosa pero ... lo uso. No diré más :D

Cristian: Si. Mira esta parte:

return ytplayer.getVideoBytesTotal();

allí, se devuelve el tamaño en bytes. Si la aritmética no me falla, bastaría cambairlo así:

megas = ytplayer.getVideoBytesTotal() / 1024;
return megas;

Responder
enrique  

En fin. Solamente hice ver que no entendía muy bien dónde se insertaban los códigos, pero ya veo que mi pregunta ha molestado.
Se ve que la cosa es más bien para iniciados, qué lástima.
En fin.

Responder
HaCk CrAcK  

No Jmiur, ya probe quitando ese iframe pero sigue sucediendo lo mismo, igualmente gracias por la intencion ;)

Responder
Prof. Cristian E. Moyano  

ah...mira q bn! gracias bastante interesante, como siempre..voy a seguir probandolo y cuando me surja otra duda, lamentablemente, voy a tener que recurrir a vos Jmiur..jej un abrazo

Responder
JMiur  

enrique: ¿Y qué has dicho? No veo ninguna pregunta o pedido de aclaración.

HaCk CrAcK: Otra cosa que a veces interfiere, son algunos scripts. Los emoticones, por ejemplo, algunos gadgets de chats. Yo, copiaría la plantilla en un blog de pruebas y empezaría ahí, eliminando pcoo a poco cada script para ver cuál es la que está molestando.

Cristian: Suerte con las pruebas :D

Responder
HaCk CrAcK  

Eso mismo tenia pensado hacer, seguro es algun script, es un trabajo algo engorroso ir quitando uno por uno pero bueno alguien tiene que hacerlo je
Gracias por la ayuda!

Responder
Oloman  

Hola y felices fiestas.

No sé si es posible... yo al menos no he podido conseguirlo. Estoy intentando embeber un vídeo a la manera tradicional (con el código de YouTube) y luego poner un botón en otro sitio para ejecutar desde allí alguna de las funciones (por ejemplo, detenerlo).
Para ello he instalado sólo la librería SWFObject y las funciones que acompañas. Luego he puesto un evento onclick='stop();' en el botón, pero no hace ni puñetero caso.

He probado también a cargar el vídeo mediante el ID ytapiplayer y todo el script que le acompaña. En este último caso, me ha parecido comprobar que si no metía el loadNewVideo, el susodicho vídeo no se cargaba (otra duda). Cuando lo he logrado, el botón de antes, seguía sin funcionar.

Como decía, puede que esté intentando algo que directamente no se puede hacer (al menos tan fácil como yo pensaba)...

Responder
JMiur  

A ver si comprendo, Oloman.

Estás colocando el vido con el código de YouTube, es decir, con una etiqueta OBJECT o EMBED. Si es así, no podrás controlarlo con un script.

Para controlarlo, es necesaio crear el objeto de Flash con SWFObject y habilitar el API con el parámetro enablejsapi, sino, hasta donde yo logro entender de este tema, será imposible.

Responder
Oloman  

Gracias JMiur.
Bien, aclarado que es imposible asaltar a saco el código embebido, te comento que también intenté en su momento lo de crear el objeto y habilitar el API, tal y como comentas, y ahí si conseguí que me funcionara el stop a través de un botón.

El problema es que intento que se cargue un vídeo concreto sin necesidad de tener que pulsar ningún botón para ello. Siguiendo tus instrucciones, lo conseguí con un botón, pero sin él no soy capaz.

Para que este algo más claro, lo que intento hacer es lo siguiente:
Tengo una capa oculta que se hace visible al pulsar un botón. En esa capa, hay un vídeo. En el momento de hacer visible la capa, pretendo también que se ejecute el vídeo. En el botón que "abre" el div en cuestión, he añadido la función loadNewVideo, pero no hace ni caso:
<a href='javascript:plegardesplegar("idbloqueoculto");loadNewVideo("zNN6v0DslUo", 0);'>
Sólo se abre el recuadro negro con el logo de YouTube y para poder ver el vídeo, he tenido que habilitar un botón dentro del DIV.
Para no extenderme más, el código lo puedes ver en http://olomanias.blogspot.com, pinchando en la pestaña EJEMPLO.
Perdón por tener la casa desordenada, pero no suelo tener visitas en ella. :D

Responder
JMiur  

El problema, parece ser que al estar oculto, el objeto no se crea hasta después de llamarse a la función, es decir, según veo en el debug, al hacer click para mostrar, primero se carga el video y luego se meustra la ventana oculta con lo cual, no hay objeto. Puede ser que ese sea el problema.

Noto que, al ejecutarlo paso a paso, me dice que ytplayer no existe. Dos cosas entonces, primero lo fácil. Hay una serie de IFs que dicen cosas como esta:

if (ytplayer) {
ytplayer.loadVideoById(id, parseInt(startSeconds));
}

Eso, aunque sea repetivo, lo reempalzaría asi:

ytplayer = document.getElementById("myytplayer");
ytplayer.loadVideoById(id, parseInt(startSeconds));

En lugar del if (ytplayer) le dria cual es por si no ha creado la variable cuando se ejecuta algo.

Lo segundo, sería más complicado y es chequear que el API esté lista:
function onYouTubePlayerReady()
porque si no lo está, si aún no se ha inicializado todo (y esto requiere un tiempo) tal vez, se está tratando de ejecutar algo que no existe.

Una ultima tontera que se me ocurre y no he podido probar. ¿Que pasa si ejecutas dos funciones en el enlace? primero cargarlo y luego play? Imagino que pasará lo mismo pero podría intentarse.

Muy confuso esto ¿no? :D

Responder
Oloman  

Muchas gracias J.Miur, pero no funcionan ninguna de las opciones. Incluso he intentado poner la función de carga dentro del script que construye el DIV, al final, para ver si después de contruir el reproductor me cargaba algo, pero tampoco. Por el motivo que sea, se ve que no se puede cargar un vídeo hasta que todo el reproductor no está operativo. Es probable que precisamente por esto, una de las funciones que existen es la de carga. No te preocupes más, que el asunto no lo merece. Gracias de nuevo.

Responder
JMiur  

Es lo que me temía, Oloman pero, había que intentarlo.

Eso que dices, hasta que el objeto no está completamnte cargado, no pude actuarse sobre él.

Una locura más que alguna vez probé con cierto éxito. En lugar de ocultarlo (que es lo que provoca el problema y la demora) ¿No podrías ubicarlo de manera absoluta fuera de la pantalla con un left negativo y al abrir a ventana modal, moverlo? De esa manera, el objeto de Flash existe desde el inicio y se le da tiempo a que esté operativo.

Responder
Oloman  

Gracia por la nueva idea. Si me sale, ya me doy una vuelta por aquí más adelante. Si no, te dejo un Feliz 2010 :)

Responder
JMiur  

Suerte. Oloman :D

El API es my interesante pero, algo caprichosa.

Responder
WIÑAYPAQ  

Hay algún código que vaya en la URL para poder ver los videos sin bordes, sin el play y el time line????

Responder
JMiur  

Algunas de las opciones disponiles están en esta entrada y sino, en el mismo API de YouTube.

Responder
Félix Bernet  

ya para cargar y reproducir un video por defecto, sin ningún control visible ni enlaces?

Responder
JMiur  

Tendrías que hacer lo mismo pero, en lugar de poner los controles que son enlaces, debería tener un script que ejecutara la secuencia; algo así:

<script>
loadNewVideo('ID_VIDEO', 0);
play();
</script>

Responder
Félix Bernet  

si en teoría, ya se me ocurrió. Hacer la llamada, meterlo en body onLoad... pero no se porqué no funciona. No se si es porque el player no está cargado antes de hacer la llamada. Sólo me funciona con los enlaces.

He puesto lo que dices y nada

Responder
JMiur  

Felix:
Hasta ahi llego. Mucho más no se me ocurre, habría que ver si en el foro de desarrolladores del API hay alguna información que ayude. Creo como tu, que algo tiene que ver el proceso de carga del API en si mismo.

Responder
Unknown  

Que hay amigo...
Disculpa remover el tema, alguna informacion que tengas acerca de la funcion de pantalla completa con el api?

JMiur  

No que yo sepa.

Responder
Unknown  

Que hay JMiur, pasa que he desarrollado una simulacion de streamming con una lista de videos de youtube cargandolos con el api, tu investigacion me ayudo bastante, ahora pasa lo siguiente, como se utiliza el swfobject obviamente no corre en iPad sabes algo sobre correr esto en HTML5, cualquier info seria de valiosa ayuda

JMiur  

Lo desconozco, Alex. Tal vez en la página de los desarrolladores del API haya alguna clase de información al respecto.

Responder
Pancho Gamez  

como puedo poberle un marco encima de del video para darle la apariencia de una televicion?

JMiur  

Colocando el objeto en un DIV contenedor y dándole propiedades a ese DIV con CSS.

Pancho Gamez  

perdon por ser ignorante en el tema y como hago eso? tienes alguna estrada que habla al respecto?

JMiur  

EL DIV es la etiqueta donde está el video. En el ejemplo:

<div id="ytapiplayer">

Responder
Erika Gabriela Villanueva  

gracias por el aporte esta excelente y fácil de aplicar :-)

Responder

¿Quiere dejar un comentario?

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

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