A reprodução automática de vídeo em silêncio tem suporte do Chrome para Android a partir da versão 53. A reprodução de um elemento de vídeo vai começar automaticamente quando ele aparecer na tela se autoplay e muted estiverem definidos, e a reprodução de vídeos silenciados pode ser iniciada pragmaticamente com play(). Antes, a reprodução em dispositivos móveis precisava ser iniciada por um gesto do usuário, independentemente do estado de silêncio.
<video playsinline autoplay muted>
<source src="video.webm" type="video/webm" />
<source src="video.mp4" type="video/mp4" />
</video>
Confira como isso funciona neste exemplo. A reprodução do vídeo muted começa automaticamente no Chrome 53 ou mais recente.
Além disso, a reprodução silenciada agora pode ser iniciada usando o método play(). Anteriormente, play() só iniciava a reprodução se viesse de um gesto do usuário, como um clique no botão. Compare as duas demos a seguir 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 desativar o som de um vídeo de forma programática em resposta a um gesto do usuário, como click. No entanto, se você tentar desativar o som de um vídeo de forma programática sem um gesto do usuário, a reprodução será pausada.
A mudança de muted autoplay também vai permitir o uso de play() com um elemento video não criado no DOM, por exemplo, para controlar a reprodução do 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. Veja um exemplo disso em simpl.info/video/scripted.
Qual é o motivo da mudança?
O recurso de reprodução automática foi desativado nas versões anteriores do Chrome no Android porque pode ser perturbador, consumir dados e muitos usuários não gostam dele.
A desativação da reprodução automática teve o efeito indesejado de levar os desenvolvedores a alternativas, como GIFs animados, além de hacks <canvas> e <img>. Essas técnicas são muito piores do que o vídeo otimizado em termos de consumo de energia, desempenho, requisitos de largura de banda, custo de dados e uso de memória. O vídeo pode oferecer uma qualidade maior do que os GIFs animados, com uma compactação muito melhor: cerca de 10 vezes em média e até 100 vezes na melhor das hipóteses. É possível decodificar vídeo em JavaScript, mas consome muito a bateria.
Compare os seguintes exemplos: o primeiro é um vídeo e o segundo é um GIF animado:
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 dos dados geralmente representa uma barreira maior ao acesso do que a conectividade ruim. Dada a prevalência de soluções alternativas, o recurso de reprodução automática com som desativado não pode ser bloqueado. Portanto, oferecer boas APIs e padrões é a melhor opção da plataforma.
A Web está cada vez mais focada na mídia. Designers e desenvolvedores continuam encontrando maneiras novas e imprevistas de usar vídeos e querem um comportamento consistente em todas as plataformas, por exemplo, ao usar o vídeo em segundo plano como elemento de design. O recurso de reprodução automática com som desativado permite funcionalidades como essa em dispositivos móveis e computadores.
Os pontos mais relevantes
- Do ponto de vista de acessibilidade, a reprodução automática pode ser particularmente problemática. O Chrome 53 e versões mais recentes no Android oferecem uma configuração para desativar a reprodução automática completamente: em "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 com o som desativado não faz muito sentido para áudio. - Não há 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 som desativado funciona para qualquer elemento de vídeo visível em qualquer documento visível, iframe ou não.
- Para aproveitar o novo comportamento, você precisa adicionar
mutedeautoplay: compare simpl.info/video com simpl.info/video/muted.
Suporte
- O autoplay desativado é compatível com o Safari no iOS 10 e versões mais recentes.
- A reprodução automática, com ou sem som, já é compatível com o Android no Firefox e no UC Browser: eles não bloqueiam nenhum tipo de reprodução automática.