AUDIO y VIDEO en HTML 5

• Tweet
• 

Una de las características más sonadas de HTML 5 es su soporte multimedia, que permite la reproducción de archivos de audio/vídeo, o bien la conexión y reproducción de una fuente de audio/vídeo. Esto se hace en HTML 5 con las etiquetas AUDIO y VIDEO, respectivamente.

Para insertar audio en HTML 5, haríamos lo siguiente:

<audio src=”audio.mp3″ type=”audio/mp3″ controls autoplay />

La etiqueta AUDIO de HTML 5 permite los siguientes atributos:

autobuffer : permite la carga automática del archivo, y los valores posibles son “true” o “false”
autoplay : reproduce automáticamente el audio
controls : muestra los controles de reproducción
height : define la altura del reproductor (en píxeles)
loop : ejecuta la reproducción en bucle, cuando finaliza vuelve a empezar
src : URL del archivo o fuente a reproducir
type : tipo de archivo o fuente (audio/mp3, video/ogg, video/mp4, …)
width : define el ancho del reproductor (en píxeles)

Para insertar vídeo en HTML 5, haríamos lo siguiente (es muy similar al caso del audio):

<video src=”video.ogg” controls autoplay />

Para la etiqueta VIDEO utilizamos los mismos atributos y opciones que para la etiqueta AUDIO.

Actualmente existe una controversia por el formato de vídeo que se debería utilizar en HTML 5. El uso de códecs propietarios como H.264, en lugar del recomendado originalmente Ogg Theora (que es libre), puede excluir a algunos navegadores que no cuentan con soporte para estos códecs. Es el caso de YouTube, que actualmente está probando HTML 5 en su portal de vídeos, haciendo uso del códec H.264, con lo que Firefox, que no usa este códec, queda excluido (no se ven los vídeos).

El formato de vídeo, al igual que el de audio, se debe especificar con el atributo “type” dentro de la etiqueta que corresponda, AUDIO o VIDEO, como ya hemos visto.

¿Qué hacer si un navegador no soporta HTML 5? También está previsto, y podemos hacer uso de la siguiente estructura:

<video src=”video.ogg”>
<!– Código a mostrar en navegadores que no soportan HTML 5 –>
</video>