Lazy load de vídeos

Seguimos exprimiendo milisegundos a la carga de páginas. Si nuestra página tiene vídeos, veremos como la instanciación del objeto del vídeo puede matar nuestro rendimiento, sobre todo si se tienen varios vídeos en una misma página. Para agilizarlo, la mejor manera es realizar la carga del objeto de reproducción bajo demanda de la misma manera que se hace por ejemplo en el navegador de Android. Vamos a ver dos aproximaciones, una con jQuery y otra con javascript, pero ambas se basan en "ocultar" el código real del objeto del reproductor con un comentario HTML poniendo delante una fachada de cartón piedra para ocupar el espacio del vídeo. Una vez se hace ckick en el hueco del vídeo, se elimina el comentario y se carga el objeto real de modo que comience la reproducción de forma automática.

Para el usuario el proceso es transparente, pero la velocidad de la página y su uso de memoria nos lo agradecerán. Esta técnica se usa en Facebook por ejemplo.

Utilizando jQuery
La imagen que se usará como fachada, se coloca de fondo de un hipervínculo que apunta a la dirección real del vídeo (por accesibilidad) y a éste, se le asocia un evento de click que se dispare una única vez. Una vez se hace click, se elimina el href y el comentario del objeto del vídeo.

En el evento de document ready, se procesarán los hipervínculos de la clase "video-in-link" para asignar el evento de click que se ejecutará una única vez mediante el método "one".

Usando javascript a pelo
En esta versión, se usará el evento onClick para llamar a una función que recibirá el hipervínculo pulsado mediante "this".

Una vez se pulsa el hipervínculo y se llama a la función, se elemina el manejador de evento de click del hipervínculo que hemos pulsado para evitar que se llame de nuevo. También se elimina el comentario y el href para obtener el mismo funcionamiento que antes.

Notas

El vídeo debe estar en modo de "autoplay" porque si no, el usuario tendrá que hacer click 2 veces. En youtube habrá que poner el parámetro "autoplay=1" al final.

Para evitar los flashes blancos al instanciar el objeto flash del vídeo, hay que poner el parámetro "wmode" con valor "transparent".