Lección 8: Multimedia

Desde la llegada de la versión HTML5 existe algunas etiquetas interesantes que ofrecen contenido multimedia: audio y vídeo. Podemos reproducir música o toda una película sin pasar por otros servicios (como Flash o Youtube); de una forma sencilla, gratuita e integrada con el sistema operativo.

Audio

Etiqueta	`<audio>`
Descripción	Incrustar sonido en un documento.
Atributos	`autoplay` Inicia audio al mostrarse el documento. `controls` Mostrará controles para que el usuario pueda gestionar la reproducción. `loop` Especifica que el audio debe volver a reproducirse al terminar. `muted` Especifica que el audio se inicie silenciado. `src` Ruta del audio.
Tipo	Línea

<audio
    controls
    src="t-rex.mp3"
    >
    <p>
        Su navegador no soporta el formato del audio, pulse <a href="t-rex.mp3">aquí</a> para descargarlo.
    </p>
</audio>

Si lo que buscamos en añadir una descripción jugaremos con <figure> y <figcaption>.

<figure>
    <figcaption>T-Rex:</figcaption>
    <audio
        controls
        src="t-rex.mp3"
      >
      <p>
          Su navegador no soporta el formato del audio, pulse <a href="t-rex.mp3">aquí</a> para descargarlo.
      </p>
    </audio>
</figure>

Compatibilidad

Los formatos de audio más utilizados en la creación web son:

mp3
wav
ogg
webm
aac

Cada uno dispone de sus propias ventajas y desventajas, pero lo importante son los códecs y su compatibilidad. No todos los navegadores pueden reproducir los mismos formatos, algunos requieren licencias que no se desean pagar (por los navegadores) o existen ciertos intereses económicos en no dar soporte. ¿Entonces no podemos asegurar que se reproduzca en todos los dispositivos? Como estuvimos viendo en la lección de imágenes, hay una etiqueta que nos resuelve el problema: <source>.

En el siguiente ejemplo indico al navegador que reproduzca el audio en caso de ser compatible con mp3, en caso contrario lo intentaría con ogg.

<audio controls>
    <source srcset="t-rex.mp3" type="audio/mp3">
    <source srcset="t-rex.ogg" type="audio/ogg">
    <p>
        Su navegador no soporta el formato del audio, pulse <a href="t-rex.mp3">aquí</a> para descargarlo.
    </p>
</audio>

Video

Si el objetivo es incluir un vídeo al más estilo Youtube, en el catálogo de etiquetas podremos encontrar una experta en la tarea.

Etiqueta	`<video>`
Descripción	Incrustar video en un documento.
Atributos	`autoplay` Inicia audio al mostrarse el documento. `controls` Mostrará controles para que el usuario pueda gestionar la reproducción. `loop` Especifica que el vídeo debe volver a reproducirse al terminar. `muted` Especifica que el vídeo se inicie silenciado. `src` Ruta del audio. `width`: Anchura del vídeo. `poster`: Imagen que será mostrada antes de reproducirse.
Tipo	Línea

<video controls src="te.mp4">
    <p>
        Su navegador no soporta el formato del vídeo, pulse <a href="te.mp4">aquí</a> para descargarlo.
    </p>
</video>

Para evitar problemas con los navegadores podemos añadir más fuentes, como hicimos en <audio>.

<video controls>
    <source src="te.webm" type="video/webm">
    <source src="te.mp4" type="video/mp4">
    <p>
        Su navegador no soporta el formato del vídeo, pulse <a href="te.mp4">aquí</a> para descargarlo.
    </p>
</video>

Y en caso de querer usar una imagen de previa, la cual puede tener relación o no con el contenido, usaremos el atributo poster.

<video controls poster="previa.jpg">
    <source src="te.webm" type="video/webm">
    <source src="te.mp4" type="video/mp4">
    <p>
        Su navegador no soporta el formato del vídeo, pulse <a href="te.mp4">aquí</a> para descargarlo.
    </p>
</video>