HTML5: l'elemento track

L'elemento Track di HTML5 consente di aggiungere del testo ai file in riproduzione multimediale e visualizzarlo nel lettore video HTML5, senza necessità di script o software aggiuntivo.

Il testo può includere sottotitoli, didascalie, descrizioni, capitoli o metadati. 

In altre parole, l'elemento <track> permette di visualizzare in tempo reale ulteriori risorse di testo che si allineano con il file audio della timeline de video.

 

L'elemento track è un elemento figlio dell'elemento video, in modo analogo all'elemento source usato per specificare i file video. In questo esempio, l'attributo src dell'elemento video è un file chiamato "video.mp4". Gli attributi controls, autoplay e loop abilitano i controlli di riproduzione incorporati del lettore, avviano il video all'apertura della pagina e riproducono il video in modo ripetuto. L'origine dell'elemento track è un file chiamato "en_track.vtt". Gli attributi srclang, label e kind definiscono la lingua (en), un nome descrittivo per il menu di selezione dei sottotitoli (English) e il tipo di file di testo (sottotitoli). L'attributo default specifica che questo file di traccia deve essere attivo e visualizzato nel lettore quando inizia il video. Se l'attributo default viene omesso, l'utente deve scegliere la traccia dal menu di selezione dei sottotitoli nel lettore video.

 

 

<video width="640" height="320" controls>

  <source src="some_video.mp4" type="video/mp4">

  <source src="some_video.ogg" type="video/ogg">

  <track src="some_video_subtitles.srt"

         kind="subtitles"

         srclang="en"

         label="English_subs">

</video>

 

kind

src

srclang

label

default

È possibile usare più di un file di testo programmato— per fornire agli utenti più lingue o commenti alternativi. Se usi più tracce, devi impostare la traccia di default da usare se la pagina non ne specifica una o se l'utente non ha selezionato una lingua. Nel lettore video l'utente potrà scegliere altre tracce tramite il menu di selezione dei sottotitoli incorporato.

Nell'esempio seguente viene mostrato un elemento video con tre elementi Track.

 

 <video id="video1" controls autoplay loop>

      <source src="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" type="video/mp4" >

      <track id="enTrack" src="entrack.vtt" label="English" kind="subtitles" srclang="en" default> 

      <track id="esTrack" src="estrack.vtt" label="Spanish" kind="subtitles" srclang="es">

      <track id="deTrack" src="detrack.vtt" label="German" kind="subtitles" srclang="de">

      HTML5 video not supported

    </video>