HTML5: Etiquetas multimedia

Hasta la aparición de HTML5 si queríamos reproducir dentro de nuestra pagina un archivo de audio o de vídeo la única opción que teníamos era utilizar Flash para lo cual los usuarios que ingresaran a la pagina deberían tener instalado el correspondiente plugin de Flash. Ahora bien no siempre todos los plugins se comporta de una manera estable, algunos pueden volver al navegador un poco inestable por cual en ciertas ocasiones puede no funcionar del todo bien y reproducir el vídeo o el audio.

Esta situación hizo que nuestros sitios dependieran de componentes de terceros o ajenos al navegador por un largo tiempo pero con la aparición de HTML5 y sus nuevos tags (audio y vídeo) estos ya no son necesarios.

Audio

El elemento audio nos permite reproducir cierto tipo de formatos de audio evitando tener que utilizar Flash para ello. Los formatos de audio soportados dependen de cada uno de los navegadores ya que en la especificación no se menciona ningún formato en particular que debe ser soportado.

En la siguiente lista podrán ver los codecs de audio que son soportados por los navegadores:

Navegador AAC MP3 VORBIS WAV
Chrome 25+ 25+ 25+ 25+
Internet Explorer 9+ 9+ 9+
Firefox 22+ 22+ 20+ 20+
Safari 5.1+ 5.1+ 5.1+
Opera 12+  12+

Ahora veamos como podemos reproducir un archivo usando este nuevo elemento:

Este ejemplo de código carga un archivo para reproducirlo pero seremos nosotros mismos los que debamos iniciar la reproducción.

  • Reproducción automática

Esto nos va a permitir que una vez que se termine de cargar la pagina web se inicie automáticamente la reproducción del archivo de audio. Para ello basta con agregar el atributo autoplay.

  • Repetición

Nos permite que cuando finalice la reproducción vuelva a ejecutarse una y otra vez por lo cual debe tenerse especial cuidado con el uso del mismo. Para poder hacer esto basta con agregar el atributo loop.

  • Controles

Los controles nos van a permitir poder pausar o iniciar la reproducción como así también subir o bajar el volumen, todo esto depende como siempre del navegador y como implemento esa parte puntual de la especificación. Para hacer esto basta con tan solo agregar el atributo controls.

  • Varios formatos de archivos

Hasta el momento todos los ejemplos que hemos visto hacen mención a un solo formato en particular para la reproducción de audio pero que pasa si queremos ponerlo en varios formatos y así de alguna manera tener cubiertos el resto de los navegadores que no tienen soportado un formato en particular.

La forma de hacer esto seria algo como esto:

Lo que hará nuestro navegador es verificar si el primer archivo tiene un formato valido de reproducción en su implementacion, en caso de serlo lo reproducirá sino intentara con el segundo y así hasta pasar por todos los source.

Video

El elemento video nos permite reproducir un video, al igual que con el elemento audio, sin la necesidad de utilizar Flash para ello. El mismo soporta varios formatos pero nuevamente dependendemos de cada uno de los navegadores ya que cada uno de ellos elije a cual darle soporte y a cual no.

Veamos la siguiente lista de codecs de vídeo validos para cada navegador y a partir de que versión lo soportan:

Navegador H264 VP8 OGG/THEORA
Chrome 25+ 25+ 25+
Internet Explorer 9+
Firefox 22+ 20+ 20+
Safari 3+
Opera 12+ 12+

Ahora veamos como podemos reproducir un archivo de video y agregarle el tamaño al mismo usando este nuevo elemento:

Ademas este elemento también cuenta con los atributos autoplay, loop, controls (cumpliendo las mismas funcionalidades que las que se mencionaron en el apartado de audiocomo también podemos indicar que esta disponible en varios formatos:

//COLOCAR IMAGEN
También podemos definir una imagen que sera la portada del video hasta que el mismo comience, algo así como una imagen representativa del mismo:

Por ultimo podremos indicar que el video se reproduzca sin sonido por medio del atributo muted.

Conclusion

En este post hemos visto las ventajas del uso de los nuevos elementos en especial el de audio y video ya que nos evitan tener instalado Flash para poder usarlos. Ademas de esto vimos las distintas formas que tenemos para representar los datos ya sea para mostrar una medida o un progreso.

You may also like...

3 Responses

  1. Muy buena información sobre estas etiquetas, saludos.

  2. Mishel Ibargüen C. dice:

    Genial … Excelente informacion para complementar páginas y proyectos web.

  3. A. Smith dice:

    Wonderful work! This is the kind of info that are meant to be shared across the internet.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *