HTMLMediaElement.play() retorna uma promessa.

Jeff Posnick

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.

Bug do Chromium