Política de reprodução automática no Chrome

Melhor experiência do usuário, minimização dos incentivos para instalar bloqueadores de anúncios e redução do consumo de dados

François Beaufort
François Beaufort
GitHub

As políticas de reprodução automática do Chrome mudaram em abril de 2018, e estou aqui para explicar por que e como isso afeta a reprodução de vídeos com som. Dica: os usuários vão adorar!

Liam Neeson: Vou encontrar você e fazer uma pausa.
Sean Bean: Não basta reproduzir vídeos automaticamente.
Memes da Internet marcados como "reprodução automática" foram encontrados no Imgflip e no Imgur.

Novos comportamentos

Como você pode ter notado, os navegadores da Web estão adotando políticas de reprodução automática mais rígidas para melhorar a experiência do usuário, minimizar incentivos para a instalação de bloqueadores de anúncios e reduzir o consumo de dados em redes caras e/ou restritas. O objetivo dessas mudanças é oferecer maior controle da reprodução aos usuários e beneficiar os editores com casos de uso legítimos.

As políticas de reprodução automática do Chrome são simples:

Índice de engajamento de mídia

O índice de engajamento de mídia (MEI, na sigla em inglês) mede a propensão de um indivíduo a consumir mídia em um site. A abordagem do Chrome é uma proporção de visitas a eventos significativos de reprodução de mídia por origem:

  • O consumo de mídia (áudio/vídeo) deve ser maior que sete segundos.
  • O áudio precisa estar presente e ativado.
  • A guia com o vídeo está ativa.
  • O tamanho do vídeo (em px) precisa ser maior que 200 x 140.

A partir disso, o Chrome calcula uma pontuação de engajamento de mídia, que é a mais alta em sites em que a mídia é aberta regularmente. Quando for alto o suficiente, a mídia poderá ser reproduzida automaticamente apenas em computadores.

A MEI de um usuário está disponível na página interna do about://media-engagement.

Captura de tela da página interna about://media-engagement.
Captura de tela da página interna do about://media-engagement no Chrome.

Interruptores de desenvolvedor

Como desenvolvedor, você pode alterar localmente o comportamento da política de reprodução automática do Chrome para testar seu site em diferentes níveis de engajamento do usuário.

  • É possível desativar completamente a política de reprodução automática usando uma sinalização de linha de comando: chrome.exe --autoplay-policy=no-user-gesture-required. Isso permite que você teste seu site como se o usuário estivesse fortemente envolvido com ele e a reprodução automática de reprodução fosse sempre permitida.

  • Você também pode garantir que a reprodução automática nunca seja permitida desativando a MEI e se os sites com a MEI geral mais alta terão a reprodução automática por padrão para novos usuários. Faça isso com flags: chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies.

Delegação de iframe

Uma política de permissões permite que os desenvolvedores ativem e desativem seletivamente os recursos e as APIs do navegador. Depois que uma origem recebe permissão de reprodução automática, ela pode delegar essa permissão a iframes de origem cruzada com a política de permissões para reprodução automática. A reprodução automática é permitida por padrão em iframes de mesma origem.

<!-- Autoplay is allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay">

<!-- Autoplay and Fullscreen are allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen">

Quando a política de permissões para reprodução automática estiver desativada, as chamadas para play() sem um gesto do usuário vão rejeitar a promessa com uma DOMException NotAllowedError. O atributo de reprodução automática também será ignorado.

Exemplos

Exemplo 1:toda vez que um usuário acessa o VideoSubscriptionSite.com no laptop, ele assiste um programa de TV ou filme. Como a pontuação de engajamento de mídia é alta, a reprodução automática é permitida.

Exemplo 2:GlobalNewsSite.com tem conteúdo de texto e vídeo. A maioria dos usuários acessa o site para visualizar conteúdo de texto e assiste a vídeos apenas ocasionalmente. A pontuação de engajamento de mídia dos usuários é baixa. Portanto, a reprodução automática não é permitida se o usuário navega diretamente de uma página de mídia social ou pesquisa.

Exemplo 3:LocalNewsSite.com tem conteúdo de texto e vídeo. A maioria das pessoas entra no site pela página inicial e depois clica nas notícias. A reprodução automática em páginas de artigos de notícias seria permitida devido à interação do usuário com o domínio. No entanto, tome cuidado para garantir que os usuários não sejam surpresos com a reprodução automática do conteúdo.

Exemplo 4:MyMovieReviewBlog.com incorpora um iframe com um trailer de filme para acompanhar uma avaliação. Como os usuários interagiram com o domínio para acessar o blog, a reprodução automática é permitida. No entanto, o blog precisa delegar explicitamente esse privilégio ao iframe para que o conteúdo seja reproduzido automaticamente.

Políticas do Chrome Enterprise

É possível alterar o comportamento de reprodução automática com as políticas do Chrome Enterprise para casos de uso como quiosques ou sistemas autônomos. Confira a página de ajuda da Lista de políticas para aprender a definir as políticas corporativas relacionadas à reprodução automática:

  • A política AutoplayAllowed controla se a reprodução automática é permitida ou não.
  • A política AutoplayAllowlist permite especificar uma lista de permissões de padrões de URL em que a reprodução automática estará sempre ativada.

Práticas recomendadas para desenvolvedores Web

Elementos de áudio/vídeo

Lembre-se: nunca presuma que um vídeo será reproduzido e não mostre um botão de pausa quando o vídeo não estiver sendo reproduzido. Isso é tão importante que vou escrevê-lo mais uma vez abaixo para quem simplesmente ler essa postagem.

Sempre analise a promessa retornada pela função de reprodução para ver se ela foi rejeitada:

var promise = document.querySelector('video').play();

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
  });
}

Uma maneira interessante de engajar os usuários é usar a reprodução automática silenciada e permitir que eles escolham ativar o som. conforme o exemplo abaixo. Alguns sites já fazem isso de forma eficaz, como Facebook, Instagram, Twitter e YouTube.

<video id="video" muted autoplay>
<button id="unmuteButton"></button>

<script>
  unmuteButton.addEventListener('click', function() {
    video.muted = false;
  });
</script>

Os eventos que acionam a ativação do usuário ainda precisam ser definidos de maneira consistente nos navegadores. Por enquanto, recomendamos que você continue usando o "click". Consulte GitHub issue whatwg/html#3849 (link em inglês).

Áudio da Web

A API Web Audio é coberta pela reprodução automática desde o Chrome 71. Há algumas coisas que você precisa saber sobre isso. Primeiro, é recomendável aguardar uma interação do usuário antes de iniciar a reprodução de áudio para que ele saiba que algo está acontecendo. Pense, por exemplo, em um botão "reproduzir" ou "ligar/desligar". Também é possível adicionar um botão "Ativar som", dependendo do fluxo do app.

Se você criar o AudioContext no carregamento da página, será necessário chamar resume() algum momento depois que o usuário interagir com a página (por exemplo, depois que um usuário clicar em um botão). Como alternativa, o AudioContext será retomado após um gesto do usuário se start() for chamado em qualquer nó anexado.

// Existing code unchanged.
window.onload = function() {
  var context = new AudioContext();
  // Setup all nodes
  // ...
}

// One-liner to resume playback when user interacted with the page.
document.querySelector('button').addEventListener('click', function() {
  context.resume().then(() => {
    console.log('Playback resumed successfully');
  });
});

Também é possível criar AudioContext somente quando o usuário interagir com a página.

document.querySelector('button').addEventListener('click', function() {
  var context = new AudioContext();
  // Setup all nodes
  // ...
});

Para detectar se o navegador exige uma interação do usuário para reproduzir áudio, verifique AudioContext.state depois de criá-lo. Se a reprodução for permitida, ela vai mudar imediatamente para running. Caso contrário, será suspended. Se você detectar o evento statechange, poderá detectar as mudanças de forma assíncrona.

Para ver um exemplo, confira a pequena solicitação de envio que corrige a reprodução de áudio da Web para essas regras da política de reprodução automática para https://airhorner.com.