Cómo controlar múltiples videos

El reproductor que nos ofrece YouTube tiene pocas posibilidades de personalización y algunas fallas importantes. Una de ellas es que mantiene cargados los videos una vez que se ejecutó play.

Esto, que en principio no parece demasiado importante, se hace fundamental cuando insertamos varios en una misma página. Supongamos que hay 10 videos, ejecutamos el primero, lo detenemos, ejecutamos el segundo, lo detenemos, ejecutamos el tercero ... la carga se demora un poco más, seguimos así y cada nuevo video que intentemos ejecutar tardará más y más y más. Llegará un momento en que, si queremos seguir mirándolos, deberemos refrescar la página manualmente.

La explicación, tal como cuentan en Blogoscoped es que, aún cuando los detengamos por completo, cada uno de ellos permanecerá cargado y la memoria se irá saturando. Por suerte, también muestran una solución que, si bien no es la ideal es muy interesante ya que nos abre una serie de posibilidades.

Lo único que necesitamos es un script cuyo código original puede verse en la página de referencia.

Como cualquier otro script, para utilizarlo en Blogger, lo alojamos en un servidor propio y luego lo insertamos en la plantilla, por ejemplo, inmediatamente antes de la etiqueta </head>.

<script src="URL_insertarYouTube.js" type="text/javascript"></script>

¿Y cómo lo usamos?

La idea es crear un bloque expandible "+ Mostrar video" similar a cualquier truco expandir/contraer pero no para que oculte el reproductor ya que esto no nos serviría porque, oculto o visible, el video continuaría cargado.

Ese bloque, estará vacío, digamos que, de alguna manera, reservamos espacio para el reproductor en si que sólo se insertará cuando expandamos el bloque. Ese bloque, lo controlamos con un simple enlace que puede ser, tanto un texto, como una imagen.

Una vez expandido, el script "escribirá" el código correspondiente, el video comenzará a cargarse y a reproducirse automáticamente ya que se le ha añadido la opción autoplay. El enlace puede ser un una imagen o un simple texto que cambiarán a "- Ocultar el video".

El punto importante es que, este segundo enlace, que también es controlado por el script, no sólo oculta el bloque sino que elimina su contenido por lo que la memoria quedará restaurada. De esta manera, a menos que tengamos expandidos varios reproductores, sólo uno de ellos permanecerá activo y, por lo tanto, sólo uno quedará cargado, haciendo que la página sea mucho más ágil para navegar.

La forma más sencilla de utilizar este script es insertar el siguiente código:

<div id="enlaceIDVideo1">
<a href="javascript:mostraVideo(1, 'ID_video_YouTube')">
+ Mostrar video
</a>
<br/> Un texto cualquiera
</div>

<div style="display:none;" id="bloqueIDVideo1"> </div>

donde ID_video_YouTube es la identificación del video que nos provee YouTube y que puede verse, incluso, en la barra de direcciones del navegador. Por ejemplo:
http://www.youtube.com/watch?v=bU4gXHkejMo
Hay que tener en cuenta que este dato debe ser colocado entre comillas simples.

1, es el número de orden del video insertado. Si quisiéramos insertar otro, utilizaríamos enlaceIDVideo2, 2 y bloqueIDVideo2 y así sucesivamente. En realidad, el número en si mismo carece de importancia siempre y cuando cada uno de los videos de la misma página tengan números diferentes. Ese número es una forma de identificar cada uno de los videos así que no podemos tener dos bloques que usen el mismo.

En este caso, el enlace es un texto (+ Mostrar video) pero, podríamos utilizar una imagen:
<img src="URL_imagen">

Por último, el script requiere una mínima adaptación que deberá hacer cada uno de acuerdo a sus gustos o necesidades. Para editarla, utilizamos el block de notas y allí veremos dos líneas:

//  var elVinculo = "- Ocultar video"
var elVinculo = "<img src=\"colapsarYT.png\">"

Por defecto, el script está preparado para utiliza como enlace, una imagen:
var elVinculo = "<img src=\"colapsarYT.png\">"
en este caso, basta cambiar colapsarYT.png por la URL de la imagen a utilizar.

Si quisiéramos utilizar un texto, bastaría cambiar esas sos líneas por algo semejante a esto:

var elVinculo = "- Ocultar video"
//  var elVinculo = "<img src=\"colapsarYT.png\">"