JavaScript: capire quando un elemento audio o video è stato caricato

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.

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

Esempio d'uso:

var video = document.querySelector( "#video" );

isMediaReady( video, function( el ) {
	el.play();	
	
});