Controlar vídeos de Youtube con Javascript

Introducción

Tras un tiempo trasteando con API’s llegó el momento de trabajar con la del reproductor de Youtube, y lo cierto es que su uso es bastante sencillo.

En este post veremos una serie de funciones más o menos avanzadas, que nos permitirán controlar casi todos los aspectos del reproductor de Youtube.

Primeros pasos

En primer lugar, necesitamos swfobject, un proyecto de código abierto, que permite integrar un archivo swf (de Flash) en nuestra página con un pequeño archivo Javascript.

Así que nos lo descargamos y subimos el archivo js a nuestro servidor.

Además, para poder utilizar la API de Youtube, en la url del vídeo que queramos insertar, tenemos que añadir el parámetro enablejsapi=1 y playerapiid=ytplayer

Viendo un ejemplo, integremos un vídeo para permitir el uso de funciones (VIDEO_ID es la id del vídeo lógicamente)

1
2
3
4
5
6
7
8
9
10
11
12
13

<script type="text/javascript" src="swfobject.js"></script>    
 <div id="ytapiplayer">
   Se necesita una versión de Flash Player superior a 8 
	y Javascript, para ver este video.
 </div>
 
 <script type="text/javascript">
 
   var params = { allowScriptAccess: "always" };
   var atts = { id: "myytplayer" };
   swfobject.embedSWF("http://www.youtube.com/v/<strong>VIDEO_ID</strong>&enablejsapi=1&playerapiid=ytplayer", 
                      "ytapiplayer", "425", "356", "8", null, null, params, atts);
 </script>

La función swfobject.embedSWF viene, como ya supondrás, del archivo swfobject.js, que hemos descargado previamente, (al final tienes enlaces a la documentación).

Bien, una vez que tenemos el reproductor integrado, necesitamos obtener el objeto que representa el reproductor para poder hacer llamadas, la función onYouTubePlayerReady se ejecutará cuando el reproductor está completamente cargado y la API está lista para recibir llamadas.

1
2
3

 function onYouTubePlayerReady(playerId) {
      ytplayer = document.getElementById("myytplayer");
    }

Funciones básicas

Ahora que tenemos nuestro objeto ytplayer podemos llamar a las funciones. Por ejemplo, si queremos tener un enlace que reproduzca el vídeo simplemente añadimos

1

 <a href="javascript:ytplayer.playVideo()">Reproducir</a>

O para pausar el reproductor…

1

 <a href="javascript:ytplayer.pauseVideo()">Pausar</a>

Hay muchas funciones, estas dos son solo un ejemplo.

Ejemplo práctico y documentación

Hay un ejemplo en esta página en la que podemos ver más funciones aplicadas. Si observamos el código usa la famosa Google AJAX Libraries API que básicamente lo que hace es cargar las librerías más usadas, como jQuery o Mootools y además permite cargar otras. En este caso…

1
2
3
4
5
6

<!-- Use the Google AJAX Libraries API: 
	 http://code.google.com/apis/ajaxlibs/ --> 
<script src="http://www.google.com/jsapi"></script> 
<script> 
	google.load("swfobject", "2.1");
</script>

Carga la de swfobject con la función google.load(librería,versión).

Conclusión

Bien, eso es todo, aquí dejo unos enlaces de documentación y para cualquier duda comenta.