Generare un elemento track HTML
Oppure incollare il testo dei sottotitoli
Opzioni
I sottotitoli sono per gli spettatori che sentono l’audio e hanno bisogno delle parole: una traduzione, o la stessa lingua scritta. I sottotitoli per non udenti sono per chi non sente, quindi portano anche ciò che il suono dice a tutti gli altri: la musica, una porta, un telefono che squilla. Lo stesso file può servire a entrambi gli scopi, ed è per questo che la pagina lo chiede invece di indovinare, e il valore non può essere cambiato in seguito dall’interno dell’elemento. Descrizioni, capitoli e metadati non sono offerti: nessuno di essi può essere riempito con il contenuto di un file di sottotitoli.
Un tag di lingua breve come en, en-GB o pt-BR, che nomina la lingua delle parole nei sottotitoli, non quella del video. Una traccia che si dichiara di sottotitoli è tenuta a nominare una lingua, quindi svuotare questo riquadro ripiega su en anziché omettere l’attributo: e poiché ogni attributo viene stampato nell’uscita, si può vedere il ripiego prima di incollare qualsiasi cosa.
Testo libero: English, English (SDH), Français. È la riga da cui uno spettatore sceglie quando una pagina offre più di una traccia, quindi scriverla come la riconoscerebbe il pubblico. Svuotare il riquadro rimuove del tutto l’attributo anziché scriverne uno vuoto, il che restituisce la denominazione al lettore; un’etichetta vuota metterebbe una riga senza nome in quel menu.
Attivo, i sottotitoli compaiono appena il video parte. Un elemento multimediale può avere una sola traccia predefinita, quindi lasciarlo disattivato quando la pagina ne porta già una: una seconda traccia che si dichiara predefinita fa scegliere ai lettori quella sbagliata, mentre non essere predefinita significa solo che lo spettatore la attiva da sé.
La frequenza dei fotogrammi in cui sono contati i tempi. Nelle pagine di formato è quella che serve a MicroDVD, perché memorizza i tempi come numeri di fotogramma. Nelle pagine della frequenza dei fotogrammi è la cadenza con cui è stato temporizzato il file — la versione per cui sono stati creati i sottotitoli — e il secondo riquadro della pagina accetta la frequenza del video con cui verranno usati. 23,976, 24, 25, 29,97, 30, 50, 59,94 e 60 sono quelle comuni. Sbagliarla sposta l’intera timeline, e nelle pagine della frequenza dei fotogrammi la sposta di un rapporto anziché di un importo fisso.
Questa pagina mette i tuoi sottotitoli dentro un unico elemento HTML che puoi incollare in una pagina. Quello che esce è una sola riga `<track>` con il WebVTT incorporato nell’attributo `src`, così il testo dei sottotitoli viaggia insieme al markup: nessun secondo file da caricare, nessun percorso da indovinare e nessun modo per un lettore di finire a cercare qualcosa che non c’è.
L’incorporamento è il punto della pagina, e il motivo sta in come i browser trattano i file locali. Una traccia viene scaricata, non disegnata, e il browser rifiuta quello scaricamento quando la pagina è stata aperta da disco: un `<track src="film.vtt">` in una pagina salvata sul desktop non mostra nulla — nessun errore a schermo, un menu dei sottotitoli vuoto e una riga nella console che quasi nessuno apre. Un URI `data:` non viene mai scaricato, perché il testo è già nell’attributo, e quindi funziona anche lì. Il prezzo è la dimensione: ogni spazio e ogni a capo del WebVTT diventano tre caratteri. È un prezzo che vale la pena pagare, perché l’elemento esiste proprio per funzionare da solo.
Gli attributi vengono dalle caselle del pannello, perché nessuno di essi è leggibile dal file. `kind` è il più importante: subtitles è una traduzione per chi non segue la lingua dell’audio, captions è la versione più completa che porta anche musica ed effetti sonori per chi non sente. Un file pieno di `[door slams]` e di note musicali potrebbe essere l’una o l’altra cosa, e solo tu sai a quale pubblico era destinato, quindi la pagina lo chiede invece di indovinare. Gli altri tre sono la lingua del testo, il nome mostrato nel menu dei sottotitoli del lettore e se la traccia debba aprirsi da sola. Due caselle si comportano diversamente quando le svuoti: togliere il nome del menu rimuove l’attributo, perché l’etichetta è facoltativa e ometterla lascia la scelta al lettore; svuotare la lingua no, perché una traccia che si dichiara subtitles deve nominare una lingua e la casella vuota ripiega su `en` invece di produrre un elemento privo di qualcosa che è tenuto ad avere. Nessuna delle due è una sostituzione silenziosa, dato che l’uscita stampa ogni attributo. Il testo dentro l’elemento è scritto dallo stesso scrittore WebVTT delle pagine di conversione, quindi un file arrivato come WebVTT conserva la riga `WEBVTT`, i blocchi di commento e di stile e le impostazioni per blocco che decidono dove si posa una riga sullo schermo. Nulla del file viene cambiato e nulla viene caricato: parole, tempi e formattazione escono nello stato in cui sono entrati.
Esempi
Un file SRT, con le caselle predefinite
Ingresso
1
00:00:01,000 --> 00:00:03,000
The room is dark.
2
00:00:04,000 --> 00:00:06,000
Nobody came.
Uscita
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en" label="English" default>
Una riga in uscita, e l’intero file è dentro di essa: %0A è un a capo e %20 è uno spazio, quindi il WebVTT viaggia nell’attributo src invece di stare in un file accanto alla pagina. I quattro attributi sono le quattro caselle: la lingua del testo, la riga che lo spettatore sceglie nel menu dei sottotitoli del lettore e default, che è ciò che fa aprire la traccia da sola. I numeri dei blocchi dell’SRT sono conservati come identificatori dei blocchi.
Un file WebVTT entra come lo stesso WebVTT
Ingresso
WEBVTT - exported from the editing room
NOTE The first pass was done by hand.
STYLE
::cue { color: #f2f2f2; }
intro
00:00:01.000 --> 00:00:03.000 align:start position:10%
The room is dark.
2
00:00:04.000 --> 00:00:06.000
Nobody came.
Uscita
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%20-%20exported%20from%20the%20editing%20room%0A%0ANOTE%20The%20first%20pass%20was%20done%20by%20hand.%0A%0ASTYLE%0A%3A%3Acue%20%7B%20color%3A%20%23f2f2f2%3B%20%7D%0A%0Aintro%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%20align%3Astart%20position%3A10%25%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en-GB" label="English (UK)" default>
Tutto ciò che un file WebVTT contiene fuori dai suoi blocchi sopravvive: il commento sulla riga WEBVTT, il blocco NOTE, il blocco STYLE che decide l’aspetto dei sottotitoli nel lettore, la riga con il nome del blocco e l’impostazione align:start position:10% (il %25 è un segno di percentuale, codificato perché un segno di percentuale nudo non è ammesso dentro un URI). Un file entrato come WebVTT esce come quello stesso WebVTT. Le due caselle dicono en-GB e English (UK), perché questa copia era destinata a un pubblico britannico: nulla nel file lo diceva.
Sottotitoli per chi non sente
Ingresso
1
00:00:01,000 --> 00:00:03,000
[door slams]
The room is dark.
2
00:00:04,000 --> 00:00:06,000
♪ Nobody came ♪
Uscita
<track kind="captions" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0A%5Bdoor%20slams%5D%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0A%E2%99%AA%20Nobody%20came%20%E2%99%AA%0A" srclang="en" label="Tom & "the boss"" default>
Il file è pieno di effetti sonori e di musica, che è esattamente ciò a cui serve kind="captions" — i sottotitoli per chi non sente — e la casella è l’unico posto dove dirlo. Separatamente, il nome del menu è stato digitato come Tom & "the boss" ed esce come Tom & "the boss": una virgoletta non protetta avrebbe chiuso l’attributo in quel punto e trasformato il resto del nome in attributi illeggibili sull’elemento.
Tre caselle svuotate o disattivate
Ingresso
1
00:00:01,000 --> 00:00:03,000
A cold night,
and no heating.
2
00:00:04,000 --> 00:00:06,000
Every night this week?
Uscita
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AA%20cold%20night%2C%0Aand%20no%20heating.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0AEvery%20night%20this%20week%3F%0A" srclang="en">
Tre caselle cambiate, tre risultati diversi, perché HTML chiede cose diverse. Il nome del menu è sparito del tutto dall’elemento: è facoltativo, e ometterlo lascia la decisione al lettore. La casella della lingua è vuota e produce comunque srclang="en": una traccia che si dichiara subtitles deve nominare una lingua, quindi non esiste una lingua vuota, e il ripiego è visibile nell’uscita. L’interruttore default è spento e anche quell’attributo è sparito, quindi questa traccia non si aprirà da sola, che è la direzione sicura quando una pagina ne porta più di una.
Domande frequenti
Mi serve ancora un file .vtt accanto alla pagina?
No, ed è il punto della pagina. Il WebVTT è scritto nell’attributo src come URI data:, quindi l’elemento porta con sé i propri sottotitoli. Puoi incollarlo in una pagina, inviare il file per posta o spostarlo in un’altra cartella e i sottotitoli appaiono lo stesso. L’unica cosa a cui fare attenzione è che il tutto è un solo attributo: se copi soltanto una parte di quella riga lunga, hai rotto l’URI e la traccia resterà vuota.
Funziona se apro il file HTML direttamente dal mio computer?
Sì, e proprio quel caso è il motivo per cui la pagina incorpora i sottotitoli. Quando una pagina è aperta da disco, il browser rifiuta di scaricare un file di traccia separato, quindi una traccia che punta a film.vtt non mostrerebbe nulla: nessun errore visibile, solo un menu dei sottotitoli vuoto. Un URI data: non viene scaricato affatto, il testo è già nell’attributo, quindi funziona allo stesso modo sul desktop e su un server.
Perché l’uscita è molto più lunga del mio file di sottotitoli?
Perché ogni carattere che non sia una lettera o una cifra diventa tre caratteri in un URI: uno spazio è %20 e un a capo è %0A. Un file da cento kilobyte diventa qualche centinaio. Base64 sarebbe più corto, intorno a un terzo in più dell’originale invece del doppio, ma il risultato sarebbe un muro di caratteri illeggibili; così invece puoi guardare l’attributo src e riconoscere il tuo dialogo al suo interno, il che vale la dimensione extra per un file che stai per incollare in una pagina e mantenere a mano.
Perché non c’è più l’attributo label dopo che ho svuotato la casella?
Perché un nome del menu è facoltativo in HTML, e ometterlo non significa «nessun nome»: significa che il lettore decide cosa mostrare nel suo menu dei sottotitoli, di solito la lingua. Svuotare la casella rimuove quindi l’attributo invece di scriverne uno vuoto, dato che label="" apparirebbe come una riga bianca in quel menu. Puoi rimettere un nome quando vuoi: è una stringa semplice e nient’altro nella pagina dipende da lei.
Che differenza c’è tra subtitles e captions qui?
A chi sono destinati. I subtitles presuppongono che lo spettatore senta l’audio e abbia bisogno delle parole tradotte o scritte; i captions presuppongono che non lo senta, quindi portano anche le informazioni che a chi sente arrivano dal suono: musica, porte, un telefono che squilla. Un file può servire all’uno o all’altro scopo, e lo stesso testo è in entrambi, quindi la pagina non può capire quale intendi. Non si può cambiare nemmeno dopo, dentro l’elemento, perciò scegli quello che serve al tuo pubblico.
Quali altri tipi di traccia avete lasciato fuori?
Tre: descriptions, che narrano l’immagine per chi non la vede; chapters, che è navigazione e non sottotitoli e ha una pagina propria su questo sito; e metadata, che non viene mostrato a nessuno. Nessuno dei tre può essere riempito con il contenuto di un file di sottotitoli, quindi offrirli permetterebbe solo di costruire un elemento che non mostra nulla. I due offerti sono i due a cui un file di sottotitoli può davvero servire.
Qualcosa nei miei sottotitoli cambia durante il passaggio?
Il testo, i tempi e la formattazione restano invariati, e un file WebVTT conserva i propri blocchi di commento, stile e regione oltre alle impostazioni per blocco. Quello che cambia è la forma: le righe vengono riscritte nella sintassi WebVTT, che è quella che i lettori leggono, quindi la virgola di 00:00:01,000 in un file SRT diventa un punto. Un byte viene eliminato di proposito — il marcatore iniziale che dice che il file è UTF-8 — perché l’URI data: dichiara da sé la codifica e altrimenti il marcatore apparirebbe come tre caratteri estranei in testa.