Atributo controls de HTML

El atributo HTML controls es un atributo boolean que indica al navegador que muestre sus controles de reproducción integrados para un elemento <audio> o <video>. Se introdujo en HTML5.

Por qué importa el atributo controls

De forma predeterminada, los elementos <audio> y <video> no muestran ninguna interfaz visible. Un elemento <audio> sin controls es completamente invisible en la página, y un elemento <video> sin él solo muestra el primer fotograma (o un cuadro negro) sin ninguna forma de iniciar la reproducción.

Añadir controls proporciona a los usuarios una manera de reproducir, pausar, desplazarse y ajustar el volumen, y permite que los usuarios de teclado y lectores de pantalla operen el medio. A menos que estés construyendo un reproductor JavaScript personalizado con controles accesibles propios, casi siempre querrás incluir controls. Omitirlo sin un reemplazo es tanto un problema de usabilidad como de accesibilidad.

Qué controles se muestran

Para el elemento <audio>, los controles del navegador suelen ofrecer:

Reproducir / Pausar
Barra de búsqueda (scrubbing)
Tiempo actual / duración
Volumen / silencio

Para el elemento <video>, suelen ofrecer:

Reproducir / Pausar
Barra de búsqueda (scrubbing)
Tiempo actual / duración
Volumen / silencio
Botón de pantalla completa
Subtítulos / leyendas (cuando hay un <track> con kind="captions" o kind="subtitles")
Imagen en imagen / descarga / "reproducir en otro dispositivo" (dependiente del navegador)

El conjunto exacto de controles —y su apariencia— no está estandarizado. Chrome, Firefox, Safari, Edge y los navegadores móviles renderizan su propia interfaz nativa, y algunos controles (como los subtítulos o la descarga) solo aparecen cuando son relevantes. Trata la apariencia como un detalle del navegador que no controlas del todo.

Sintaxis

controls es boolean: su mera presencia activa los controles. El valor no importa, por lo que controls, controls="" y controls="controls" son equivalentes. Para omitirlo, simplemente no incluyas el atributo.

<audio controls></audio>

Ejemplo: controls en el elemento `<audio>`

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <audio controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">
      Your browser does not support the audio element.
    </audio>
    <p>Click the play button to hear the clip.</p>
  </body>
</html>

Pruébalo tú mismo »

El texto dentro del elemento ("Your browser does not support…") es contenido alternativo para navegadores muy antiguos. Reemplaza el src con la ruta de tu propio archivo de audio o cualquier URL de audio HTTPS accesible.

Ejemplo: controls en el elemento `<video>`

Aquí varios elementos <source> permiten al navegador elegir el primer formato que pueda reproducir. Sustituye los archivos por los tuyos propios o una URL HTTPS estable.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video {
        width: 300px;
        height: 220px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls>
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
      Your browser does not support the video element.
    </video>
    <p>Some information about the video.</p>
  </body>
</html>

Pruébalo tú mismo »

Eliminar controles específicos con controlslist

Cuando quieres la mayoría de los controles nativos pero necesitas ocultar uno o dos, los navegadores basados en Chromium (Chrome, Edge, Opera) admiten el atributo relacionado controlslist. Acepta una lista de tokens separados por espacios que deshabilitan controles individuales:

nodownload — oculta el botón de descarga
nofullscreen — oculta el botón de pantalla completa (video)
noremoteplayback — oculta el botón de "reproducir en otro dispositivo" / transmisión

<video controls controlslist="nodownload nofullscreen noremoteplayback">
  <source src="movie.mp4" type="video/mp4">
</video>

controlslist no forma parte de un estándar finalizado y actualmente es una característica de Chromium, por lo que Firefox y Safari lo ignoran. Solo oculta elementos de la interfaz de usuario, no es un mecanismo de seguridad ni de DRM, y un usuario decidido puede seguir accediendo al contenido multimedia.

controls con autoplay y muted

Si combinas controls con autoplay, la mayoría de los navegadores bloquearán la reproducción automática con sonido. Añade el atributo muted para que el medio pueda iniciarse, y el usuario podrá activar el sonido a través de los controles:

<video controls autoplay muted>
  <source src="movie.mp4" type="video/mp4">
</video>

Temas relacionados

Práctica

¿Para qué se usa el atributo 'controls' de HTML?

Se usa para controlar el comportamiento de una tabla HTML.Se usa para ofrecer controles adicionales en un elemento de texto.Se usa para añadir controles multimedia predeterminados a un elemento de audio o video.Se usa para manipular imágenes en un documento HTML.