HTMLMediaElement.play() restituisce una promessa

Jeff Posnick

La riproduzione automatica di audio e video sul web è una funzionalità potente, soggetta a restrizioni diverse a seconda delle piattaforme. Attualmente, la maggior parte dei browser desktop consentirà sempre l'avvio della riproduzione delle pagine web in <video> o <audio> tramite JavaScript senza interazione da parte dell'utente. La maggior parte dei browser mobile, tuttavia, richiede un gesto esplicito dell'utente prima che possa verificarsi la riproduzione avviata da JavaScript. Ciò aiuta a garantire che gli utenti mobile, molti dei quali pagano per la larghezza di banda o che potrebbero trovarsi in un ambiente pubblico, non inizino accidentalmente a scaricare e riprodurre contenuti multimediali senza interagire esplicitamente con la pagina.

Storicamente è difficile determinare se è necessaria l'interazione dell'utente per avviare la riproduzione e rilevare gli errori che si verificano quando viene un tentativo di riproduzione (automatico) e non riesce. Esistono varie soluzioni, che però non sono ideali. Un miglioramento al metodo play() sottostante per risolvere questa incertezza è ritardato da tempo e ora è arrivato alla piattaforma web, con un'implementazione iniziale in Chrome 50.

Una chiamata play() su un elemento <video> o <audio> ora restituisce una chiamata Promise. Se la riproduzione ha esito positivo, la Promessa viene rispettata, mentre in caso di esito negativo viene rifiutata insieme a un messaggio di errore che spiega l'errore. Questo ti consente di scrivere codice intuitivo come il seguente:

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.
    });
}

Oltre a rilevare se il metodo play() è riuscito, la nuova interfaccia basata su Promise consente di determinare quando il metodo play() è riuscito. In alcuni contesti un browser web potrebbe decidere di ritardare l'avvio della riproduzione, ad esempio Chrome per computer desktop non avvierà la riproduzione di un <video> finché la scheda non sarà visibile. La funzionalità Promise non sarà soddisfatta fino all'avvio effettivo della riproduzione, il che significa che il codice all'interno di then() non verrà eseguito finché non è in corso la riproduzione dei contenuti multimediali. I metodi precedenti per determinare l'esito positivo di play(), ad esempio l'attesa per un determinato periodo di tempo per un evento playing e l'ipotesi di un errore se non viene attivato, sono suscettibili di falsi negativi negli scenari di riproduzione ritardata.

Abbiamo pubblicato un esempio live di questa nuova funzionalità. Visualizzala in un browser come Chrome 50 che supporti questa interfaccia basata su Promise. Attenzione: la pagina riprodurrà automaticamente la musica quando la visiti. (a meno che, ovviamente, non sia così!)

Zona pericolosa

<source> in <video> fa una promessa di play() che non rifiuta mai

Per <video src="not-existing-video.mp4"\>, la promessa play() viene rifiutata come previsto perché il video non esiste. Per <video><source src="not-existing-video.mp4" type='video/mp4'></video>, la promessa play() non viene mai rifiutata. Ciò si verifica solo se non ci sono origini valide.

Bug di Chromium