Escribí el script videox3.js para dar soporte de vídeo multiformato a Shadowbox, aunque funcionará igualmente con cualquier otro gestor de visualización.
El funcionamiento es sencillo: se busca en la página los enlaces de vídeo MP4, y si es preciso se cambian por enlaces FLV o WEBM, según el formato que entienda el navegador del usuario. Los enlaces quedarán modificados en el DOM nada más finalizar la carga de la página.
El script funcionará correctamente bajo las siguientes condiciones:
- Los enlaces de vídeo contenidos en la página web deben apuntar a archivos mp4.
- Los enlaces de vídeo que vayan a ser afectados por esta utilidad deberán estar marcados con name="videox3"
- Se deben ofrecer tres archivos por cada video que vaya a ser tratado, en formatos FLV, MP4/H.264 y WEBM.
- Los tres archivos de un mismo vídeo deberán estar en el mismo directorio del servidor.
- Es necesario, además del soporte Javascript, uno de los plugins de los formatos de vídeo ofrecidos activo en el navegador, la librería jQuery y un script PluginDetect específico para detectar Flash y Quick Time, si algo de esto falla, los enlaces quedarán sin modificar y apuntando a los archivos MP4 originalmente codificados en la página.
- 18-dic-2012 - Para la familia Mac se ofrece siempre y únicamente archivos MP4.
El script videox3.js:
$(document).ready(function() {
var tags_v3 = document.getElementsByName("videox3"); // elementos name="videox3"
var nr_tv3 = tags_v3.length;
var link_v3, tit_tag, tag_img, src_img, src_img_txt, src_img_txt_arr, link_img, semienlacevideo;
var testEl = document.createElement("video"), webm;
var userAgent = window.navigator.userAgent.toLowerCase(),
FamiliaMac = /macintosh|iphone|ipod|ipad/.test( userAgent );
for (i=0; i<nr_tv3; i++) {
link_v3 = tags_v3[i].getAttribute("href"); // enlace del video mp4
semienlacevideo = link_v3.substring(0,link_v3.length-3);
if (link_v3.match(/\.mp4$/i)) {
tit_tag = tags_v3[i].getAttribute("title"); // título del vídeo
// INI extraer enlace de la imagen:
tag_img = tags_v3[i].innerHTML;
if (tag_img.match(/<img/i)) {
src_img = tag_img.match(/src=[\"\"].*[\"\"]/i);
src_img_txt = new String(src_img);
src_img_txt_arr = src_img_txt.split(/[\"\"]+/);
link_img = src_img_txt_arr[1]; // enlace a la tesela del vídeo
} else {
link_img = false;
}
// FIN extraer enlace de la imagen.
}
if (FamiliaMac) {
// familia Macintosh, asigno video mp4
} else if (PluginDetect.getVersion("Flash")) {
// plugin flash activo
tags_v3[i].href=semienlacevideo+"flv";
} else if (PluginDetect.getVersion("QuickTime")) {
// QT activo, video mp4
} else if (webm = "" !== testEl.canPlayType("video/webm; codecs='vp8, vorbis'")) {
// video webm/html5 soportado
tags_v3[i].href=semienlacevideo+"webm";
} else {
// No hay videoplayer, devuelve la imagen si la hay.
tags_v3[i].title="Plugins video?";
if (link_img) {
tags_v3[i].href=link_img;
}
}
}
});
Llamar a videox3, jQuery y PluginDetect desde el head:
<script src="http://dl.dropbox.com/micuenta/jquery-v1.8.3.js" />
<script src='http://dl.dropbox.com/micuenta/PluginDetect_Flash_QuickTime.js' />
<script src="http://dl.dropbox.com/micuenta/videox3.js" />
</head>Ejemplos de enlaces a video en el body:
<body>
<a name="videox3" href="http://dl.dropbox.com/micuenta/mivideo1.mp4">
<img src="http://dl.dropbox.com/micuenta/mivideo1.png"/></a>
<a name="videox3" href="http://dl.dropbox.com/micuenta/mivideo2.mp4">Mi video 2</a>
<a name="videox3" href='http://dl.dropbox.com/micuenta/mivideo3.mp4'>
<img src="http://dl.dropbox.com/micuenta/mivideo3.png"/></a>Según el ejemplo, el resto de los archivos de vídeo deberán estar disponibles en:
- http://dl.dropbox.com/micuenta/mivideo1.flv
- http://dl.dropbox.com/micuenta/mivideo1.webm
- http://dl.dropbox.com/micuenta/mivideo2.flv
- http://dl.dropbox.com/micuenta/mivideo2.webm
- http://dl.dropbox.com/micuenta/mivideo3.flv
- http://dl.dropbox.com/micuenta/mivideo3.webm
Tienes los ficheros necesarios videox3.js, jQuery y PluginDetect en: videox3.zip O si quieres puedes usar la librería original jQuery cogiéndola de su web: http://jquery.com Y generar tu propio detector de plugins en PluginDetect: http://www.pinlady.net/PluginDetect/
