Melhoria na experiência do usuário, menor incentivo para instalar bloqueadores de anúncios e redução no consumo de dados
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. Spoiler: os usuários vão adorar!
Novos comportamentos
Como você já notou, os navegadores da Web estão adotando políticas mais rigorosas de reprodução automática para melhorar a experiência do usuário, minimizar os 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:
- A reprodução automática com o som desativado é sempre permitida.
- A reprodução automática com som é permitida se:
- O usuário interagiu com o domínio (clicar, tocar etc.).
- Em computadores, o limite do Índice de engajamento de mídia do usuário foi ultrapassado, o que significa que o usuário já reproduziu um vídeo com som.
- O usuário adicionou o site à tela inicial no dispositivo móvel ou instalou o PWA no computador.
- Os principais frames podem delegar a permissão de reprodução automática aos iframes para permitir a reprodução automática com som.
Í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 da mídia (áudio/vídeo) precisa ser maior que sete segundos.
- O áudio precisa estar presente e com o som 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 é reproduzida regularmente. Quando estiver alto o suficiente, a mídia poderá ser reproduzida automaticamente apenas em computadores.
O MEI de um usuário está disponível na página interna do about://media-engagement.
about://media-engagement no Chrome.
Chaves de desenvolvedor
Como desenvolvedor, talvez você queira 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 totalmente 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 muito engajado, e a reprodução automática sempre seria permitida.Para garantir que a reprodução automática nunca seja permitida, desative a MEI e se os sites com o MEI geral mais alto terão a reprodução automática padrão para novos usuários. Faça isso com sinalizações:
chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies.
Delegação de iframe
Com uma política de permissões, os desenvolvedores podem ativar e desativar seletivamente os recursos do navegador e as APIs. Depois que uma origem recebe a permissão para 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. Além disso,
o atributo de reprodução automática será ignorado.
Exemplos
Exemplo 1:sempre que um usuário acessa VideoSubscriptionSite.com no laptop, ele assiste a 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 em busca de 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 será permitida se o usuário
navegar diretamente de uma página de mídia social ou de uma 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 nos artigos de notícias. A reprodução automática nas páginas de matérias 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 surpreendidos pelo conteúdo da reprodução automática.
Exemplo 4:MyMovieReviewBlog.com incorpora um iframe com um trailer de filme para
acompanhar uma avaliação. Os usuários interagiram com o domínio para acessar o blog, então 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 corporativas do Chrome para casos de uso como quiosques ou sistemas autônomos. Confira a página de ajuda Lista de políticas para saber como definir as políticas empresariais relacionadas à reprodução automática:
- A política
AutoplayAllowedcontrola se a reprodução automática é permitida ou não. - A política
AutoplayAllowlistpermite 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 da 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. É muito importante que vou escrevê-lo mais uma vez abaixo para quem simplesmente lê essa postagem.
É necessário sempre verificar a Promise 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 envolver os usuários é usar a reprodução automática com som desativado e permitir que eles escolham ativar o som. conforme o exemplo abaixo. Alguns sites já fazem isso de forma eficaz, incluindo 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, recomendo que você continue com a "click". Consulte o
problema whatwg/html#3849 do GitHub.
Áudio da Web
A API Web Audio está 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 seja informado sobre o que está acontecendo. Pense, por exemplo, em um botão "reproduzir" ou "liga/desliga". Você também pode adicionar um botão "Ativar som", dependendo do fluxo do app.
Se você criar seu AudioContext no carregamento da página, será necessário chamar resume() em 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 o AudioContext somente quando o usuário interage com a página.
document.querySelector('button').addEventListener('click', function() {
var context = new AudioContext();
// Setup all nodes
// ...
});
Para detectar se o navegador exige a interação do usuário para reproduzir áudio, verifique
AudioContext.state depois de criá-lo. Caso a reprodução seja permitida, ele
vai mudar imediatamente para running. Caso contrário, será suspended. Se você detectar o evento statechange, poderá detectar mudanças de maneira assíncrona.
Para conferir um exemplo, confira a pequena Solicitação de pull que corrige a reprodução de áudio da Web para essas regras da política de reprodução automática para https://airhorner.com.