Gestione dei sottotitoli con il tag video di HTML5

di Daniele Bochicchio, in HTML5, Nuovi tag,

Il tag video di HTML5 consente di definire, direttamente all'interno della pagina, un contenuto di tipo multimediale, senza necessità di plug-in esterni.
Una caratteristica interessante è quella di poter inserire i sottotitoli e lasciare al browser l'onere di visualizzarli.

<video controls autoplay loop src="video.mp4">
  <track kind="subtitles" srclang="en" label="English" src="video.en.vtt">
  <track kind="subtitles" srclang="it" label="Italiano" src="video.it.vtt" default>
</video>

Il file referenziato è nel formato WebVTT e bisogna ricordarsi di registrare l'apposito MIME type text/vtt nel server, altrimenti alcuni browser non scaricheranno correttamente il file e non verranno visualizzati i sottotitoli.

Ecco un esempio del file referenziato, dove sono riportati in sequenza gli intervalli e il testo da visualizzare:

WEBVTT

00:00:00.000 --> 00:00:10.000
Esempio di sottotitolo sfruttando il tag <track>

00:00:10.000 --> 00:00:20.000
Questo è un sottotitolo con HTML5


Le specifiche WebVTT sono disponibili qui (ancora in draft):
http://dev.w3.org/html5/webvtt/

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi