Etiquetas <audio> y <video> Implementación básica, ventajas y desventajas del reproductor de audio y video de HTML5

Aunque todavía Internet no está totalmente lista para ellas, todos los navegadores punteros ya las soportan, además de nuevas plataformas como Ipad y Iphone, las etiquetas de HTML5 <audio> y <video> son una gran manera de ahorrar trabajo y evitar el uso de flash, pero debido a la falta de acuerdos entre los desarrolladores de los navegadores, son dos propiedades que nacen con una desventaja con respecto a Flash y que hace obligatorio tener hasta versiones de un mismo contenido debido a que unos navegadores no dan soporte a codecs que otros navegadores de la competencia algo evidente entre la implementacion de los estándares H.264 de Microsoft-Apple y WebM de Google.

Agregar video mediante < video>
El planteamiento básico para una etiqueta de video sería:

<video width="360" height="280" controls="controls" src="video.mp4" poster="imagenprevia.jpg" preload="metadata" >
Su navegador no soporta HTML5
</video>

1. controls hace que aparezcan los controles.
2. src es la dirección del video.
3. poster es la imagen que será la vista previa.
4. height y width determinan el tamaño del video (Sin soporte de ajuste).
5. preload="metadata" evita que el video se cargue con la página, solamente los controles, hasta que se pulsa el botón play.
6. Entre <video> y </video> se puede poner un mensaje o un código alternativo (para Flash o Silverlight) cuando no se ejecute el contenido como pasa con la etiqueta <noscript>.
7. Pueden ver más atributos aquí.

El resultado será que solamente en Internet Explorer o Chrome funcionará, en Firefox aparecerá un espacio vacio en el reproductor.

Etiqueta <source>
Para solventar esto podemos podemos usar dentro de video la etiqueta <source> para cargar alternativas, mediante el atributo src="video.formato", esto significa que dependiendo del navegador, este elegirá uno u otro archivo:

<video width="320" height="240" controls="controls" poster="imagenprevia.jpg" preload="metadata" >
<source src="video.ogg" type="video/ogg" />
<source src="video.mp4" type="video/mp4" />
Su navegador no soporta HTML5
</video>

Generalmente con mp4, mp3, ogv y ogg, daremos soporte a la mayoría de los navegadores, pero no a todos, algunos podrían requerir de WebM que tendríamos que agregar una tercera etiqueta source <source src="video.webm" type="video/mp4" /> -especialmente en los dispositivos móviles con android-, sin embargo, aquellos que han aceptado implementar WebM, también tiene soporte para Theore/Vorbis (ogg/ogv)

*Nota: múltiples etiquetas <source> no son soportadas en Iphone y Ipad, salvo la primera, por tanto es recomendable poner en primer lugar los archivos de mpeg-4 y mpeg-3 de H.264

<source> y tipos MIME
En source además del la dirección del archivo debemos especificar el tipo MIME de formato con el atributo type="video/formato" para los videos y type="audio/formato" para los audios.
Como ya se dijo existen tres estándares y cada uno soporta un formato diferente H.264 (mp4, mp3 y acc), THEORA/Vorbis (ogg y ogv) y WEBM (WebM)

Tipos en video:

type="video/ogg"
type="video/webm"
type="video/mp4"

Tipos en audio:

type="audio/ogg"
type="audio/mpeg"
type="video/webm"

El resultado será que tanto en Firefox 4, IE 9 y Chrome 12 veremos el siguiente video, aunque los controles varían de uno a otro:

Pulsa en la imagen para lanzar el ejemplo

Agregar video mediante <Audio>
El planteamiento básico para una etiqueta de audio es mucho más sencilla [Más atributos aquí]:

<audio controls="controls" src="audio.mp3" preload="metadata" >
Su navegador no soporta HTML5
</audio>

Sin embargo, nuevamente los mp3 no se podrán escuchar en Firefox por lo que tendremos que poner un archivo de audio en formato ogg.

<audio controls="controls" preload="metadata">
<source src="audio.ogg" type="audio/ogg" />
<source src="audio.mp3" type="audio/mpeg" />
Su navegador no soporta HTML5
</audio>

El resultado será que tanto en Firefox 4, IE 9, Opera, Safari y Chrome 12 reproduciremos el siguiente audio:

Pulsa en la imagen para lanzar el ejemplo

Otros navegadores sin soporte HTML5
Para los navegadores antiguos o sin soporte para html5 podemos usar html5media, solamente se agrega entre <head> y </head> que usa Flowplayer para cargar en flash el video o audio.

<script src="http://api.html5media.info/1.1.4/html5media.min.js"></script>

• Ver Web de HTML5Media.

Ventajas de HTML5:

• Cualquiera puede implementar de forma fácil y práctica videos y audios.
• Se puede modificar el comportamiento del video mediante Javascript.
• Podemos crear nuestros propios controles mediante Javascript.
• Podemos aumentar el soporte de <video> y <audio> mezclándolo con Flash.
• Soportes gratuitos de conversión a WEB-M, H.254 y THEORA

Desventajas HTML5:

Soporte dividido
Diferentes navegadores soportan diferentes Codecs estandar de H.264 (mp4, mp3 y acc), THEORA/Vorbis (ogg y ogv) y WEBM (webm)

Diseño
El diseño del navegador no es estandarizado y si se quieren acciones avanzadas en los controles como pantalla completa y ajuste de relación de aspecto, se debe tener un javascript que provea estas funciones, no hay atributos que las provean.

Para rematarla, algunos navegadores no implementan correctamente la carga del reproductor, por lo que algunos botones son poco "usables" o interactivos en especial en Chrome.

Tamaño
Si tienes un sitio web convencional con hosting propio, resulta una locura almacenar dos o tres archivos en formatos distintos de un mismo audio o video, que de todas formas requerirá flash para dar todo su potencial, muchas veces es mejor usar un reproductor flash, debido a que no es una etiqueta madura, Sin embargo si el destino es para dispositivos portátiles como Ipad, Iphone, Android quizás sea la única forma de ofrecer video y audio.

Atributos parcialmente implementados
Por ejemplo, Chrome no maneja correctamente preload="metadata" y cargará todo el contenido con los metadatos en vez de solo los metadatos (controles e imagen previa), Internet Explorer al usar preload="none" ocultará los controles de reproducción, siendo necesario dar clic derecho y en Reproducir, cada vez que recarguemos la página en Chrome pasaremos por el mismo proceso de carga de los datos una y otra vez si no implementamos javascript.

Streaming pobremente implementado
El streaming tiene el inconveniente de usar todo el ancho de banda de tu conexión, mientras un streaming normal solamente lo requerido por la cache. En HTML5 se tiene que cargar una y otra vez un video para escucharlo nuevamente, a menos que este sea almacenado en el mismo dominio o mediante Javascript.

Conclusiones
< video> y <audio>, no son una panacea para incluir material audiovisual, diversos problemas quizás no se resuelvan nunca, especialmente sus defectos en el soporte de codecs debido a intereses de sus desarrolladores y los costos de las licencias que genera el empleo de los mismos en navegadores web.

También su uso con flash presenta diversos problemas de compatibilidad y que en muchos casos obligan al empleo de Javascript para solventarlos, convirtiendo estas características nodales en HTML5 en secundarias y por regla general poco recomendables.

*Este artículo es una evaluación parcial e incompleta, contiene o puede contener diversos errores en el manejo e interpretación de las etiquetas < video> y <audio>, es susceptible de ser ampliado y/o mejorado.

Recursos

• Convertidor de video a HTML5
• Música de French Zone - Volumen 7
• Video de Wikipedia commons