Lección 8: Multimedia | Curso HTML

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>

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.

Servicios de terceros: Youtube, Vimeo, etc.

Cada plataforma dispone de su propio reproductor. La manera más común de integrarlo es por medio de un <iframe>.

Por ejemplo, en Youtube pulsaremos en Compartir.

Youtube compartir

Despuén en Insertar.

Youtube insertar

Y será visible la etiqueta <iframe>. Ya podemos copiar y pegar el HTML.

Youtube código HTML

Actividad 1

Maqueta una web que sea posible reproducir los últimos episodios de tus Podcasts favoritos.

  • Descarga los mp3.
  • Crea un reproductor por cada mp3.
  • Añade sus respectivos logos.

Alternativa: Si lo prefieres, puedes descargar música y realizar las mismas tareas.

Actividad 2

Vamos a hacer una página web para promocionar una película a tu elección.

  • Consigue el tráiler de una película.
  • Monta un reproductor de vídeo.
  • Crea una tabla con la información técnica: título, duración, actores y año.

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

Comprame un café
Pulsa sobre la imagen

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Escribe el primer comentario