Lo prometido es deuda... y tal y como comenté en mi artículo sobre plugins para Octopress, finalmente he desarrollado un nuevo plugin para mostrar los videos del genial Vimeo en aquellos blogs basados en Jekyll y Octopress de forma que el reproductor embebido no se cargue hasta que el usuario no haga click en dicho video.

De ésta forma evitamos la carga innecesaria del iframe de Vimeo en aquellas páginas en las que el usuario no está interesado en reproducir los videos que hay en ella.

¿Nunca os ha pasado que al entrar en una página, varios videos (sobre todo del asqueroso Youtube) comienzan a reproducirse automaticamente (con audio incluido), molestandoos no solo a vosotros sino a todos los que os rodean (en caso de tener el volumen activado)?

Es terrible... por no mencionar el coste que supone para el navegador tener que cargar todos esos reproductores (que además la mayor parte de las veces estan hechos en aquel terrible invento cuyo nombre no diré aquí) provocando una lentitud innecesaria si vuestro equipo/linea no son lo suficientemente potentes.

Para evitar ésto se inventó el concepto del lazy loading, que consiste en la inicialización de los objetos a medida que vayamos a usarlos, no antes.

Es decir, lazy loading es un patrón de diseño que aplicado a este tema de los videos, evitaría que cargáramos dichos reproductores a no ser que realmente vayamos a usarlos.

Este plugin utiliza la API pública de Vimeo para mostrar un thumbnail (o previsualización) del video para que se vea de qué va dicho video, pero sin llegar a cargarlo... y cuando hacemos click en él, dicho thumbnail se sustituye por el video en cuestión.

Cono no tengo mucha idea de Ruby, me he basado en un plugin que hace ésto mismo pero para los videos de Youtube. Podeis ver éste plugin aquí: https://github.com/erossignon/jekyll-youtube-lazyloading

El repositorio está en mi Gitlab personal, pero lo he subido también a Github para aquellos raros a los que os gusta más este último.

Instalación

La instalación del plugin no podría ser más sencilla. Únicamente teneis que descargar el código desde el repositorio público y seguir las instrucciones del archivo README, que son básicamente éstas:

  1. Copiar el archivo vimeo.rb (el codigo del propio plugin) a vuestro directorio plugins.
  2. Copiar el archivo _rve.sccs (los estilos CSS) a vuestro directorio /sass/custom.
  3. Copiar los archivos video-play-button.png y video-play-button-hover.png (las imágenes de PLAY del video) a vuestro directorio /source/images.
  4. Añadir @import "custom/rve" a vuestro archivo /sass/screen.scss.

Utilización

Una vez instalado, se utiliza igual que cualquier otro tag de Jekyll/Octopress.

La forma de utilizarlo dentro de cualquier post de Octopress sería:

{% vimeo <video_id> [ancho] [alto] [texto alternativo] %}

Los parámetros que admite el plugin son:

  • video_id (parámetro obligatorio): Especifica el ID del video que queremos utilizar. Es la parte numérica de la URL del video en Vimeo. Por ejemplo, en el video https://vimeo.com/49957083 el ID sería 49957083.
  • ancho (parametro opcional): Podemos utilizar éste parámetro para indicar un ancho fijo (en pixeles) al video. Si no lo especificamos, el video ocupará todo el ancho que le sea posible (100%).
  • alto (parametro opcional): Al igual que el parámetro anterior, podemos utilizar indicar el alto (en pixeles) que ocupará el video. Si no lo especificamos, el video ocupará todo el alto que le sea posible (100%).
  • texto alternativo (parámetro opcional): Este parámetro se usa para indicar el texto que queremos que aparezca al situar el puntero del ratón sobre el video (antes de reproducirlo). El valor por defecto del texto alternativo si no especificamos éste parámetro es "Click here to play".

La forma más clara de ver su utilización es con un ejemplo. Si utilizamos éste tag:

{% vimeo 102875092 Timelapse en Seseña / Toledo %}

Se mostrará ésto (Al dejar el ratón encima del video (antes de darle al "play") vereis el texto alternativo):

Nota: a raíz de la migración de esta web de Octopress a Pelican, el resultado del plugin no se va a mostrar correctamente aquí, obviamente... pero funciona perfectamente si vuestra web está hecha con Jekyll u Octopress.

Espero que os resulte útil, y si encontrais algun bug o quereis añadir alguna cosa de utilidad al plugin, no dudeis en hacer un fork del repositorio y colaborar.

Alaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Referencias