Corsi on-line

Aggiungere sottotitoli ai video con HTML5

HTML5 permette di associare dei sottotitoli ai filmati tramite il formato WebVTT (Web Video Text Tracks), quest’ultimo è ancora in fase di definizione per quanto riguarda le specifiche, ma buona parte delle funzionalità concepite in fase di progettazione sono già state sufficientemente implementate da poter essere utilizzate in produzione, sia per le Web applications che per i siti Internet recanti dei video tra i loro contenuti.

video_h5

Ora, in questo post analizzeremo la procedura necessaria per aggiungere dei sottotitoli ad un filmato utilizzando esclusivamente elementi propri di HTML5; a questo proposito, la prima operazione da compiere sarà quella di delimitare i contenuti gestiti tramite l’elemento video che sarà utile anche per definire le dimensioni (nel nostro caso “560*315 px”) relative al player nel quale il filmato verrà mostrato:

<video width="560" height="315" controls>
....
</video>

Si potrà quindi passare alla definizione delle sorgenti video, cioè i file che verranno trasmessi tramite il player; uno stesso film, tanto per fare un esempio, potrà essere proposto in diversi formati, quindi utilizzeremo l’elemento source per introdurre ciascun file tramite l’attributo src e type per specificarne il relativo formato (nel nostro esempio Mp4, OGG e WebM):

<video width="560" height="315" controls>
 <source src="cartella_video/Tetsuo.mp4" type="video/mp4">
 <source src="cartella_video/Tetsuo.ogg" type="video/ogg">
 <source src="cartella_video/Tetsuo.webm" type="video/webm">
....
</video>

Fatto questo si potrà passare ai sottotitoli per i quali è disponibile l’elemento track;

<video width="560" height="315" controls>
 <source src="cartella_video/Tetsuo.mp4" type="video/mp4">
 <source src="cartella_video/Tetsuo.ogg" type="video/ogg">
 <source src="cartella_video/Tetsuo.webm" type="video/webm">
 <track label="English" kind="subtitles" srclang="en" src="cartella_sottotitoli/tetsuo-en.vtt" default>
 <track label="Italiano" kind="subtitles" srclang="it" src="cartella_sottotitoli/tetsuo-it.vtt">
 <track label="Español" kind="subtitles" srclang="es" src="cartella_sottotitoli/tetsuo-es.vtt">
</video>

Nello specifico, label ha il compito di “etichettare” la risorsa associando ad essa un nome con il quale identificarla; kind indica invece il tipo di risorsa (nel nostro caso “subtitles”, ma potrebbe anche essere “captions” per le didascalie); srclang è un attributo che specifica la lingua dei sottotitoli tramite un codice univoco composto da due lettere (ad esempio “it” per l’Italiano); src definisce il percorso ai sottotitoli da utilizzare, mentre default imposta la lingua predefinita per i sottotitoli in mancanza di una scelta.

Per approfondire: manuale W3C

Post correlati
I più letti del mese
Tematiche