El Atributo CONTROLS

Se utiliza con los elementos de audio y de video para mostrar los controles de reproducción predeterminados en el navegador.

El atributo controls en HTML se utiliza con los elementos <audio> y <video> para mostrar los controles de reproducción predeterminados en el navegador. Estos controles permiten a los usuarios interactuar con el contenido multimedia, como pausar, ajustar el volumen o navegar por la línea de tiempo. Aquí te explicamos cómo implementarlo correctamente:

¿Qué hace el atributo `controls`?

Propósito:

Activa la visualización de los controles de reproducción (play/pause, volumen, barra de progreso, etc.) para contenido multimedia.

Tipo de atributo:

Booleano (no requiere valor; basta con incluir controls en la etiqueta).

Compatibilidad:

Funciona en todos los navegadores modernos (Chrome, Firefox, Safari, Edge).

Sintaxis básica

Para video

<video src="video.mp4" controls></video>

Para audio

<audio src="audio.mp3" controls></audio>

Ejemplos prácticos

Video con controles

<video 
  src="nature.mp4" 
  controls 
  width="600"
  poster="thumbnail.jpg"
>
  Tu navegador no soporta el elemento de video.
</video>

Resultado:

Audio con controles

<audio src="musica.mp3" controls>
  Tu navegador no soporta el elemento de audio.
</audio>

Resultado:

Atributos relacionados

autoplay: Inicia la reproducción automáticamente (no recomendado por usabilidad).
loop: Reproduce el contenido en bucle.
muted: Silencia el audio inicialmente.
poster (solo en <video>): Muestra una imagen de portada antes de la reproducción.

Ejemplo combinado:

<video 
  src="video.mp4" 
  controls 
  muted 
  loop 
  poster="portada.jpg"
  width="800"
></video>

Apariencia de los controles

Los controles son proporcionados por el navegador y su diseño varía según el navegador (Chrome, Firefox, etc.).
Si deseas controles personalizados, debes:

Omitir el atributo controls.
Usar JavaScript para crear botones personalizados.
Estilizar con CSS.

Ejemplo de controles personalizados:

<video id="miVideo" src="video.mp4" width="600"></video>
<div>
  <button onclick="document.getElementById('miVideo').play()">Play</button>
  <button onclick="document.getElementById('miVideo').pause()">Pause</button>
</div>

Errores comunes

Olvidar incluir controls:
Sin él, el usuario no podrá interactuar con el contenido multimedia.
Usar autoplay sin muted:
Muchos navegadores bloquean la reproducción automática con sonido activo.
Confiar en formatos no compatibles:
Asegúrate de usar formatos como MP4 (video) y MP3 (audio) para máxima compatibilidad.

Mejores prácticas

Siempre incluye `controls`:

A menos que estés creando una experiencia personalizada con JavaScript.

Proporciona mensajes de fallback:

Agrega texto dentro de <audio> o <video> para navegadores antiguos.

Optimiza para móviles:

Usa width="100%" o diseños responsivos para ajustar el tamaño del reproductor.

Ejemplo avanzado: Video con subtítulos

<video src="video.mp4" controls width="800">
  <track 
    src="subtitulos.vtt" 
    kind="subtitles" 
    srclang="es" 
    label="Español"
  >
  Tu navegador no admite el elemento de video.
</video>

Conclusión

El atributo controls es esencial para:

Hacer contenido multimedia interactivo para el usuario.
Garantizar accesibilidad al permitir controlar la reproducción.
Evitar dependencias de plugins como Flash (obsoleto).

Ejemplo final:

<!DOCTYPE html>
<html>
<head>
  <title>Reproductor con controles</title>
</head>
<body>
  <h2>Video educativo</h2>
  <video 
    src="tutorial.mp4" 
    controls 
    width="800" 
    poster="portada.jpg"
  >
    Descarga el <a href="tutorial.mp4">video</a> si no se reproduce.
  </video>
</body>
</html>

¡Usa controls para ofrecer una experiencia multimedia intuitiva y profesional!

¿Qué hace el atributo controls?