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 audio debe volver a reproducirse al terminar.
muted Especifica que el audio 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>

Si deseas usar el atributo autoplay debes acompañarlo de muted. No esta permitido autoreproducir vídeos con sonido.

Compatibilidad

Los formatos de video con muchos pero en el Diseño Web destacan por compatibilidad y uso:

  • mp4: Altamente recomendada con los códecs H264 y AAC.
  • webm: Calidad buena.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario