Reprodução automática silenciada em dispositivos móveis: diga adeus aos truques de tela e GIFs animados.

A reprodução automática com o som desativado dos vídeos está disponível no Chrome para Android a partir da versão 53. A reprodução de um elemento de vídeo vai ser iniciada automaticamente assim que ele for exibido se autoplay e muted estiverem definidos. A reprodução de vídeos silenciados pode ser iniciada pragmáticamente com play(). Antes, a reprodução em dispositivos móveis precisava ser iniciada por um gesto do usuário, independentemente do estado silenciado.

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

Confira esta amostra em ação. A reprodução do vídeo muted começa automaticamente no Chrome 53 ou mais recente.

Captura de tela do player de vídeo.

Além disso, agora a reprodução silenciada pode ser iniciada usando o método play(). Anteriormente, o play() só iniciava a reprodução se viesse de um gesto do usuário, como um clique de botão. Compare estas duas demonstrações no Android: teste-as no Chrome 53 e depois em uma versão mais antiga:

Recomendamos usar o atributo autoplay sempre que possível e o método play() somente se necessário.

É possível ativar o som de um vídeo de maneira programática em resposta a um gesto do usuário, como um click. No entanto, se você tentar ativar o som de forma programática sem um gesto do usuário, a reprodução será pausada.

A mudança de muted autoplay também possibilitará o uso de play() com um elemento video não criado no DOM, por exemplo, para impulsionar a reprodução WebGL.

O método play() também retorna uma promessa, que pode ser usada para verificar se a reprodução programática silenciada está ativada. Há um exemplo disso em simpl.info/video/scripted.

Qual é o motivo da mudança?

A reprodução automática foi desativada em versões anteriores do Chrome para Android porque ela pode ser prejudicial, consumir dados e muitos usuários não gostam.

Desativar a reprodução automática levou os desenvolvedores a alternativas como GIFs animados, além de invasões de <canvas> e <img>. Essas técnicas são muito piores do que vídeos otimizados em termos de consumo de energia, desempenho, requisitos de largura de banda, custo de dados e uso de memória. Os vídeos podem oferecer mais qualidade que GIFs animados, com uma compactação muito melhor: em média, cerca de 10 vezes e, na melhor das hipóteses, até 100 vezes. A decodificação de vídeo em JavaScript é possível, mas consome muita energia da bateria.

Compare o seguinte: o primeiro é um vídeo e o segundo é um GIF animado:

Clipe de vídeo em reprodução.

Eles são muito parecidos, mas o vídeo tem menos de 200 KB e o GIF animado tem mais de 900 KB.

O Chrome e outros fornecedores de navegadores são extremamente cautelosos com a largura de banda do usuário. Para muitos usuários, em muitos contextos, o alto custo de dados costuma ser uma barreira de acesso maior do que a má conectividade. Dada a prevalência de soluções alternativas, a reprodução automática silenciada não pode ser bloqueada, portanto, oferecer APIs e padrões bons é o melhor que a plataforma pode fazer.

A Web está cada vez mais focada na mídia. Designers e desenvolvedores continuam encontrando maneiras novas e imprevistas de usar vídeos. Além disso, eles querem um comportamento consistente em todas as plataformas, por exemplo, ao usar um vídeo de plano de fundo como elemento de design. A reprodução automática com o som desativado ativa funcionalidades como esta em dispositivos móveis e computadores.

Os pontos mais delicados

  • Do ponto de vista da acessibilidade, a reprodução automática pode ser especialmente problemática. O Chrome 53 e as versões mais recentes do Android têm uma configuração para desativar completamente a reprodução automática: nas configurações de mídia, selecione "Reprodução automática".
  • Essa mudança não afeta o elemento audio: a reprodução automática ainda está desativada no Chrome para Android porque a reprodução automática sem som não faz muito sentido para o áudio.
  • Não haverá reprodução automática se o modo Economia de dados estiver ativado. Se o modo Economia de dados estiver ativado, a reprodução automática será desativada nas configurações de mídia.
  • A reprodução automática com o som desativado funcionará para qualquer elemento de vídeo visível em qualquer documento visível, iframe ou outro.
  • Não se esqueça de que, para aproveitar o novo comportamento, você precisa adicionar muted e autoplay: compare simpl.info/video com simpl.info/video/muted.

Suporte

  • A reprodução automática com o som desativado é compatível com o Safari no iOS 10 e versões mais recentes.
  • A reprodução automática, mesmo sem som, já é compatível com o Android pelo Firefox e o navegador UC. Eles não bloqueiam nenhum tipo de reprodução automática.

Saiba mais