• Regolamento Macrocategoria DEV
    Prima di aprire un topic nella Macrocategoria DEV, è bene leggerne il suo regolamento. Sei un'azienda o un hosting/provider? Qui sono anche contenute informazioni per collaborare con Sciax2 ed ottenere l'accredito nella nostra community!

Guida Sottotitoli per video con HTML5

PSiimo

Utente Master
Autore del topic
7 Febbraio 2009
2.503
85
Miglior risposta
0
Attraverso HTML5 per l’elemento video prevede la possibilità di aggiungere a corredo del filmato una o più tracce con sottotitoli.
Si tratta di un’opzione che accresce notevolmente l’accessibilità, sia perché così si può rendere fruibile il contenuto audio, attraverso il testo in sovrimpressione, ai non udenti, sia perché si può fornire una valida alternativa a chi non parla la lingua originale del filmato.
L’implementazione avviene attraverso l’uso dell’elemento HTML5 track. Al momento esso è supportato dai principali browser, con l’eccezione Firefox. Il browser più aderente alla specifica è comunque Internet Explorer, che ha introdotto il supporto ai filmati sottotitolati nella versione 10 e che lo ha migliorato ulteriormente nella versione 11.


Creare i sottotitoli

Nel processo che stiamo per esaminare il passo forse più complesso è proprio il primo: la creazione del file di testo con i sottotitoli. Lo scenario ideale è quello in cui si abbia a disposizione almeno una trascrizione testuale dei contenuti audio da convertire poi in uno dei due formati di sottotitoli supportati dalla specifica e dai browser. Mancando la trascrizione si dovrà ovviamente procedere preliminarmente a crearla.

La trascrizione andrà poi suddivisa in battute (in inglese cues) e ciascuna battuta andrà quindi sincronizzata con l’audio originale. È indubbiamente un processo complesso, specie se il filmato è lungo, ma esistono comunque dei tool che possono aiutare.


Uno di questi è
Perfavore, Entra oppure Registrati per vedere i Link!
, liberamente fruibile sul sito di Microsoft. Produce direttamente una traccia di sottotitoli sincronizzata in uno dei due formati supportati dalla specifica,
Perfavore, Entra oppure Registrati per vedere i Link!
e
Perfavore, Entra oppure Registrati per vedere i Link!
.

Il primo dei due formati gode del supporto sia del W3C , essendo usato, ad esempio, per i sottotitoli su siti come Netflix e Hulu. Sintatticamente si presenta come un vero e proprio linguaggio di markup XML.
WebVTT (Web Video Text Tracks) è invece, attualmente, l’opzione preferibile per ottenere il miglior supporto cross-browser. Come formato è tra l’altro molto meno complesso (seppure meno potente) di TTML. Una traccia WebVTT, infatti, non è altro che un file di testo UTF-8 con estensione .vtt. All’interno del file il testo risulta suddiviso in battute e per ciascuna battuta viene indicato il tempo iniziale e quello finale, ovvero il momento in cui la battuta compare sullo schermo e quello in cui scompare. I tempi vanno separati con due trattini e il simbolo di maggiore -->.

Il formato con cui viene espresso il tempo è molto rigido. Devono essere indicate, con due cifre, le ore e i minuti, con tre cifre i millesimi dopo i secondi. Le cifre vanno separate con un punto. Ecco come si presenta il file .vtt con la traccia in italiano:

HTML:
Perfavore, Entra oppure Registrati per vedere i codici!

Il formato WebTTV è nato come una versione per il web del formato per sottotitoli SubRip. La conversione da una traccia di sottotitoli .srt in .vtt è dunque piuttosto semplice.

Per qualsiasi cosa sono a vostra disposizione
;) :bye: