Contenidos multimedia de HTML5

Versión para impresión
Logo de HTML5 proyectado sobre una pantalla de cine

HTML5 incluye etiquetas para audio, vídeo y gráficos vectoriales svg. Además, con la etiqueta canvas se pueden realizar gráficos 2D y 3D, y animaciones, mediante JavaScript.

<audio>

Con esta etiqueta podemos reproducir audio en los navegadores modernos sin necesidad de plugins externos.

Se admiten los formatos mp3, wav y ogg, aunque no todos los navegadores los soportan.

Atributos:

autoplay
para que el audio se reproduzca nada más descargarse;
controls
aparece el control de reproducción (el botón de play, de pausa...);
loop
el sonido se reproduce en un bucle sin fin;
muted
el sonido se silencia;
preload
el sonido se va cargando cuando entramos en la página para que esté listo cuando queramos reproducirlo;
src
especifica la URL del sonido;
type
el tipo de formato, con valores audio/mpeg (mp3), audio/ogg (ogg), o audio/wav (wav).

Cualquier texto que esté entre las etiquetas <audio></audio> se verá en aquellos navegadores que no soporten HTML5.

Ejemplo:

<audio src="audio.mp3" controls autoplay loop type="audio/mpeg">
Su navegador no soporta audio en HTML5
</audio>

Debemos comprobar la compatibilidad entre navegadores y formatos. Por ejemplo en:

caniuse.com/#feat=audio

caniuse.com/#search=audio%20format

Como no todos los navegadores soportan los mismos formatos, podríamos utilizar la etiqueta <source>. El siguiente ejemplo reproduciría el audio en cualquier navegador, y en los antiguos mostraría un enlace de descarga:

<audio controls>
<source src="sonido.mp3" type="audio/mpeg">
<source src="sonido.ogg" type="audio/ogg">
<source src="sonido.wav" type="audio/wav">
<a href="sonido.mp3">descargar sonido</a>
</audio>

<video>

Con esta etiqueta podemos reproducir vídeo en los navegadores modernos sin necesidad de plugins externos.

Se admiten los formatos mp4, webm y ogg, aunque no todos los navegadores los soportan.

Atributos:

autoplay
para que el vídeo se reproduzca nada más descargarse;
controls
aparece el control de reproducción (el botón de play, de pausa...);
height
altura del reproductor en píxeles;
loop
el vídeo se reproduce en un bucle sin fin;
muted
el vídeo se silencia;
poster
URL de una imagen que se muestra mientras el vídeo se está descargando o antes de que empiece la reproducción;
preload
el vídeo se va cargando cuando entramos en la página para que esté listo cuando queramos reproducirlo;
src
especifica la URL del vídeo;
type
el tipo de formato, con valores video/mp4 (mp4), video/webm (webm), o video/ogg (ogg);
width
ancho del reproductor en píxeles.

Cualquier texto que esté entre las etiquetas <video></video> se verá en aquellos navegadores que no soporten HTML5.

Ejemplo:

<video src="video.mp4" poster="imagen.jpg" controls width="400" height="300">
Su navegador no soporta vídeo en HTML5
</audio>

Debemos comprobar la compatibilidad entre navegadores y formatos de vídeo, por ejemplo en:

caniuse.com/#feat=video

caniuse.com/#search=video%20format

Como no todos los navegadores soportan los mismos formatos, podríamos utilizar la etiqueta <source>. El siguiente ejemplo reproduciría el vídeo en cualquier navegador, y en los antiguos mostraría un enlace de descarga:

<video controls>
   <source src="video.mp4" type="video/mp4">
   <source src="video.ogg" type="video/ogg">
   <source src="video.webm" type="video/webm">
   <a href="video.mp3">descargar vídeo</a>
</video>

<svg>

Gráficos Vectoriales Escalables.

El SVG permite 3 tipos de objetos gráficos:

  • Formas gráficas de vectores.
  • Imágenes de mapa de bits.
  • Texto.

Mediante lenguaje XML se definen objetos gráficos. Por ejemplo, podemos encontrarnos con varios tipos de etiquetas con sus correspondientes atributos:

  • formas: <rectangle>, <circle>, <ellipse>, <line>, <polygon>, <text>, etc.
  • filtros y gradientes;
  • animaciones.

Más información:

www.w3schools.com/graphics/svg_intro.asp

Existen algunos editores gráficos en línea:

Nota: desde Illustrator podemos obtener este tipo de archivos desde la opción "Guardar para Web". Obtendremos un archivo con extensión svg, que editado con un procesador de texto nos dará el código XML necesario para insertarlo en el documento.

<canvas>

Permite generar gráficos 2D y 3D, y animaciones, mediante JavaScript.

Atributos

height
alto del canvas, en píxeles
width
ancho del canvas, en píxeles

Más información: http://www.w3schools.com/tags/tag_canvas.asp

Adobe tiene unas nuevas herramientas que facilitan el trabajo con <canvas>. Por ejemplo Adobe Animate, que es un programa parecido a Flash (lo sustituye,  y a Edge Animate) pero con salida HTML5 (HTML, CSS3 y JavaScript).

www.adobe.com/es/products/animate.html

Categorías: