comparte el articulo 

Etiquetas HTML5: Video, Audio y Canvas

Actualizado el 12/04/2012 < > 1 Comentario

Resumen: Hacemos una breve introducción a las etiquetas de contenido multimedia que incorpora HTML5: video, audio, contenido incrustado y canvas. En las cuales profundizaremos en posteriores capítulos.

Los diseñadores con HTML5 están realizando un evidente esfuerzo por unificar diferentes elementos del diseño web en un lenguaje común.

De tal forma, HTML5 incorpora una gran cantidad de funciones y elementos que antes sólo podían resolverse a través del uso de otros lenguajes, como JavaScript o Flash. Este es el caso de la modalidad usada para la inclusión de contenido multimedia en nuestras páginas, que a la luz de las novedades en HTML5 hoy puede realizarse como una función natural de este lenguaje, sin recurrir a aplicaciones externas.

Video con HTML5

La etiqueta video de HTML5 está en principio destinada a reemplazar Flash como la aplicación que permitía la presentación de elementos animados en páginas web.

Sin embargo, esta nueva característica HTML5 tiene alcances más amplios. Además, su integración con los demás elementos de HTML5 así como con CSS y Java Script, y su creciente integración con los navegadores, presenta un panorama futuro muy positivo en cuanto a la sencillez y seguridad de la codificación.

<video>

Ésta es la etiqueta clave, que desata una gran variedad de posibilidades. La codificación esencial para ponerla en marcha, es como la que sigue.

<video>
<source src="mipelicula.mp4" type="video/mp4" />
<source src="mipelicula.webm" type="video/webm" />
<source src="mipelicula.ogg" type="video/ogg" />
</video>

La inclusión de diferentes formatos de video, tales como mp4, webm y ogg, descritos mediante la etiqueta source, permiten a los navegadores seleccionar el primer formato que sea compatible con su sistema de reproducción.

Claro que los formatos de video consisten en la combinación de dos formatos diferentes: el de video y el de audio. En particular, los tres formatos señalados anteriormente, están constituidos de la siguiente forma:

  • Mp4 es la combinación de H.264 (video) y AAC (audio).
  • Los formatos ogg y ogv se constituyen por la unión de los formatos Theora para video y Vorbis para la reproducción del audio asociado.
  • En el caso de web, sus componentes son Vp8 (video) y Vorbis (audio).

Atributos principales de la etiqueta video de HTML5

Además de source, la etiqueta video puede condicionar su funcionamiento a través de otros atributos. Algunos de ellos son:

  • Width y height, que establecen el tamaño del rectángulo donde se reproducirá el video. Si se omiten estos dos parámetros, el navegador asumirá las dimensiones, lo cual podría afectar a  la distribución de los elementos dentro de nuestra página web.
  • Autoplay es el atributo que le indica al navegador que inicie la reproducción una vez que el video haya sido cargado en la página.
  • Loop es un atributo que informa al navegador utilizado que debe repetir la reproducción desde el principio cada vez que ésta concluya.
  • Controls avisa al navegador que debe mostrar los controles necesarios para que el usuario interactúe con el video reproducido. Es la típica imagen gráfica con los controles play, pause, stop.

Sonido con HTML5

Tal como sucede con la nueva etiqueta video, HTML5 incluye una etiqueta audio, que maneja la posibilidad de reproducción de sonido en forma natural, sin necesidad de recurrir a un plug-in tal como Flash. Su codificación es, asimismo, muy sencilla y seguramente estamos frente a la presencia de un nuevo estándar.

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

En este caso, el atributo controls se incluye para ordenar al navegador que presente un elemento gráfico mediante el cual el usuario pueda manejar, como mínimo, las características de play y pause de su reproductor.

Los atributos autoplay y loop son similares a los utilizados para la etiqueta video.

Contenido incrustado en HTML5

HTML5 permite la inclusión de cualquier elemento gráfico o de multimedia en el diseño web de nuestra página. En particular, la etiqueta embed acepta una amplia variedad de elementos que pueden insertarse a través de una aplicación externa o plug-in.

Los atributos que se asocian a embed son:

  • Src: indica la dirección externa o URL del archivo a incluir en la página.
  • Height y width: determinan el largo y ancho del rectángulo que alojará el elemento externo.
  • Type: informa el MIME del elemento incrustado.

Esta nueva etiqueta puede aplicarse a la inserción de gráficos así como de cualquier archivo que tenga la posibilidad de mostrarse como parte del diseño de la página web.

Como aclaración adicional, MIME es una codificación estándar que determina la forma en que un archivo debe ser procesado. Cada archivo tiene un programa manejador y sus características se establecen a través de un sufijo.

Mediante el estándar MIME sabemos que un archivo .txt debe ser considerado como texto plano y procesado mediante un programa apropiado a sus características. Lo mismo para cualquier tipo de archivo caracterizado por un sufijo como .doc (Word), .xls (Excel), .mp3 (reproductor de audio), .mid (reproductor de sonidos Midi) y así con cientos de ellos.

Dibujo y gráficos: canvas

Un nuevo elemento HTML5, canvas, ofrece la posibilidad de producir diferentes variedades de gráficos, composiciones fotográficas, animaciones, a través de scripts que pueden ser programados en JavaScript o algún otro medio similar.

La utilización de canvas en todas sus posibilidades es sencilla, aunque requiere conocimiento de HTML y Java Script para lograr excelentes resultados. En principio, hay que tomar en cuenta que, como sucede con varias aplicaciones de HTML5, esta característica no es compatible aún con varios navegadores (puedes consultar caniuse para más detalles).

A través de canvas se pueden dibujar todo tipo de figuras geométricas, líneas, figuras e incluso complejos gráficos derivados de fórmulas matemáticas.

Como sencillos ejemplos, podemos citar los siguientes:

  • fillRect(x, y, ancho, alto) representa los parámetros para el dibujo de un rectángulo.
  • strokeRect(x, y, ancho, alto) sirve para dibujar un rectángulo sólido (relleno).

Un ejemplo algo más complejo:

  • Arc(x, y, radio, anguloInicial, anguloFinal, clockwise/anticlockwise): es la redacción que permite dibujar un arco, donde x e y son las coordenadas del centro del círculo; radio define la longitud de este elemento de la curva; los siguientes dos parámetros definen los ángulos inicial y final de la curva en radianes, y el último determina la dirección en el sentido de las agujas del reloj o en la orientación inversa.

Así, debemos internarnos en todas las posibilidades de canvas para lograr gráficos con la complejidad deseada y su animación, lo cual nos da muchas alternativas.

Publicado el 16/03/2012, última actualización 12/04/2012.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Verónica Milán

URL: LaWebera - Diseño Paginas Web

Añadir Comentario (Subir al texto)

1 Comentario

  1. Joaquin

    No entiendo como funciona la etiqueta de video. Tengo q bajar un video y guardarlo en una carpeta especifica?

    Miércoles, 24 de febrero 2016

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras