Veteasabertu

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

2 de febrero 2013
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.

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 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.

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 se soportan (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.

source

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

track

Esta etiqueta nos permite añadir una pista de texto a las etiquetas audio y video, a modo de subtítulos por ejemplo. Su utilidad 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.

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 esta etiqueta 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.

canvas

Se va a utilizar para dibujar gráficos usando JavaScript (aunque en principio no descarta otros lenguajes compatibles). Primero se crea la etiqueta 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.

< ir al índice

Publicado por Jesús Tovar

Categorías: HTML

Etiquetas: ,

Deja un comentario

Este sitio web utiliza cookies para mejorar la experiencia de usuario, si continúas navegando estás dando tu consentimiento. Para más información pincha aquí.

ACEPTAR
Aviso de cookies