Etiquetas audio, video, source, track, embed y canvas de HTML5

HMTL5 nos brinda también nuevas etiquetas para poder manejar contenido multimedia de una manera más cómoda y sacar un mayor partido a las posibilidades de los diferentes medios.

Antes de comenzar, quiero aclarar que la intención es mostrar las nuevas etiquetas de HTML5 y su uso. Como los navegadores cambian continuamente, el resultado de usarlas variará según su versión y puede haber discrepancias.

Etiqueta audio

Algo que se venía requiriendo desde hace tiempo era una etiqueta exclusiva para poder introducir audio de una manera sencilla en la web. La gran limitación de la etiqueta audio es que ahora sólo podemos usar MP3, Wav y Ogg , con compatibilidad muy diferente entre los navegadores. Habrá que esperar unos años más hasta que haya un poco más de consenso.

<audio controls>
	<source src="pista-audio.mp3" type="audio/mpeg">
</audio>

Etiqueta video

Igual que para el audio, para los vídeos hacía falta también una etiqueta propia que nos permitiera meter vídeos sin necesidad de contar con reproductores de terceros. La misma limitación que para el audio, el formato y los codec. Tres formatos son lo que actualmente la etiqueta video soporta (MP4, WebM y Ogg) y en cada uno se debe haber usado unos codecs específicos.

Si usamos MP4, H264 para el video y AAC para el audio.
Si usamos WebM, VP8 para el video y Vorbis para el audio.
Si usamos Ogg, Theora para el video y Vorbis para el audio.

<video controls>
	<source src="pista-video.mp4" type="video/mp4">
</video>

Etiqueta source

La etiqueta source podemos usarla para definir diferentes rutas de archivos cuando usamos las etiquetas audio y video. Será necesaria cuando trabajemos con formatos no soportados en todos los navegadores, así ofrecemos una versión alternativa.

<audio controls>
    <source src="pista-audio.ogg" type="audio/ogg">
    <source src="pista-audio.mp3" type="audio/mpeg">
</audio>

Etiqueta track

Esta etiqueta nos permite añadir una pista de texto a las etiquetas audio y video, a modo de subtítulos por ejemplo. La utilidad de la etiqueta track es claramente relevante, sobre todo si hablamos de accesibilidad. Sin embargo prácticamente no tiene soporte en la actualidad, habrá que esperar unos años.

<video controls>
    <source src="pista-video.ogg" type="video/ogg">
    <track src="subtitulos_en.vtt" kind="subtitles" srclang="en" label="english">
</video>

Etiqueta embed

Se utiliza como contenedor para cargar una aplicación externa, como una película flash. Sí, ya sé hasta ahora casi todos hemos usado la etiqueta embed en los últimos años para lo mismo, sin embargo hay que aclarar que es exclusiva de HTML5 y para que funcionara en todos los navegadores había que introducirla dentro de la etiqueta object.

<embed src="pelicula-flash.swf">

Etiqueta canvas

Se va a utilizar para dibujar gráficos usando JavaScript (aunque en principio no descarta otros lenguajes compatibles). Primero se crea la etiqueta canvas asignando un id y luego se establece el script para dibujar. Un ejemplo sencillo podría ser el siguiente, en el cual creamos una capa y dentro creamos un rectángulo dibujado con programación y relleno de color.

<canvas id="dibujo" width="480" height="150">
</canvas>

<script>
var rectangulo=document.getElementById("dibujo");
var parametros=rectangulo.getContext("2d");
parametros.fillStyle="#BDD1DC";
parametros.fillRect(0,0,480,150);
</script>