MediaElement.js: el mismo player de audio/video para todos

Uno de los objetivos de HTML5 es unificar el manejo de media para todos los navegadores y plataformas, pero hasta ahora, por cuestiones de indefinición de estándares, por temas de apertura, licenciamiento o comodidad tecnológica entre los jugadores del mercado, esto no ha sido sencillo.

Para solucionar este problema, el prolífico John Dyer escribió (y liberó bajo licencia GPL v2/MIT) MediaElement.js

Se trata de un reproductor de audio/video en JavaScript, como su nombre indica, que soporta una multitud de navegadores (los que soportan HTML5 y los que no) y unifica mucho más el soporte de codecs para diferentes formatos de video.

Para simplificar el uso manteniendo el soporte entre plataformas, el reproductor utiliza el mismo API en todas, basado en los tags <audio> y <video> de HTML5, implementándolos en los navegadores que no los reconocen, delegando el soporte a reproductores en Flash o Silverlight, pero que emulan exactamente el reproductor nativo.

De esta manera, el uso de estos elementos es idéntico en todos los navegadores para el productor del contenido, y la adecuación se produce en el cliente, que probablemente ya tenga los complementos necesarios descargados. La ventaja principal es que la manera de interactuar con los activos de audio o video es siempre igual.

El siguiente cuadro muestra el soporte para todos los navegadores, y la manera en que se soportan dependiendo de la plataforma:

Como siempre, el soporte se limita más en los dispositivos móviles, sobre todo en iOS, pero nótese que los navegadores de escritorio están cubiertos por completo.

La instalación de MediaElement es muy sencilla y está bien descripta en el sitio. Del lado del cliente, básicamente se reduce a incluir esta biblioteca y hoja de estilos:

<script src="jquery.js" />
<script src="mediaelement-and-player.min.js" />
<link rel="stylesheet" href="mediaelementplayer.css" />

Y para incluir el reproductor, utilizando el caso más extremo para dar soporte completo a todo, este es el marcado HTML (obviamente sin necesidad de incluir todos los comentarios):

<video width="320" height="240" poster="poster.jpg" controls="controls" preload="none">
    <!-- MP4 en Safari, IE9, iPhone, iPad, Android, y Windows Phone 7 -->
    <source type="video/mp4" src="myvideo.mp4" />
    <!-- WebM/VP8 en Firefox4, Opera, y Chrome -->
    <source type="video/webm" src="myvideo.webm" />
    <!-- Ogg/Vorbis en versiones viejas de Firefox y Opera -->
    <source type="video/ogg" src="myvideo.ogv" />
    <!-- Opcional: Agregar subtitulos para diferentes lenguajes -->
    <track kind="subtitles" src="subtitles.srt" srclang="en" />
    <!-- Opcional: Agregar capítulos -->
    <track kind="chapters" src="chapters.srt" srclang="en" /> 
    <!-- Ante-último recurso: sólo para navegadores sin HTML5 ni JavaScript -->
    <object width="320" height="240" type="application/x-shockwave-flash" data="flashmediaelement.swf">
        <param name="movie" value="flashmediaelement.swf" />
        <param name="flashvars" value="controls=true&poster=myvideo.jpg&file=myvideo.mp4" />
        <!-- El peor de los casos: dejo una imagen -->
        <img src="myvideo.jpg" width="320" height="240" title="No tiene manera de reproducir video" />
    </object>
</video>

El reproductor en si soporta diferentes estilos, puede controlarse programáticamente desde JavaScript, tiene montones de opciones como tamaño para el marco de video o audio, volumen, reproducción en bucle, subtítulos (incluyendo traducción automática via Google translate), y más.

Creo que para cualquiera trabajando seriamente en media en este momento este reproductor es una de las soluciones más completas disponibles.