Leggere i dati dei video con jQuery

Con jQuery possiamo leggere i dati dei video presenti in una pagina web.

I video HTML5, inseriti tramite l'elemento video, dispongono di un API che ci permette di accedere non solo alle azioni più comuni di questi elementi, ma anche ai metadati in essi contenuti. jQuery in tal senso è un comodo strumento per poterli gestire.

Supponiamo di voler leggere la proprietà duration di un video. Istintivamente saremmo portati a scrivere il seguente codice:


var $video = $( "#movie" ),
	video = $video[0]; // elemento DOM

console.log( video.duration ); // undefined

Perché il valore è undefined? Il motivo è semplice: dobbiamo aspettare che i metadati del video siano accessibili sfruttando un evento specifico, ossia l'evento loadedmetadata:


$video.on( "loadedmetadata", function() {
	console.log( this.duration ); // valore
});

Una volta compreso l'uso di questo evento risulta più semplice gestire i video HTML5.