Corsi on-line

HTML5: aggiungere dinamicamente informazioni ad un video

In questo blog e più in generale in Rete si possono trovare numerose indicazioni su come inserire didascalie e sottotitoli ad un video grazie ad HTML5, nella maggior parte dei casi gli esempi proposti sono basati su contenuti statici e predefiniti; in linea di massima parliamo infatti di procedure basate sull’impiego dell’API Text Track che, attraverso la funzione addTextTrack() consente di includere uno o più testi in un video.

HTML5A tale funzione possono essere passati tre diversi parametri e cioè, il tipo di contenuto da associare al filmato (ad esempio tracks per le didascalie), l’etichetta del contenuto e la lingua di riferimento; a tal proposito si osservi il codice dell’esempio seguente:

var video = document.getElementById("video"), track; 
video.addEventListener("loadedmetadata", function() { 
   track = this.addTextTrack("captions", "Italian", "it"); 
});

Ora, perché i contenuti vengano aggiunti dinamicamente è possibile richiamare un file WebVTT (il “Web Video Text Tracks Format” del W3C) che li contenga; fin qui nessun problema se non fosse per il fatto che l’inclusione di quest’ultimo tramite attributo src (ad esempio track.src = "captions/file-it.vtt") non sembrerebbe essere supportata pienamente da alcun browser per la navigazione su Internet.

Come superare questo limite legato alla compatibilità con i Web standards più recenti? Ian Devlin, sviluppatore del team di “HTML5 Doctor”, ci propone una soluzione del genere:

video.addEventListener("loadedmetadata", function() { 
   track = document.createElement("track"); 
   track.kind = "captions"; 
   track.label = "Italian"; 
   track.srclang = "it"; 
   track.src = "captions/file-it.vtt"; 
   track.addEventListener("load", function() { 
      this.mode = "showing"; 
      video.textTracks[0].mode = "showing"; // per Firefox
   }); 
   this.appendChild(track); 
});

In pratica la procedura prevista consiste innanzitutto nella creazione di un nuovo elemento track, fatto questo si potrà settare su showing il mode del video che di default è nascosto (hidden) e infine si potrà associare la didascalia al video tramite il metodo appendChild(); uno dei vantaggi di tale soluzione sta nel fatto che essa si dimostrerebbe funzionante anche senza l’ausilio della Text Track API.

Via Ian Devlin

Post correlati
I più letti del mese
Tematiche