JavaScript: come usare la proprietà readyState degli elementi multimediali in modo coerente

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.

const isMediaReady = ( element, callback ) => {
    const timer = setInterval(() => {
		const dur = element.duration;
		if( !isNaN( dur ) ) {
			clearInterval( timer );
			callback( element );
		}
		
	}, 1000);	
};

Esempio d'uso:

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

isMediaReady( video, el => {
	el.play();	
});