La riproduzione automatica di audio e video sul web è una funzionalità potente, ma soggetta a restrizioni diverse su piattaforme diverse.
Attualmente, la maggior parte dei browser desktop consente sempre alle pagine web di iniziare
<video> o <audio> la riproduzione tramite JavaScript senza interazione da parte dell'utente.
Tuttavia, la maggior parte dei browser mobile richiede un gesto esplicito dell'utente prima che possa avvenire la riproduzione avviata da JavaScript. In questo modo, gli utenti di dispositivi mobili, molti dei quali pagano per la larghezza di banda o potrebbero trovarsi in un ambiente pubblico, non avviano accidentalmente il download e la riproduzione di contenuti multimediali senza interagire esplicitamente con la pagina.
In passato è stato difficile determinare se è necessaria l'interazione dell'utente per avviare la riproduzione e rilevare gli errori che si verificano quando si tenta la riproduzione (automatica) e non va a buon fine. Esistono diversi aggiustamenti, ma non sono ideali. È da tempo necessario un
miglioramento del metodo play() di base per risolvere questa incertezza, che ora è stato implementato nella
piattaforma web, con un'implementazione iniziale in
Chrome 50.
Ora una chiamata play() a un elemento <video> o <audio> restituisce una
promessa. Se la riproduzione va a buon fine, la promessa viene soddisfatta. Se la riproduzione non va a buon fine, la promessa viene rifiutata insieme a un messaggio di errore che spiega il problema. In questo modo puoi 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() è andato a buon fine, la nuova interface basata su Promise consente di determinare quando il metodo play() è andato a buon fine. Esistono contesti in cui un browser web può decidere di ritardare l'inizio della riproduzione. Ad esempio, Chrome per computer non inizierà la riproduzione di un <video> finché la scheda non sarà visibile. La promessa non verrà soddisfatta finché la riproduzione non sarà effettivamente iniziata, il che significa che il codice all'interno di then() non verrà eseguito finché i contenuti multimediali non saranno riprodotti. I metodi precedenti per determinare se play() ha esito positivo, come attendere un determinato periodo di tempo per un evento playing e presumere un errore se non viene attivato, sono soggetti a falsi negativi negli scenari di riproduzione differita.
Abbiamo pubblicato un esempio pratico di questa nuova funzionalità. Visualizzalo in un browser come Chrome 50 che supporta questa interface basata su Promise. Tieni presente che la pagina riprodurrà automaticamente la musica quando la visiti. (A meno che, ovviamente, non sia così.)
Zona pericolosa
<source> in <video> fa sì che la promessa play() non venga mai rifiutata
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 sono presenti origini valide.