Cinema.js, enfoque a videos con jQuery

palabras / Facebook / Twitter / Enlace / Comentar

Fork me on GitHub

Tras la necesidad de destacar un video de manera sencilla en una página web, añadiendo efectos de enfoque, encontré la solución de este problema desarrollando Cinema.js.

Cinema.js es un plugin en desarrollo con la idea base que verán a continuación; lo que hace es obscurecer el fondo y añadir un par de estilos al video para que este, al ser reproducido, para que el usuario no pierda el foco.

El plugin (o función, todavía) en cuestión consta en lo siguiente:

$(document).ready(function () {
  // Crea overlay
  $("body").append('<div id="cinema-overlay"></div>');
  $("#cinema-overlay").css({
    'display': 'none',
    'width': '100%',
    'height': '100%',
    'position': 'fixed',
    'z-index': '999',
    'top': '0',
    'left': '0',
    'background-image': 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNgYGB4CgAA6gDmE9JG2QAAAABJRU5ErkJggg==)'
  });
  // Estilos iframe
  $("iframe").css({
    'position': 'relative',
    'z-index': 9999
  });
  // Overlay click function
  $("#cinema-overlay").live("click", function () {
    $(this).fadeOut('fast');
    player.pauseVideo();
  });
  // Añadimos js api en iframe
  $("iframe").each(function () {
    var ifr_source = $(this).attr('src');
    var jsapi = "enablejsapi=1";
    if (ifr_source.indexOf('?') != -1) {
      var getQString = ifr_source.split('?');
      var oldString = getQString[1];
      var newString = getQString[0];
      $(this).attr('src', newString + '?' + jsapi + '&' + oldString);
    } else $(this).attr('src', ifr_source + '?' + jsapi);
  });
});
// Cargamos youtube API de manera asíncrona
(function () {
  var s = document.createElement("script");
  s.src = "http://www.youtube.com/player_api";
  var before = document.getElementsByTagName("script")[0];
  before.parentNode.insertBefore(s, before);
})();
// Cargamos api y apuntamos a función onStateChange -> cinemaJs
var player;
function onYouTubePlayerAPIReady() {
  player = new YT.Player('cinemajs', {
    events: {
      "onStateChange": cinemaJs
    }
  });
}
// Si está en estado (play = 1) -> show overlay
// else if (pause = 2) -> hide overlay
function cinemaJs(event) {
  if (event.data == '1') {
    $("#cinema-overlay").fadeIn('fast');
  } else if (event.data == '2') {
    $("#cinema-overlay").fadeOut('fast');
  }
}

El código está comentado y lo puedes revisar en Github, así como realizar una aportación mediante un pull request o levantando un issue.

Demo

Lo podrás probar reproduciendo el video y pausándolo.

Y es básicamente la funcionalidad básica que busco como base, para a partir de ahí, realizar una expansión más pesada.


Comentarios

Copyright © 2012-2013 AbarcaRodriguez.com