Atributo controls do HTML

O atributo controls do HTML é um atributo boolean que instrui o navegador a exibir seus controles de reprodução integrados para um elemento <audio> ou <video>. Ele foi introduzido no HTML5.

Por que o atributo controls é importante

Por padrão, os elementos <audio> e <video> não renderizam nenhuma interface visível. Um elemento <audio> sem controls é completamente invisível na página, e um elemento <video> sem ele exibe apenas o primeiro quadro (ou uma caixa preta) sem nenhuma forma de iniciar a reprodução.

Adicionar controls oferece aos usuários uma maneira de reproduzir, pausar, avançar e ajustar o volume — e permite que usuários de teclado e leitores de tela operem a mídia. A menos que você esteja criando um player JavaScript personalizado com seus próprios controles acessíveis, quase sempre é recomendável incluir controls. Omiti-lo sem uma alternativa é um problema tanto de usabilidade quanto de acessibilidade.

Quais controles são exibidos

Para o elemento <audio>, os controles do navegador geralmente incluem:

Reproduzir / Pausar
Barra de progresso (navegação)
Tempo atual / duração
Volume / mudo

Para o elemento <video>, eles geralmente incluem:

Reproduzir / Pausar
Barra de progresso (navegação)
Tempo atual / duração
Volume / mudo
Alternar tela cheia
Legendas / subtítulos (quando um <track> com kind="captions" ou kind="subtitles" está presente)
Picture-in-Picture / download / "reproduzir em outro dispositivo" (dependente do navegador)

O conjunto exato de controles — e como eles aparecem — não é padronizado. Chrome, Firefox, Safari, Edge e navegadores móveis renderizam sua própria interface nativa, e alguns controles (como legendas ou download) só aparecem quando são relevantes. Trate a aparência como um detalhe do navegador que você não controla totalmente.

Sintaxe

controls é boolean: sua simples presença ativa os controles. O valor não importa, portanto controls, controls="" e controls="controls" são todos equivalentes. Para omiti-lo, basta não incluir o atributo.

<audio controls></audio>

Exemplo: controls no 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>

Experimente Você Mesmo »

O texto dentro do elemento ("Your browser does not support…") é conteúdo de fallback para navegadores muito antigos. Substitua o src pelo caminho do seu próprio arquivo de áudio ou qualquer URL de áudio HTTPS acessível.

Exemplo: controls no elemento `<video>`

Aqui, múltiplos elementos <source> permitem que o navegador escolha o primeiro formato que consegue reproduzir. Substitua por seus próprios arquivos ou uma URL HTTPS estável.

<!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>

Experimente Você Mesmo »

Removendo controles específicos com controlslist

Quando você quer a maioria dos controles nativos, mas precisa ocultar um ou dois, os navegadores baseados em Chromium (Chrome, Edge, Opera) suportam o atributo relacionado controlslist. Ele aceita uma lista de tokens separados por espaço que desativam controles individuais:

nodownload — ocultar o botão de download
nofullscreen — ocultar o botão de tela cheia (vídeo)
noremoteplayback — ocultar o botão "reproduzir em outro dispositivo" / transmissão

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

controlslist não faz parte de um padrão finalizado e é atualmente um recurso do Chromium, portanto Firefox e Safari o ignoram. Ele apenas oculta elementos de interface — não é um mecanismo de segurança ou DRM, e um usuário determinado ainda pode acessar a mídia.

controls com autoplay e muted

Se você combinar controls com autoplay, a maioria dos navegadores bloqueará a reprodução automática com som. Adicione o atributo muted para que a mídia possa iniciar, e o usuário pode ativar o som através dos controles:

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

Tópicos relacionados

Prática

Para que serve o atributo 'controls' do HTML?

É usado para controlar o comportamento de uma tabela HTML.É usado para oferecer controles adicionais em um elemento de texto.É usado para adicionar controles multimídia padrão a um elemento de áudio ou vídeo.É usado para manipular imagens em um documento HTML.