JavaScript: verificare l'avvenuto caricamento di un file multimediale con le Promise e il modello async/await

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 al posto di NaN.

'use strict';

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

Esempio d'uso:

'use strict';

(async function() {

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

    try {
        let isReady = await mediaReady(video);
        if(isReady) {
            //...
        }
    } catch(err) {
        //...
    }

})();