
guide
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Per aggiungere i sottotitoli ai nostri video possiamo avvalerci dello standard HTML5 e dell’elemento ‘track’, ormai disponibile su tutti i browser moderni.
La specifica 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. Gli esempi allegati all’articolo sono stati testati con le ultime versioni di Chrome, Opera, Safari e Internet Explorer, compresa, per quest’ultimo, la preview release di IE11.
Vediamo ora come procedere per aggiungere i sottotitoli a un filmato (negli esempi è stato usato un breve video in formato MP4 tratto dalla serie televisiva Breaking Bad).
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 è HTML5 Video Caption Maker, liberamente fruibile sul sito di Microsoft. Produce direttamente una traccia di sottotitoli sincronizzata in uno dei due formati supportati dalla specifica, TTML-1.0 e WebVTT.
Il primo dei due formati gode del supporto sia del W3C sia dell’industria, 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 che abbiamo usato nel nostro esempio:
WEBVTT
00:00:02.000 --> 00:00:05.980
Chi pensi di star guardando?
00:00:06.000 --> 00:00:08.980
Hai idea di quanti
soldi faccio in un anno?
00:00:09.000 --> 00:00:11.980
Perfino se te lo dicessi
non ci crederesti.
00:00:12.000 --> 00:00:13.980
Sai cosa succederebbe
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. Basta tenere conto delle differenze tra i due formati come sono specificate in questo articolo di Wikipedia.
Una volta creata la traccia (o le tracce) con i sottotitoli non resta che collegarle al filmato. Da qui in avanti si lavora con il codice HTML5.
Ecco come abbiamo definito l’inserimento del filmato nel nostro esempio iniziale:
<video controls autoplay>
<source src="danger.mp4" type="video/mp4">
<track id="enTrack" src="entrack.vtt" label="English" kind="captions" srclang="en" default>
<track id="itTrack" src="ittrack.vtt" label="Italiano" kind="captions" srclang="it">
</video>
Come si vede, l’elemento track
è, con l’elemento source
, un elemento figlio di video
.
Per quest’ultimo abbiamo specificato due opzioni. Con l’attributo autoplay
specifichiamo che il filmato deve partire senza l’intervento dell’utente; con l’attributo controls
facciamo sì che il player abbia in evidenza i controlli consueti. È un’opzione da usare sempre se si inseriscono i sottotitoli, perché la loro disattivazione o la scelta tra le varie lingue avviene tramite un apposito controllo.
Nello screenshot è possibile vedere, insieme alla barra di avanzamento del tempo, al pulsante per il volume e a quello per la visualizzazione a tutto schermo, il pulsante (CC) per la gestione dei sottotitoli.
Questo pulsante compare quando, insieme all’elemento source
con cui colleghiamo il filmato, inseriamo uno o più elementi track
per i sottotitoli.
L’elemento track
è accompagnato da una serie di attributi:
Attributo | Descrizione |
---|---|
src |
deve contenere il riferimento al file .vtt o TTML con i sottotitoli. |
label |
è un testo di ausilio, quello che viene mostrato nel player nel menu di scelta dei sottotitoli. |
srclang |
attributo del tutto opzionale, è l’indicazione con il codice internazionale della lingua della traccia. |
kind |
specifica la tipologia della traccia; i valori possibili sono captions (sottotitoli con gli effetti audio di accompagnamento come quelli per non udenti del Televideo), subtitles (sottotitoli solo dei dialoghi e del parlato), metadata (tracce per dati di accompagnamento non visuali), description (descrizione per la sintesi vocale), chapters (indicazione dei capitoli). Usando una delle tre ultime tipologie i sottotitoli non sono visualizzati, pertanto nella pratica comune si sceglierà sempre tra captions e subtitles . |
default |
se specificato, questo attributo indica al browser quella che è la traccia di default da visualizzare; è un attributo opzionale, perché comunque si potrà selezionare la traccia dall’apposito controllo, ma non aderendo alla specifica browser come Safari, Chrome e Opera non mostrano i sottotitoli se non si indica almeno una traccia con questo attributo. |
Nel nostro esempio, dunque, verrà mostrata come predefinita la traccia in inglese e si potrà attivare quella in italiano agendo sul pulsante dei sottotitoli.
Fin qui la configurazione di base. Per gli sviluppatori la nota positiva è che per l’elemento track
è disponibile una API completa con cui è possibile interagire tramite Javascript con la traccia dei sottotitoli, persino a livello delle singole battute. Anche rispetto a questo fattore, Internet Explorer è il browser che offre al momento la gamma più ampia di opzioni e potenzialità. Tutti gli esempi che vedremo da qui in avanti sono riadattamenti del codice disponibile sul sito di Microsoft nella documentazione per l’elemento track
.
Nel secondo esempio abbiamo inserito in calce al video un box con un pulsante. Al click carichiamo come contenuto del box l’intera traccia testuale suddivisa in battute.
Ecco il codice HTML:
<video id="myVideo" controls autoplay>
<source src="danger.mp4" type="video/mp4">
<track id="enTrack" src="entrack.vtt" label="English" kind="subtitles" srclang="en" default>
<track id="itTrack" src="ittrack.vtt" label="Italiano" kind="subtitles" srclang="it">
</video>
<p><button onclick="getCues();">Mostra i sottotitoli</button></p>
<div id="display"></div>
E questo il semplice script con la funzione getCues()
richiamata con il pulsante:
function getCues() {
var myTrack = document.getElementById("enTrack").track;
var myCues = myTrack.cues;
for (var i = 0; i < myCues.length; i++) {
document.getElementById("display").innerHTML += (myCues[i].text + "<br/>");
}
}
Lo script identifica la traccia in inglese tramite l’id ad essa assegnato (enTrack
) e la assegna alla variabile myTrack
. Viene poi creato un array a partire dalle battute (cues
) che sono quindi inserite all’interno del box con id display
.
Nel terzo esempio si sfrutta l’evento cuechange
, che scatta al passaggio da una battuta all’altra, per visualizzare nel box le singole battute man mano che vengono mostrate sul video. Ecco lo script:
document.addEventListener("DOMContentLoaded", function () {
var track = document.getElementById("itTrack");
track.addEventListener("cuechange", function () {
var myTrack = this.track;
var myCues = myTrack.activeCues;
if (myCues.length > 0) {
var disp = document.getElementById("display");
disp.innerText = myCues[0].text;
}
}, false);
}, false);
Questo esempio può fornire la base di partenza per un passo ulteriore. Possiamo mostrare le battute direttamente in un box esterno al video, senza che appaiano in sovrimpressione. Basterà settare il valore per l’attributo kind
sul valore metadata
, come nella quarta demo.
<video id="myVideo" controls autoplay>
<source src="danger.mp4" type="video/mp4">
<track id="enTrack" src="entrack.vtt" label="English" kind="metadata" srclang="en">
<track id="itTrack" src="ittrack.vtt" label="Italiano" kind="metadata" srclang="it" default>
</video>
<div id="display"></div>
È possibile anche creare un menu per la scelta dei sottotitoli al du fuori del player, come nell’ultimo esempio (che funziona solo su Internet Explorer).
A questo ampio set di potenzialità, Internet Explorer 11 aggiunge la possibilità di creare dinamicamente a runtime tracce di sottotitoli e battute, anche di modificarle. È infatti il primo browser ad adeguarsi alla specifica per i cosiddetti TextTrack Object dinamici.
Se vuoi aggiornamenti su Sottotitoli per video con HTML5 inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
Chi usa la struttura di selezione in PHP attraverso il costrutto IF riesce a definire quali istruzioni eseguire nel caso […]
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Fare gli e-commerce developer con Magento, Prestashop e WooCommerce.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
Impariamo ad utilizzare Takamaka, una blockchain Java Full Stack, per scrivere codice Java installabile ed eseguibile su una blockchain
StandardJS è uno strumento in ambiente Node.js, per la definizione ed il controllo di uno standard di codifica in JavaScript.
Mandriva ha annunciato ufficialmente la versione 2007 della sua distribuzione. Desktop tridimensionali e un parco software di primo piano. Le principali novità in attesa dei download
Guida a Red Hat Quarkus, uno stack Java Kubernetes nativo pensato per applicazioni serverless e per la realizzazione di microservizi rapidi ed ottimizzati. Una piattaforma concepita per accedere in ambiente Cloud mettendo a disposizione un framework orientato ai microservizi, come ad esempio Spring Boot o Micronaut