HTMLMediaElement.play() retorna uma promessa.

Jeff Posnick

A reprodução automática de áudio e vídeo na Web é um recurso poderoso, 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> por 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 podem estar em um ambiente público, não comecem a fazer o download e a reproduzir mídia acidentalmente sem interagir explicitamente com a página.

Historicamente, era difícil determinar se a interação do usuário era necessária para iniciar a reprodução e detectar as falhas que ocorriam quando a reprodução (automática) era tentada e falhava. Várias soluções alternativas existem, mas não são ideais. Uma melhoria no método play() subjacente para resolver essa incerteza já era esperada há muito tempo e agora chegou à plataforma da Web, com uma implementação inicial no Chrome 50.

Uma chamada play() em um elemento <video> ou <audio> agora retorna uma promessa. Se a reprodução for bem-sucedida, a promessa será cumprida. Se a reprodução falhar, a promessa será recusada com uma mensagem de erro explicando a falha. Isso permite que você escreva um código intuitivo, como este:

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 vai iniciar a reprodução de um <video> até que a guia esteja visível. A promessa não será cumprida até que a reprodução seja iniciada, ou seja, o código dentro do then() não será executado até que a mídia seja reproduzida. Métodos anteriores para determinar se o play() é bem-sucedido, como aguardar um período definido para um evento playing e presumir falha se ele não ocorrer, são suscetíveis a falsos negativos em cenários de reprodução atrasada.

Publicamos um exemplo em tempo real dessa nova funcionalidade. Confira em um navegador, como o Chrome 50, que oferece suporte a essa interface baseada em promessas. Aviso: a página vai tocar música automaticamente quando você a visitar. (A menos que, é claro, não seja!)

Área perigosa

<source> em <video> faz com que a promessa play() nunca seja rejeitada

Para <video src="not-existing-video.mp4"\>, a promessa play() é rejeitada como esperado, porque 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 houver fontes válidas.

Bug do Chromium