Mediaelement Player sobre Shadowbox

En este post mostraré como mejorar las prestaciones de Shadowbox configurándolo para presentar vídeos h.264 (MP4) controlados con Mediaelement.

Los vídeos correrán según las especificaciones del framework Mediaelement Player, en los navegadores con soporte HTML5, o que dispongan del plugin Flash o Silverlight, siempre que además soporten JavaScript, imprescindible además para hacer funcionar Shadowbox. Esto abarca a IE6+, FF, Safari, Chrome y algunos otros.

• DEMO: Ver en Shadowbox un vídeo corriendo con Mediaelement y cerrar Shadowbox al finalizar
• Muestra de compatibilidad 1: Ver un vídeo con Mediaelement embebido en esta página
  
• Muestra de compatibilidad 2: Ver una imágen no redimensionable en Shadowbox
• Muestra de compatibilidad 3: Ver un carrusel de imágenes en Shadowbox y cerrar cuando se hayan visto todas:
  [ iniciar en la imágen 1 ] [ iniciar en la imágen 2 ] [ iniciar en la imágen 3 ] [ iniciar en la imágen 4 ]
• Muestra de compatibilidad 4: Ver un DIV oculto (objeto inline)

Aquí va todo lo necesario, librerías, código y configuración:

Indicar las librerías javaScript y Hojas de Estilo.

<!-- Usamos jQuery -->
<script src="http://mihost.com/midir/jquery-v1.8.3.js"></script>

<!-- Cargar el motor Medialelement -->
<link rel="stylesheet" href="http://mihost.com/midir/mediaelementplayer.min.css" />
<script src="http://mihost.com/midir/mediaelement-and-player.min.js"></script>

<!-- Cargar Shadowbox -->
<link href='http://mihost.com/midir/shadowbox.css' rel='stylesheet' type='text/css'/>
<script src='http://mihost.com/midir/shadowbox.js' type='text/javascript'></script>

A continuación la configuración de Mediaelement para Shadowbox.

<script type='text/javascript'>
  //<![CDATA[
    function mostrarsb(pelicula,ancho,alto,titulo) {
      codigopelicula='<div style="100%;height:100%;overflow:hidden;"><a href="'+pelicula+'" width="'+ancho+'" height="'+alto+'" id="playersb" controls="controls" preload="none"></a></div>'
      Shadowbox.open({
        content: codigopelicula,
        player: 'html',
        title: titulo,
        width: ancho,
        height: alto
      });
    };
    Shadowbox.init({
      onFinish: onShFinish
    });
    function onShFinish() {
      $('#playersb').mediaelementplayer({             
        success: function(media) {
          media.play();
          media.addEventListener('ended', function() {
            $('#playersb').empty();
            // setTimeout(function(){Shadowbox.close()},10000); // Esperar 10s antes de cerrar,
            Shadowbox.close();      // o cerrar inmediatamente.
          });
        }
      });
    };
  //]]>
  </script>

Y por último la forma de iniciar un vídeo.

<!-- en línea, en el enlace: -->
<a href="javascript:mostrarsb('http://mihost.com/midir/mivideo.mp4', 270, 478,'Fiestas de la Virgen');">Ver video en Mediaelement sobre Shadowbox</a>
<!--###########################|                URL               |ancho| alto |      titulo       |##############################################-->

<!-- o en diferido a un enlace, botón o imágen: -->
<a id="demo" href="#">Llamo al vídeo desde un enlace</a>
<button id="demo">Llamo al vídeo desde un botón</button>
<img id="demo" src="http://mihost.com/midir/miimg.jpg" /> 

<script>
 $("#demo").click(function () {
    mostrarsb('http://mihost.com/midir/mivideo.mp4',270,478,'Fiestas de la Virgen');
  });
</script>

Puedes descargarte los ficheros necesarios de los sitios originales: [ Mediaelement ] [ Shadowbox ] [ jQuery ]

O alternativamente puesdes descargarte los ficheros que yo he usado: [ Mediaelement v2.01, Shadowbox v3.03, jQuery v1.8.3 ]

<div> oculto en la página. Puede contener información referente a las fotografías, películas, formar parte de un grupo de imágenes, etc.

<div style="display:none;">