Html5: L'Elemento Track

by admin admin Date: 26-06-2014 html5 tutorial tools strumenti trucchi manuale web design


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.
 

Esempio

 
<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>
 
L'elemento track accetta gli attributi seguenti.
 

kind

Definisce il tipo di contenuto di testo. Di seguito sono riportate le opzioni e l'uso come raccomandato dal w3c.
subtitles - Trascrizioni o traduzione del dialogo nel video. Destinati all'uso quando l'audio è disponibile ma non compreso (lingua errata). 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 quando il video 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.
Se l'attributo kind dell'elemento Track viene omesso, assume il valore predefinito subtitles.
 

src

URL del file di testo programmato. Il lettore accetta file in formato Web Video Text Track (WebVTT) o Timed Text Markup Language (TTML).
 

srclang

Lingua del file di testo programmato. Per scopi informativi. Non usato nel lettore.
 

label

Fornisce un'etichetta che può essere usata per identificare il testo programmato. A ogni traccia deve corrispondere un'etichetta univoca. Questa etichetta viene visualizzata nel menu di selezione dei sottotitoli mostrato nella schermata sopra.
 

default

Specifica l'elemento Track predefinito. Se non è specificato, non viene visualizzata alcuna traccia.
 
È 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>
 
 
by admin admin Date: 26-06-2014 html5 tutorial tools strumenti trucchi manuale web design visite : 2116  
 
 
 
 

Articoli correlati

    Java Algoritmi di Ordinamento: Selection Sort

    Andiamo oggi ad analizzare in dettaglio un algoritmo di ordinamento non molto efficiente ma piuttosto utilizzato in diversi ambiti. Stiamo parlando del Selection Sort. Vediamo meglio in dettaglio. Intuizione L'idea alla base è quella…

    Java algoritmi di ordinamento: Merge Sort

    Andiamo oggi ad analizzare uno tra i migliori algoritmi di ordinamento: il Merge Sort. Detto anche algoritmo per fusione, fa parte della famiglia dei Divide and Conquer proprio come il Quick Sort. A differenza del…

    Java algoritmi di ordinamento: Quick Sort

    Bentornati in questa nostra panoramica sul mondo Java! Oggi andremo a parlare di un algoritmo di ordinamento tra i più celebri. Il Quick Sort. A differenza del precedentemente trattato Bubble Sort, Quick…

    Flexbox, breve guida pratica

    In questo articolo impareremo a gestire gli elementi del nostro sito web in modo più efficiente ed efficace, grazie alla proprietà Flexbox. Ma attenzione, non stiamo parlando di una semplice proprietà…

    Come ridurre il consumo di memoria in Chrome

    Google ha iniziato a testare una nuova funzione chiamata "Tab Freeze" che mira a ridurre il consumo di memoria in Chrome. Ed è interessante, perché il browser ormai consuma parecchie…

    Deep web: 5 fatti di cui non si è a conoscenza

    Il deep web è uno spazio Internet in cui sono ospitati i contenuti che non compaiono nei motori di ricerca convenzionali, a causa di vari fattori che non devono necessariamente…

    Kali Nethunter, lo store per gli hacker etici

    A volte i pentesters o gli stessi programmatori di un azienda, hanno bisogno di analizzare gli URL o effettuare dei test di penetrazione. Lo scopo dell’attività è quindi quello di scovare…

    Google Maps: i migliori trucchi per padroneggiare l'applicazione in Android

    Le numerose funzionalità e opzioni disponibili su Google Maps potrebbero farvi pensare che sia un'applicazione difficile da gestire, ma nulla potrebbe essere più lontano dalla verità. Google ha sviluppato uno…

    Come scaricare i video di Twitter da PC, Android e iPhone

    I social network hanno incoraggiato gli utenti stessi a generare contenuti multimediali di ogni tipo. Fotografie e immagini, GIF e, naturalmente, video. Questo tipo di contenuti è disponibile in piattaforme…

    45 utili siti che avresti voluto conoscere prima

    In rete sono presenti talmente tanti siti web dedicati alla sviluppo web e alla grafica, che risulta molto complicato conoscerli tutti. Oggi, vi proponiamo una lista di siti web non…

    Paesaggi Parallax costruiti interamente con CSS e HTML

    Il CSS3 ha messo finalmente fine alle nostre frustrazioni: con delle semplici proprietà si aprono infatti infinite soluzioni. Una tra tante, la possibilità di inserire uno sfondo animato in una pagina…

    Le migliori librerie JavaScript del 2018

    Dal momento che Javascript si è rivelato il linguaggio di programmazione più popolare e ampiamente utilizzato nel 2018, l'ecosistema che si sviluppa intorno ad esso sta cominciando a diventare importante. JavaScript…