Audio, vídeo e iframes en HTML

Antes de HTML5, para poner un vídeo o un audio en una web hacía falta un plugin: casi siempre Adobe Flash. Era lento, inseguro, no funcionaba en el iPhone y desapareció oficialmente en 2020. Hoy el navegador reproduce audio y vídeo por sí mismo con dos etiquetas.

Vídeo: <video>

<video src="videos/presentacion.mp4" controls width="640" poster="img/portada.jpg">
  Tu navegador no puede reproducir este vídeo.
  <a href="videos/presentacion.mp4">Descárgalo aquí</a>.
</video>

• src: el archivo de vídeo.
• controls: muestra los botones de reproducir, volumen, pantalla completa… Ponlo casi siempre: sin él, el usuario no puede controlar el vídeo.
• poster: la imagen que se ve antes de darle a reproducir.
• width y height: el tamaño. Con CSS (max-width: 100%) harás que se adapte a la pantalla.
• El texto de dentro solo se muestra en navegadores que no soportan <video>.

Atributos de reproducción

Atributo	Qué hace
autoplay	Empieza solo. Los navegadores solo lo permiten si el vídeo está silenciado
muted	Empieza sin sonido
loop	Vuelve a empezar al terminar
playsinline	En el iPhone, se reproduce dentro de la página y no a pantalla completa
preload="none"	No descarga nada hasta que el usuario pulsa reproducir

Un vídeo de fondo decorativo suele llevar autoplay muted loop playsinline. Un vídeo con contenido importante, solo controls.

Varios formatos: <source>

No todos los navegadores leen todos los formatos. Puedes ofrecer varios y el navegador usará el primero que entienda:

<video controls width="640">
  <source src="clip.webm" type="video/webm">
  <source src="clip.mp4" type="video/mp4">
  Tu navegador no puede reproducir este vídeo.
</video>

Hoy en día MP4 (H.264) funciona en todos los navegadores, así que con él suele bastar.

Subtítulos: <track>

<video controls src="clase.mp4">
  <track kind="subtitles" src="clase-es.vtt" srclang="es" label="Español" default>
</video>

Los subtítulos van en un archivo de texto .vtt. Son imprescindibles para las personas sordas y muy útiles para quien ve el vídeo sin sonido, que es la mayoría en el móvil.

Audio: <audio>

Funciona igual que <video>, pero sin imagen:

<audio controls src="podcast/episodio-1.mp3">
  Tu navegador no puede reproducir audio.
</audio>

El formato más compatible es MP3.

No subas vídeos pesados a tu servidor

Un vídeo de unos minutos puede pesar cientos de megas. Si muchas personas lo ven a la vez, tu hosting sufrirá (y puede que te cobre más). Para vídeos largos es mejor subirlos a YouTube o Vimeo e incrustarlos.

Incrustar otras páginas: <iframe>

Un <iframe> muestra otra página web dentro de la tuya, como una ventana. Es lo que usan YouTube, Google Maps o Spotify cuando pulsas “Compartir → Insertar”:

<iframe
  width="560" height="315"
  src="https://www.youtube-nocookie.com/embed/ID_DEL_VIDEO"
  title="Tutorial de HTML en vídeo"
  loading="lazy"
  allowfullscreen>
</iframe>

• title es obligatorio para la accesibilidad: describe qué hay dentro.
• loading="lazy" evita cargarlo hasta que el usuario se acerca haciendo scroll. Los iframes de vídeo y mapas pesan mucho.
• El dominio youtube-nocookie.com hace que YouTube no ponga cookies de seguimiento hasta que se reproduce el vídeo.

Para que un iframe se adapte al ancho de la pantalla manteniendo la proporción:

iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

Seguridad

Un iframe carga contenido de otra web, y muchas webs (los bancos, por ejemplo) prohíben que las incrusten para evitar engaños. Si incrustas algo que no controlas, el atributo sandbox limita lo que puede hacer:

<iframe src="https://ejemplo.com" sandbox title="Contenido externo"></iframe>

Accesibilidad de los medios

• Nunca pongas sonido que empiece solo.
• Añade subtítulos a los vídeos con voz y una transcripción a los audios.
• Deja siempre visibles los controles para pausar.