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.
Aquí va todo lo necesario, librerías, código y configuración:
DESPLEGAR CÓDIGO
Indicar las librerías javaScript y Hojas de Estilo.
Cargar las librerías necesarias en el HEAD: 1
2
3
4
5
6
7
8
9
10
<script src="http://mihost.com/midir/jquery-v1.8.3.js"></script>
<link rel="stylesheet" href="http://mihost.com/midir/mediaelementplayer.min.css" />
<script src="http://mihost.com/midir/mediaelement-and-player.min.js"></script>
<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 .
Código JavaScript a incluir en el HEAD: 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script type='text/javascript'>
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();
Shadowbox.close();
});
}
});
};
</script>
Y por último la forma de iniciar un vídeo.
Llamar al vídeo desde el BODY: 1
2
3
4
5
6
7
8
9
10
11
12
13
14
<a href="javascript:mostrarsb('http://mihost.com/midir/mivideo.mp4', 270, 478,'Fiestas de la Virgen');">Ver video en Mediaelement sobre Shadowbox</a>
<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>
OCULTAR CÓDIGO
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;" >
