I video HTML5, inseriti tramite l'elemento video, dispongono di API che ci permettono 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( video.duration ); // valore
});
Una volta compreso l'uso di questo evento risulta più semplice gestire i video HTML5.