JavaScript: gestire il caricamento degli elementi multimediali con le Promise

In un web ideale tutti i browser supporterebbero in modo coerente la proprietà readyState degli elementi audio e video. Purtroppo non è così. Come fare quindi?

La soluzione è interrogare ad intervalli regolari la proprietà duration. Quando un elemento video o audio è pronto per essere riprodotto questa proprietà assume come valore un numero in luogo del valore NaN.

'use strict'; 

const mediaReady = element => {
    return new Promise((resolve, reject) => {
	    const timer = setInterval(() => {
		    const duration = element.duration;
		    if(!isNaN(duration)) {
			    clearInterval(timer);
			    resolve(element);
		    }
		
	    }, 1000);
    });	
};

Esempio d'uso:

const video = document.querySelector('#video');

mediaReady(video).then(el => {
	el.play();	
});