Atributo HTML autoplay

O atributo HTML autoplay é um atributo boolean que instrui o navegador a iniciar a reprodução do áudio ou vídeo automaticamente, assim que possível, sem precisar parar para concluir o carregamento.

Você pode usar este atributo nos seguintes elementos: <audio> e <video>.

Como autoplay é um atributo boolean, sua simples presença significa "ativado." Não é necessário atribuir um valor — autoplay e autoplay="" significam a mesma coisa, e escrever algo como autoplay="false" não o desativa. Para desativar o autoplay, remova o atributo completamente.

Sintaxe

<tag autoplay>&lt;/tag&gt;

Por que os navegadores bloqueiam o autoplay

Na prática, simplesmente adicionar autoplay muitas vezes não é suficiente — navegadores modernos recusarão silenciosamente o início da reprodução. Isso é intencional. Páginas que emitem som no momento em que são carregadas são notoriamente prejudiciais à experiência do usuário, por isso os navegadores impõem políticas de autoplay:

Autoplay sem som é permitido. Mídia sem áudio (ou silenciada) pode ser reproduzida automaticamente no carregamento da página, pois não surpreende o usuário.
Autoplay com som é restrito. Para reproduzir com som automaticamente, o navegador geralmente exige um sinal de intenção ou interesse do usuário, como:
- um gesto do usuário na página (um clique ou toque) antes de solicitar a reprodução, ou
- no Chrome, um Media Engagement Index alto — uma pontuação por site que o Chrome mantém com base na frequência com que o usuário reproduziu mídia anteriormente naquele site.
O Safari é restrito por padrão. O Safari bloqueia o autoplay com som na maioria dos sites e permite que os usuários desativem o autoplay por site nas configurações. O autoplay silenciado ainda funciona.

A conclusão: para um autoplay confiável, a mídia deve estar silenciada. Adicione o atributo muted junto com autoplay (veja em funcionamento na página <video>).

Nota: <audio autoplay> por si só (o áudio nunca é silenciado por padrão) será bloqueado nos navegadores modernos. Um <video autoplay muted> será reproduzido. Para reproduzir áudio automaticamente, silencie-o primeiro ou inicie-o a partir de uma interação do usuário.

<!-- Plays automatically: video, muted -->
<video autoplay muted src="movie.mp4"></video>

<!-- Usually BLOCKED: audio always has sound -->
<audio autoplay src="song.mp3"></audio>

<!-- Plays automatically: muted audio (silent, but it plays) -->
<audio autoplay muted src="song.mp3"></audio>

Exemplo do atributo HTML autoplay usado no elemento `<audio>`:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <audio controls autoplay>
      <source src="/build/audios/jingle_bells.ogg" type="audio/ogg" />
      <source src="/build/audios/audio.mp3" type="audio/mpeg" />
    </audio>
    <p>Click the play button</p>
  </body>
</html>

Experimente Você Mesmo »

Exemplo do atributo HTML autoplay usado no elemento `<video>`:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <video width="320" height="240" controls autoplay muted>
      <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg" />
      <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
    </video>
    <p>Some information about video</p>
  </body>
</html>

Experimente Você Mesmo »

Iniciando a reprodução com JavaScript

Às vezes é necessário acionar a reprodução por código em vez do atributo autoplay — por exemplo, após o usuário clicar em um botão personalizado. Chamar element.play() retorna uma Promise que é resolvida quando a reprodução começa e rejeitada se o navegador a bloquear (na maioria das vezes porque a mídia tem som e não houve gesto do usuário).

Sempre trate a rejeição para que um autoplay bloqueado não gere um erro não capturado. Um padrão comum é recorrer à reprodução silenciada:

<video id="clip" muted src="movie.mp4"></video>

<script>
  const video = document.getElementById("clip");

  const promise = video.play();

  if (promise !== undefined) {
    promise
      .then(() => {
        // Autoplay started successfully.
      })
      .catch((error) => {
        // Autoplay was prevented. Mute the video and try again,
        // or show a play button so the user can start it.
        video.muted = true;
        video.play();
      });
  }
</script>

Acessibilidade e UX

Mídia com reprodução automática — especialmente com som — pode ser desorientadora e intrusiva. De acordo com a WCAG 1.4.2 (Controle de Áudio), qualquer áudio reproduzido automaticamente por mais de 3 segundos deve oferecer uma forma de pausar, parar ou silenciá-lo independentemente do volume geral do sistema. A abordagem mais segura é:

Preferir o autoplay silenciado e permitir que os usuários ativem o som sob demanda.
Sempre fornecer controls para que o usuário possa parar a reprodução.
Evitar a reprodução automática de conteúdo com som, a menos que o usuário tenha solicitado claramente.

Prática

Qual afirmação sobre o atributo HTML 'autoplay' está correta?

Para um autoplay confiável em navegadores modernos, a mídia também deve estar 'muted'.O atributo 'autoplay' pode ser desativado escrevendo 'autoplay="false"'.Um elemento '<audio autoplay>' (sem 'muted') tem a reprodução com som garantida no carregamento da página.O atributo 'autoplay' só pode ser usado no elemento '<img>'.O atributo 'autoplay' deve sempre ser combinado com o atributo 'controls' para funcionar.

Tópicos de mídia relacionados

Tag HTML <video> — incorpore vídeo e combine autoplay com muted.
Tag HTML <audio> — incorpore clipes de som e música.
Tag HTML <source> — forneça múltiplos formatos de mídia por elemento.
Atributo HTML controls — exiba controles integrados de reprodução, pausa e volume.
Áudio e Vídeo em HTML5 — um guia mais completo sobre incorporação de mídia.