Con el auge del estándar HTML5 los esfuerzos de muchas organizaciones están dirigidos a lograr desarrollar un lenguaje de Internet libre del control de empresas privadas. Personalmente me identifico con la ideología de que Internet es actualmente el único medio de expresión libre que tiene la sociedad, por lo tanto es deseable que todos los componentes que forman Internet sean también libres. Como un sencillo ejemplo este blog es 100% compatible con el estándar XHTML de la W3C, lo que significa que forma parte de una web semántica y no depende de ningún software de terceros (además del navegador) para funcionar. Aún así, la reproducción de audio y video en Internet todavía depende de tecnologías atadas a empresas como Adobe (con Flash), Google, Microsoft, Apple (las 3 en el tema de los codecs), entre muchas otras.
Pues bien, para solucionar este último problema comienzan a aparecer alternativas como jPlayer, un reproductor de audio y video escrito en javascript que aprovecha las nuevas características multimedia de HTML5. El reproductor tiene un peso de tan solo 8Kb y es multiplaforma, multinavegador y además soporta múltiples codecs de audio y video. El diseño del reproductor se puede personalizar fácilmente utilizando estilos CSS. Les recomiendo encarecidamente visitar la sección de demostración de la página oficial del reproductor.
Los codecs de audio y video que jPlayer soporta son:
- HTML5: mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav
- Flash: mp3, mp4 (AAC/H.264)
Los sistemas operativos y navegadores soportados son los siguientes:
- Windows: Firefox, Chrome, Opera, Safari, IE6, IE7, IE8, IE9
- OSX: Safari, Firefox, Chrome, Opera
- iOS: Mobile Safari: iPad, iPhone, iPod Touch
- Android: Android 2.3
Para utilizarlo en tu sitio web tan solo es necesario enlazar la librería jQuery y enlazar el archivo javascript de jPlayer. Posteriormente se debe crear el código HTML en el cual se quiere mostrar el reproductor:
1
2
3
4
5
| <div id="jquery_jplayer_1"></div>
<div id="jp_interface_1">
<a href="#" class="jp-play">Play</a>
<a href="#" class="jp-pause">Pause</a>
</div> |
Agregamos las siguientes líneas de código javascript y vualá, tendrás un reproductor de audio o video en tu sitio web que funcionará con el estándar HTML5 cuando esté disponible y en su defecto utilizará Flash (de forma oculta al usuario final).
1
2
3
4
5
6
7
8
9
10
11
12
| $(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4a: "/media/mysound.mp4",
oga: "/media/mysound.ogg"
});
},
swfPath: "/js",
supplied: "m4a, oga"
});
});; |
Al ser jPlayer un proyecto de código abierto, me encontré con el siguiente fork del reproductor que incluye una interfaz personalizada con CSS3 y soporta gestos de arrastrar y soltar para avanzar o reproducir el audio. Hagan la prueba presionando el botón a continuación.
Si eres desarrollador web sin duda jPlayer te será de utilidad para tus proyectos.
inicio
Comentarios recientes