Melhoramos a experiência do usuário, minimizamos os incentivos para instalar bloqueadores de anúncios e reduzimos o consumo de dados.
As políticas de reprodução automática do Chrome foram alteradas em abril de 2018, e estou aqui para informar por que e como isso afeta a reprodução de vídeo com som. Alerta de spoiler: os usuários vão adorar!
Novos comportamentos
Como você deve notar, os navegadores da Web estão migrando para uma reprodução automática mais rígida políticas para melhorar a experiência do usuário e minimizar incentivos para instalar bloqueadores de anúncios e reduzir o consumo de dados em dispositivos redes VPC. O objetivo dessas mudanças é dar mais controle de 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.).
- No computador, o índice de engajamento de mídia do usuário. o limite foi ultrapassado, ou seja, o usuário já assistiu o vídeo com som.
- O usuário adicionou o site à tela inicial em dispositivos móveis ou instalou a PWA no computador.
- Os frames principais podem delegar permissão de reprodução automática aos iframes deles para permitir a reprodução automática com som.
Índice de engajamento de mídia
O Índice de engajamento na mídia (MEI, na sigla em inglês) mede a propensão de um indivíduo ao consumo mídia em um site. A abordagem do Chrome é uma proporção de visitas a mídias significativas eventos de reprodução 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.
Com isso, o Chrome calcula uma pontuação de engajamento de mídia, que é mais alta em sites em que a mídia é reproduzida regularmente. Quando for alto o suficiente, a mídia têm permissão para reprodução automática somente em computadores.
O MEI de um usuário está disponível na página interna about://media-engagement.
about://media-engagement no Chrome.
Interruptores de desenvolvedor
Como desenvolvedor, talvez você queira alterar o comportamento da política de reprodução automática do Chrome localmente 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 linha de comando flag:
chrome.exe --autoplay-policy=no-user-gesture-requiredIsso permite que você teste seu site como se o usuário estivesse fortemente envolvido com seu site, e a reprodução automática de reprodução será sempre permitida.Você também pode optar por garantir que a reprodução automática não seja permitida, desativando MEI e se os sites com a MEI geral mais alta recebem 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 recursos e APIs do navegador. Depois que uma origem receber a permissão de reprodução automática, ela poderá delegar essa permissão para iframes entre origens com a política de permissões para reprodução automática. A reprodução automática é permitida por padrão em iframes da 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 está desativada, as chamadas para play() sem um
um gesto do usuário rejeitará a promessa com uma DOMException NotAllowedError. E
o atributo de reprodução automática também será ignorado.
Exemplos
Exemplo 1: sempre que um usuário acessa VideoSubscriptionSite.com no
laptop, ele assiste um programa de TV ou um filme. Como a pontuação de engajamento com 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.
O "score" de engajamento com a mídia dos usuários é baixo. Por isso, a reprodução automática não é permitida se um usuário
navegar diretamente de uma página ou pesquisa de mídia social.
Exemplo 3:LocalNewsSite.com tem conteúdo de texto e vídeo.
A maioria das pessoas acessa o site pela página inicial e clica nos artigos de
notícias. A reprodução automática em páginas de artigos de notícias seria permitida devido à
com o domínio. No entanto, é preciso ter cuidado para que os usuários
não sejam surpreendidos com a reprodução automática de conteúdo.
Exemplo 4: MyMovieReviewBlog.com incorpora um iframe com um trailer de filme para
acompanhar uma crítica. 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
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 saber como definir as políticas corporativas 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 vai estar sempre ativada.
Práticas recomendadas para desenvolvedores Web
Elementos de áudio/vídeo
Não se esqueça de uma coisa: 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. É tão importante que vou escrevê-lo mais uma vez abaixo para aqueles que simplesmente dar uma olhada nessa postagem.
Consulte sempre 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 envolver os usuários é usar a reprodução automática com som desativado e permitir que eles escolham desativar o som. conforme o exemplo abaixo. Alguns sites já fazem isso de forma eficaz, como Facebook, Instagram, Twitter e YouTube.
<video id="video" muted playsinline 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 no
navegadores padrão. Por enquanto, recomendamos que você continue usando o "click". Consulte
Issue whatwg/html#3849 do GitHub (link em inglês).
Web Audio
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 esperar uma interação do usuário antes de iniciar a reprodução de áudio para que os usuários saibam que algo está acontecendo. Pense em um botão "play" ou um interruptor "on/off", por exemplo. Você também pode ativar o som dependendo do fluxo do aplicativo.
Se você criar o AudioContext no carregamento da página, vai ser necessário chamar resume()
algum tempo depois que o usuário interagir com a página (por exemplo, depois que o usuário clicar
em um botão). Como alternativa, a AudioContext será retomada depois que o 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 a AudioContext somente quando o usuário interagir com o
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, marque
AudioContext.state após a criação. 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 mudanças de forma assíncrona.
Para ver um exemplo, confira a pequena solicitação de envio que corrige Reprodução de áudio da Web para estas regras da política de reprodução automática para https://airhorner.com.