Associare sottotitoli e didascalie ai video html5

Vediamo come definire le regole sintattiche per aggiungere sottotitoli e didascalie in un filmato.
Associare sottotitoli e didascalie ai video html5

Sottotitoli e didascalie

Esistono diversi formati che permettono di gestire sottotitoli e didascalie in un video, il formato VTT e TTML. Con questi file si possono aggiungere dei sottotitoli al capitolo di un filmato, descrivere una scena, tradurre in lingue differenti un evento…

L’elemento track

Inseriamo un filmato all’interno del tag video ed innestiamo l’elemento track al suo interno per sincronizzare video e sottotitoli. Da precisare che attualmente è compatibile solo per IE10.

Questo elemento ha diversi attributi:

  • kind indica al browser la tipologia della traccia testuale e può avere diversi valori:
    • subtitle – Trascrizione o traduzione del dialogo nel video. I sottotitoli sono sovrapposti sul lettore video.
    • captions – Trascrizioni o traduzioni di dialoghi, effetti audio, spunti musicali o altre informazioni audio rilevanti, adatte quando il suono non è udibile o è assente. I sottotitoli sono sovrapposti sul lettore video.
    • descriptions – Descrizioni testuali del contenuto del video, utilizzabili per la sintesi vocale. Non sono visualizzate nel lettore video.
    • chapters – Titoli di capitoli, usati per spostarsi nel video. Non sono visualizzate nel lettore video.
    • metadata – Usati per gli script o per informazioni non visive. Non sono visualizzate nel lettore video.
  • src rappresenta il percorso del file.
  • srclang indica la lingua della traccia.
  • label è la descrizione della traccia che viene mostrata all’utente se sono previste più opzioni disponibili.
  • default imposta la traccia come default se ne è disponibile più di una.

Il codice seguente mostra un esempio pratico di implementazione dei sottotitoli in lingue diverse all’interno di un video.

<video src="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.webmvp8.webm" preload controls autoplay>
    <track kind="subtitles" src="title_en.vtt" srclang="en-us" label="English" default />
    <track kind="subtitles" src="title_pt.vtt" srclang="pt-br" label="Brazilian Portuguese" />
</video>

Come impostare un file VTT

Le componenti di un file con estensione .vtt indicano i testi che compaiono in un lasso di tempo, ed inizia sempre con la stringa WEBVTT.

WEBVTT

00:00.000 --> 00:08.081
Presentazione di Windows 8

00:08.081 --> 00:23.900
Visualizzazione delle schede nel browser IE10

00:23.900 --> 01:17.490
Internet Explorer 10 Test Drive

01:17.490 --> 01:34.826
Chrome è più lento!

01:34.826 --> 01:48.294
Fine della presentazione

Come impostare un formato TTML

Il formato .ttml è da anni utilizzato dall’industria professionale, è composto da codice xml, e come il VTT gestisce il testo da visualizzare in un determinato periodo di tempo.

<?xml version="1.0" encoding="UTF-8"?>
<tt xmlns="http://www.w3.org/ns/ttml" xml:lang="en" >
  <body>
    <div>
      <p begin="0.000s" end="08.081s">Presentazione di Windows 8</p>
      <p begin="8.081s" end="23.900s">Visualizzazione delle schede nel browser IE10</p>
      <p begin="23.900s" end="79.433s">Internet Explorer 10 Test Drive</p>
      <p begin="79.433s" end="95.901s">Chrome è più lento!</p>
      <p begin="95.901s" end="108.719s">Fine della presentazione</p>
</div>
  </body>
</tt>

Soluzioni Javascript

Attualmente non esiste browser che offra un supporto per i sottotitoli, ma possiamo utilizzare alcune librerie javascript che aggiungono questa funzionalità.

In che stato del processo si trova?

L’elemento track essendo parte integrante del tag video (in fase di working draft) definisce il suo stato ancora in fase di collaudo. Dobbiamo quindi pazientare ancora un pò per vederlo definitivamente in azione.

Fonti

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github