Machete.js, el lazy loader para videos

palabras / Facebook / Twitter / Enlace / Comentar

Fork me on GitHub

Machete.js es un plugin en desarrollo escrito en Vanilla JS con la intención de crear un lazy loader para videos de Youtube, es decir, retrasar la carga del reproductor HTML5 o Flash.

Actualmente el plugin funciona si se hace uso de las etiquetas <yt></yt> insertando dentro de estas el video de elección. La intención en un futuro es que se haga de manera automática respetando los estándares de HTML.

Igualmente el plugin recibe parametros como ancho (a proporción 16:9) y un "skin" para el botón play del video.

Demo

Puedes ver el siguiente ejemplo funcionando en exploradores modernos:

http://www.youtube.com/watch?v=W3OQgh_h4U4 http://www.youtube.com/watch?v=Vo0Cazxj_yc http://www.youtube.com/watch?v=yKWoPlL2B8I http://www.youtube.com/watch?v=Mx1tiq15Hqs

Código

El script en cuestión es el siguiente; cabe aclarar que es sólo un prototipo. Está habilitado para poder procesar varios videos, es decir, si lo agregas, todos tus videos serán procesados por Machete.js.

function machete(width, mask) {
  var el, count, txtvid, i, results, video, final, img, cont, d, n, play, sheet, height, ih, iw;
  width = width || 640;
  mask = mask || 1;
  height = (width * 9) / 16;
  document.createElement('yt');
  el = document.getElementsByTagName('yt');
  count = el.length;
  for (i = 0; i < count; i++) {
    txtvid = el[i].textContent;
    el[i].textContent = '';
    results = txtvid.match('[\\?&]v=([^&#]*)');
    video = results[1];
    final = 'http://img.youtube.com/vi/' + video + '/hqdefault.jpg';
    img = new Image();
    img.src = final;
    img.id = video;
    img.className = "video";
    if (mask === 1) {
      play = new Image(99, 100);
      play.src = "img/1.png";
    }
    if (mask === 2) {
      play = new Image(128, 128);
      play.src = "img/2.png";
    }
    if (mask === 3) {
      play = new Image(189, 189);
      play.src = "img/3.png";
    }
    play.id = "playbutton";
    cont = document.createElement('div');
    cont.id = video + "_div";
    cont.className = "contenedorvideo";
    cont.appendChild(img);
    cont.appendChild(play);
    el[i].appendChild(cont);
    document.getElementById(video).onclick = function () {
      document.getElementById(this.id + "_div").innerHTML = '<iframe width="' + width + '" height="' + height + '" src="http://www.youtube.com/embed/' + this.id + '?rel=0&autoplay=1&hd=1" frameborder="0" allowfullscreen></iframe>';
    }
  }
  iw = Math.round(play.width / 2);
  ih = Math.round(play.height / 2);
  sheet = document.createElement('style');
  sheet.innerHTML = "#playbutton{position:absolute;top:50%;left:50%;margin-left:-" + iw + "px;margin-top:-" + ih + "px;pointer-events:none;}.contenedorvideo{width:" + width + "px;height:" + height + "px;position:relative;margin:0 auto;}img.video{width:" + width + "px;height:" + height + "px;}";
  document.body.appendChild(sheet);
 }

Instalación y uso

Agregar entre las etiquetas <head></head> la versión de elección de Machete.js:

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

Y antes de cerrar las etiquetas <body></body>, llamar a la función:

machete(640, 1);

Los videos en cuestión tendrán que ser insertados de la siguiente manera:

<yt>http://www.youtube.com/watch?v=zdW7PvGZ0uM</yt>

Puedes revisar más acerca de este proyecto, realizar pull requests y levantar issues desde el repositorio: Machete.js


Comentarios

Copyright © 2012-2013 AbarcaRodriguez.com