JavaScript: gestire l'evento readyState degli elementi multimediali in modo cross-browser

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(() => {
		let dur = element.duration;
		if( !isNaN( dur ) ) {
			clearInterval( timer );
			callback( element );
		}
		
	}, 500);	
};

Esempio d'uso:

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

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