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;" >