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(video.duration); // valore
});
Una volta compreso l'uso di questo evento risulta più semplice gestire i video HTML5.