Lezione 21 - Corso Avanzato Html

Sottotitoli per Video in Html

Sottotitoli per File Video

Tutti sappiamo cosa sono i sottotitoli di un video, ma come si realizzano nel linguaggio html non tutti lo sanno. Ora noi vedremo come si costruiscono.

Il tag per i sottotitoli si implementa con:
<track kind="subtitles" srclang="it" src="percorso_file_sottotitoli.vtt" label="italiano" default="">

dove:
- track (traccia) va a specificare che tipo di contenuti testuali dobbiamo allegare al video e dove si trovano questi contenuti. Il tag track è un tag abbastanza universale nel senso che oltre a mettere dei sottotitoli può essere utilizzato anche per descrizioni, effetti sonori, metadati ed altre immagini aggiuntive.

L'attributo
kind (genere) con il valore:
- captions (didascalie) indichiamo che oltre a poter inserire del dialogo può anche indicare eventuali effetti sonori ed altro.

Nel nostro caso, per l'attributo kind, lasciamo il valore
- subtitles (sottotitoli) per iserire dei sottotitoli.

Con l'attributo
srclang="it" indichiamo la lingua dei sottotitoli, in questo caso italiano.

L'attributo
default serve per impostare una lingua predefinita per i sottotitoli nel caso in cui il browser ne veda più di una.

Se ho impostato più di un sottotitolo aggiungiamo l'attributo
label="" che fa vedere all'utente la lingua con la quale è stato impostato il sottotitolo, in questo caso italiano.

I sottotitoli per un file video con estensione .vtt

Ora affrontiamo il passo successivo, ed è quello che bisogna creare un file di testo (con blocconote) con estrensione .vtt (salvato nella stessa cartella dove risiede il file del video ) e l'intestazione del file deve partire con WEBVTT (Web Video Text Tracks) che attualmente è l’opzione preferibile per ottenere il miglior supporto cross-browser.

Il file (con esteinsione .vtt) va costrutio impostando un cronometro che ha le ore i minuti i secondi e millisecondi, a questo punto di seguito scriviamo le frasi che devono essere lette dal browser e definiamo anche il tempo in cui quelle frasi vanno lette o scritte come sottotitoli.

Esempio del file di testo con estensione .vtt
WEBVTT

00:00:00.000 --> 00:00:01.800
<v Andrea> sali in macchina che andiamo</v>

00:00:01.800 --> 00:00:03.800
<v Antonio>dai accellera ci stanno seguendo</v>

00:00:03.800 --> 00:00:10.800
<v Antonio>gira a destra e entra in quel garage</v>

00:00:10.800 --> 00:00:15.800
<v Andrea>li abbiamo seminati</v>
Per alleggerire tutto questo lavoro, in rete, ci sono degli strumenti che possono aiutare molto.

I sottotitoli si possono personalizzare. Ad esempio se ci sono due persone che parlano, si può usare il tag
<v persona 1></v> (v voice sta per voce) <v persona 2></v> in questa maniera si possono differenziare le voci (lo vedete nel foglio di stile che è nel codice quì sotto).

Il codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Sottotitoli per Video</title>
  <meta charset="utf-8">
  <style type="text/css">
		::cue(v[voice="Andrea"]) {
			color: red;
			font-style: italic;
		}
		::cue(v[voice="Antonio"]) {
			color: cyan;
		}
 </style>
 </head>
 <body>
   <h1>Sottotitoli per video</h1>
   <video width="100%" controls="" autoplay="" poster="" loop="">
     <source src="percorso_file_video.mp4" type="video/mp4">
     <source src="percorso_file_video.ogg" type="video/ogg">
     <track kind="subtitles" srclang="it" src="percorso_file_sottotitoli.vtt" label="italiano" default="">
   </video>
 </body>                
</html>                    
Nel foglio di stile (che vediamo quà sopra nel codice) notiamo una nuova notazione ed è ::cue (cue point) che va ad indicare il punto interno del sottotitolo e come si può personalizzare con un foglio di stile (di questa notazione ne parleremo durante il corso del linguaggio CSS quando introdurremo nuovi concetti).