Controllare i metadati di un video lato client con jQuery

Controllare i metadati di un file multimediale prima di effettuare l’upload su un server può sembrare semplice a prima vista, tuttavia non tutti i dati si possono estrarre tramite le comodissime file API di html. Alcuni, come ad esempio la durata, non si possono ottenere in modo diretto.

Se abbiamo la fortuna di lavorare con formati video supportati dal browser, possiamo utilizzare una versione modificata della soluzione che Derick Bailey ha trovato per i file audio: l’idea di base è caricare il video locale nella pagina e leggere gli attributi che il player del browser espone tramite le sue api.

 

Prima di tutto all’interno del body inseriamo il campo di input:

Sempre nel body, inseriamo un tag video e facciamo in modo che resti nascosto:

Inseriamo i campi per mostrare i dati estratti:

Infine bisgna creare lo script opportuno per fare “la magia”:

Lo script si divide essenzialmente in due parti:

La prima (quella sotto), cattura l’evento che si scatena ad una modifica del campo di input, pesca i dati che può tramite le file API, crea un url al file locale e lo carica nel tag video.

La seconda parte, aspetta che il browser abbia finito di caricare i metadati del file ed infine estrae e visualizza il resto dei dati.

Potrebbe sembrare una soluzione poco elegante ma di fatto al momento è l’unica che sono riuscito a trovare.

Nota: non tutti i tipi di video sono supportati, dipende dal vostro browser.

Qui sotto potete vedere lo script in azione: