Saltar la navegación

3.2.6. Audio y vídeo

Incrustado (embedded)

Existen etiquetas que incorporan (embed) elementos externos a en una página web. Estos elementos pueden ser imágenes, vídeos, audios, mapas, fórmulas, etc...

  • img. Representa una imagen.
  • iframe. Representa un contexto anidado de navegación, es decir, un documento HTML embebido.
  • embed. Representa un punto de integración para una aplicación o contenido interactivo externo que por lo general no es HTML.
  • object. Representa un recurso externo, que será tratado como una imagen, un sub-documento HTML o un recurso externo a ser procesado por un plugin.
  • video. Representa un vídeo.
  • audio. Representa un sonido.
  • source. Permite a autores especificar recursos multimedia alternativos para los elementos multimedia como  <video> o <audio>. Por ejemplo, audios en diferentes idiomas.
  • canvas, Representa un área de mapa de bits en el que se pueden utilizar scripts para renderizar gráficos.
  • svg. Define una imagen vectorial embebida.

El sonido y el video han tenido y tienen un papel muy importante en el diseño de sitios web. Ofrecen servicios de descarga de una muestra de un número musical o del último video de moda.

Antes de incorporar este tipo de archivos, hay que tener en cuenta que formatos sin comprimir pueden ser muy grandes y nada recomendables.

Existen formatos de archivos para la Web con algoritmo de compresión complejos que mejoran en gran medida esta cuestión: MP3, OGG, MPA, WMA...

Incluso estos formatos permiten iniciar la reproducción descargando sólo parte del archivo mientras se muestra el contenido al usuario, y continuar con la reproducción en un segundo plano.

Se recomienda no reproducir los archivos de audio y video automáticamente cuando un usuario visita un sitio Web.

La sintaxis de la etiqueta es la siguiente.

<audio autoplay controls loop muted preload="valor" src="valor">
   Texto para navegadores que no soportan audio…
</audio>

Entre los atributos de la etiqueta encontramos los siguientes:

Atributo Valor Descripción
autoplay autoplay El audio comenzará a reproducirse tras su carga.
controls controls Especifica que se mostrarán los controles (play, stop, ...)
loop loop El audio se repetirá indefinidamente una vez acabe.
muted muted El audio estará en silencio.
preload auto
metadata
none		 Especifica el comportamiento del audio una vez se cargue la página.
src URL Origen del audio

Ejemplo de la etiqueta audio en w3schools

Ejercicio

Usa la página https://lamusicagratis.com/ para descargar una canción libre de derechos de autor.

Crea una página donde se muestre el nombre del autor, así como el texto que acompaña la canción que has descargado. Formatea correctamente dicho texto evitando que parezca un copia-pega.

Finalmente, muestra el reproductor con la canción descargada reproduciéndose automáticamente. Añade los datos de Autoría, Licencia, el enlace donde encontrarla así como el de descarga.

Guarda el ejemplo como ej6.html

Creado con eXeLearning (Ventana nueva)