Curso HTML 6.5 Atributos controls, autoplay, loop, muted y poster

6.5 Atributos controls, autoplay, loop, muted y poster

Introducción

En HTML5, los elementos <video> y <audio> integran atributos que facilitan la interacción con el contenido multimedia sin necesidad de JavaScript. Los cinco atributos clave son:

• controls: muestra la barra de controles predeterminada (play, pausa, volumen, etc.).
• autoplay: lanza la reproducción de forma automática al cargar la página.
• loop: reinicia el contenido al llegar al final.
• muted: silencia el audio por defecto.
• poster: especifica una imagen de previsualización para vídeo.

1. Atributo controls

Activa los controles nativos del navegador. Si se omite, el usuario no tendrá controles a menos que se implementen con JavaScript.

<video src='mi-video.mp4' controls>
  Tu navegador no soporta el elemento video.
</video>

Consideraciones:

• La apariencia varía según el navegador y plataforma.
• Accesibilidad: asegúrate de proporcionar subtítulos (<track>).
• Si se combina con autoplay, el usuario podrá pausar el contenido.

2. Atributo autoplay

Inicia la reproducción automáticamente. Muchos navegadores modernos bloquean autoplay si el audio no está silenciado.

<video src='promo.mp4' autoplay playsinline>
  Tu navegador no soporta el elemento video.
</video>

Puntos clave:

• Para que autoplay funcione en dispositivos móviles, se recomienda añadir playsinline.
• La mayoría de navegadores requiere muted para permitir la reproducción automática.
• Usar con moderación: puede consumir ancho de banda y distraer al usuario.

3. Atributo loop

Reinicia la reproducción de manera automática cuando llega al final.

<audio src='ambiente.mp3' controls loop>
  Tu navegador no soporta el elemento audio.
</audio>

Detalles avanzados:

• El reinicio es imperceptible en formatos bien codificados (MP3, AAC).
• Para vídeos: se puede combinar con muted y autoplay en fondos animados.

4. Atributo muted

Silencia el audio por defecto. Muy usado junto a autoplay para cumplir políticas de reproducción automática.

<video src='banner.mp4' autoplay muted loop playsinline>
  Tu navegador no soporta el elemento video.
</video>

Consejos:

• Visibilidad: informa al usuario de que el sonido está silenciado y ofrécele la opción de activarlo.
• En accesibilidad, añade controles para activar/desactivar el sonido fácilmente.

5. Atributo poster

Define una imagen estática que se muestra antes de reproducir un vídeo o mientras se carga.

<video src='documental.mp4' controls poster='miniatura.jpg'>
  Tu navegador no soporta el elemento video.
</video>

Puntos a considerar:

• Tamaño de poster: debe coincidir lo más posible con la relación de aspecto del vídeo.
• Formato: JPEG, PNG o WebP para velocidad de carga óptima.
• Usar imágenes descriptivas para mejorar la experiencia de usuario y accesibilidad.

Resumen de atributos

Buenas prácticas

• No abusar de autoplay en páginas principales para no fatigar al usuario.
• Combinar muted con autoplay si realmente necesitas reproducción automática.
• Proporcionar siempre controles (controls) o reemplazos accesibles.
• Optimizar las imágenes de poster para reducir el peso y mejorar la carga.
• Probar la experiencia en distintos navegadores y dispositivos.