A reprodução automática de áudio e vídeo na Web é um recurso eficiente
e que está sujeito a diferentes restrições em diferentes plataformas.
Atualmente, a maioria dos navegadores para computador sempre permite que as páginas da Web iniciem a reprodução de <video>
ou <audio>
via JavaScript sem interação do usuário.
No entanto, a maioria dos navegadores para dispositivos móveis exige um gesto explícito do usuário antes que a reprodução iniciada pelo JavaScript possa ocorrer. Isso ajuda a garantir que os usuários de dispositivos móveis, muitos dos quais pagam por largura de banda ou que podem estar em um ambiente público, não iniciem acidentalmente o download e a reprodução de mídia sem interagir explicitamente com a página.
Historicamente, tem sido difícil determinar se a interação do usuário é
necessária para iniciar a reprodução e detectar as falhas que ocorrem quando
a reprodução (automática) é tentada e falha. Há várias soluções alternativas, mas não são o ideal. Uma
melhoria no
método play()
subjacente para lidar com essa incerteza está muito atrasada, e isso
já chegou à
plataforma da Web,
com uma implementação inicial no
Chrome 50.
Uma chamada play()
em um elemento <video>
ou <audio>
agora retorna uma Promise. Se a reprodução for bem-sucedida,
a promessa será atendida e, se a reprodução falhar, a promessa será rejeitada com uma
mensagem de erro explicando a falha. Isso permite que você escreva um código intuitivo, como o seguinte:
var playPromise = document.querySelector('video').play();
// In browsers that don’t yet support this functionality,
// playPromise won’t be defined.
if (playPromise !== undefined) {
playPromise.then(function() {
// Automatic playback started!
}).catch(function(error) {
// Automatic playback failed.
// Show a UI element to let the user manually start playback.
});
}
Além de detectar se o método play()
foi bem-sucedido, a nova interface baseada em promessas permite determinar quando o método play()
foi bem-sucedido. Há contextos
em que um navegador da Web pode decidir atrasar o início da reprodução. Por exemplo, o Chrome
para computadores não iniciará a reprodução de um <video>
até que a guia esteja visível. A promessa não
será atendida até que a reprodução comece, o que significa que o código dentro do then()
não
será executado até que a mídia seja reproduzida. Os métodos anteriores para determinar se play()
foi bem-sucedido,
como aguardar um período definido para um evento playing
e presumir uma falha se ele não
for disparado, são suscetíveis a falsos negativos em cenários de reprodução atrasada.
Publicamos um exemplo ativo dessa nova funcionalidade. Visualize-o em um navegador como o Chrome 50, que é compatível com essa interface baseada em promessas. Esteja ciente: a página reproduzirá músicas automaticamente quando você acessá-la. (A menos que, é claro, não faz!)
Zona de perigo
<source>
em <video>
faz com que a promessa de play()
nunca seja rejeitada.
Para <video src="not-existing-video.mp4"\>
, a promessa play()
é rejeitada conforme
esperado, já que o vídeo não existe. Para <video><source src="not-existing-video.mp4" type='video/mp4'></video>
, a promessa play()
nunca é rejeitada. Isso só acontece se não há fontes válidas.