HTML

Multimedia en HTML: video, audio y embeds seguros

Integra contenido multimedia con enfoque en accesibilidad, rendimiento y seguridad.

¿Cuánto sabes de HTML?

📘 Teoría

Video accesible con subtítulos reales

Subtítulos no son opcionales en productos serios. 🎬

Incluye `track` para captions/subtítulos y `poster` para vista previa contextual.

Evita autoplay con sonido: afecta accesibilidad y experiencia general.

Video completo con track

<video controls preload="metadata" width="640" height="360" poster="/img/preview.jpg">
  <source src="/media/leccion.mp4" type="video/mp4" />
  <track kind="captions" srclang="es" label="Español" src="/media/leccion-es.vtt" />
  Tu navegador no soporta vídeo HTML5.
</video>

Audio con contexto y fallback

Si el audio aporta información, explica qué va a escuchar la persona.

Añade `figcaption` o texto de apoyo.
Usa `preload="metadata"` en la mayoría de casos.
Ofrece transcripción cuando el contenido es clave.

Audio con descripción

<figure>
  <figcaption>Resumen en audio del módulo 3</figcaption>
  <audio controls preload="metadata">
    <source src="/media/resumen.mp3" type="audio/mpeg" />
    Tu navegador no soporta audio HTML5.
  </audio>
</figure>

Embeds con iframe: seguridad y control

Un iframe sin control puede abrir riesgos innecesarios.

Usa `title` descriptivo y añade políticas mínimas con `sandbox` y `allow` según necesidad real.

No concedas permisos por defecto. Empieza con lo mínimo y habilita solo lo imprescindible.

Iframe defensivo

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Clase: formularios accesibles"
  width="560"
  height="315"
  loading="lazy"
  sandbox="allow-scripts allow-same-origin"
  allow="fullscreen; picture-in-picture"
  allowfullscreen
></iframe>