Skip to main content

Etiqueta Audio en HTML5

Hasta la llegada de HTML5 la reproducción del audio dependía de la presencia de un pluging, normalmente flash. HTLM5 instaura un modo para incluir audio en la web. La etiqueta <audio> puede reproducir un fichero de audio o un stream de audio.

Los formatos de audio que se usan principalmente son tres. El formato abierto Ogg, y los propietarios MP3 y Wav. Lamentablemente cada navegador soporta unos y no otros. Solo Chrome soporta los tres. Opera y Firefox soportan ambos Ogg y Wav.

Incluir audio en nuestra web tan solo requiere incluir el siguiente código:

El atributo control tiene como función incluir los controles de reproducción, pausa y volumen. El contenido entre las etiquetas audio se mostraría en navegadores que no tienen soporte.

Como hemos dicho anteriormente no todos los navegadores soportan todos los formatos de audio. Podemos servirnos de la etiqueta <source> para incluir en audio a reproducir en distintos formatos. EL primero listado que tenga soporte por el navegador será el usado por él.

Los atributos de <audio> son:

autoplay autoplay El audio se reproducirá tan pronto sea posible.
controls controls Los controles de audio se mostrarán.
loop loop El audio se reproducirá en bucle sin fin
preload preload Se carga el audio a la carga de la página.
src url La URL de la fuente de audio.
type mime Especifica el tipo mime del fichero de audio

Etiqueta Vídeo en HTML5

Con HTML5 mostrar vídeo en una página web está estandarizado. Hasta hoy mostrar vídeo requería el uso de plugins de terceros como puede ser Flash. En HTML5 el modo de integrar vídeo en una página web es mediante el elemento video.

Actualmente hay tres formatos de vídeo. Desafortunadamente no todos los navegadores soportan todos los formatos de vídeo:

  • Ogg, es un formato abierto que usa el codec de vídeo Theora y Vorbis para audio.
  • MPEG4, es un formato que usa los codecs propietarios H.264 y AAC.
  • WebM, es un formato abierto que usa el VP8 y Vorbis como codecs.

Chrome soporta todos ellos. Opera y Firefox los que son formatos abiertos y IE y Safari sólo MPEG4.

Para mostrar un vídeo en HTML5 todo lo que se necesita es incluir el código:

Con el atributo controls podemos añadir métodos para parar, pausar y controlar el volumen. Los navegadores que no soporten la etiqueta vídeo mostrarán el contenido entre las etiquetas de vídeo. Puede ser buena idea usar los atributos width y height para definir las dimensiones del vídeo.

Nos podemos ayudar de la etiqueta <source> para indicar al navegador fuentes alternativas del vídeo. La primera en la lista que sea soportada por el navegador será la usada para reproducir el vídeo.

Los atributos de <video> son:

audio muted Por defecto volumen del audio, muted sería apagado.
autoplay autoplay El vídeo comienza a reproducirse inmediatamente.
controls controles Muestra los controles de reproducción.
height pixeles Fija la altura en pixeles.
loop loop Reproducir de nuevo al finalizar.
poster url La url de una imagen que representa el vídeo.
preload preload El vídeo se carga al cargar la página y espera a su reproducción.
type video/ogg Define el tipo mime del vídeo.
src url Fuente del vídeo.
volume número Fija el volumen desde silencio, 0.0 hasta lo más alto 1.0.
width pixeles Fija el ancho en pixeles

Más información.