Elementi <source> e <track>

8.1 Elemento <source>

Gli elementi <source> e <track> giocano un ruolo importante in HTML5, assicurando il supporto di vari formati multimediali e migliorando l'accessibilità del contenuto. Analizziamoli più in dettaglio.

L'elemento <source> è utilizzato all'interno degli elementi <audio>, <video>, e <picture> per indicare diverse fonti di contenuti multimediali. Questo permette ai browser di scegliere il formato più adatto per la riproduzione, garantendo compatibilità cross-browser e supporto per diversi dispositivi.

Sintassi

    
      <source src="URL" type="MIME-type">
    
  

Attributi

• src: specifica il percorso del file multimediale
• type: specifica il tipo di file e il suo MIME-type. Aiuta il browser a determinare se supporta il formato

Esempi di utilizzo:

Esempio 1: All'interno dell'elemento <video>

In questo esempio, il browser tenterà di riprodurre il primo formato supportato.

    
      <video controls>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.webm" type="video/webm">
        <source src="movie.ogv" type="video/ogg">
        Il tuo browser non supporta la riproduzione video.
      </video>
    
  

Esempio 2: All'interno dell'elemento <audio>

    
      <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        <source src="audio.ogg" type="audio/ogg">
        Il tuo browser non supporta la riproduzione audio.
      </audio>
    
  

Esempio 3: All'interno dell'elemento <picture>

    
      <picture>
        <source srcset="image-320w.jpg" media="(max-width: 320px)">
        <source srcset="image-640w.jpg" media="(max-width: 640px)">
        <source srcset="image-1280w.jpg" media="(max-width: 1280px)">
        <img src="image-1280w.jpg" alt="Esempio immagine">
      <picture>
    
  

Vantaggi dell'uso di <source>

• Compatibilità cross-browser: permette di specificare diversi formati, garantendo la riproduzione su diversi browser
• Ottimizzazione per dispositivi: possibilità di specificare file diversi per dispositivi e condizioni diverse

8.2 Elemento <track>

L'elemento <track> è usato per aggiungere tracce di testo al contenuto multimediale, come sottotitoli, sottotitoli per sordi o ipoudenti, descrizioni, capitoli e metadati. Si trova all'interno degli elementi <audio> o <video>.

Sintassi

    
      <track src="URL" kind="type" srclang="language" label="label">
    
  

Attributi

1. src: indica il percorso del file della traccia di testo.
2. kind: definisce il tipo di traccia di testo. Valori possibili:
   • subtitles: sottotitoli per la traduzione dei dialoghi
   • captions: sottotitoli per sordi o ipoudenti, includono descrizioni dei suoni
   • descriptions: audiodescrizioni per persone ipovedenti
   • chapters: capitoli per la navigazione nel contenuto multimediale
   • metadata: metadati che possono essere usati in JavaScript
3. srclang: definisce la lingua della traccia di testo (es. en per inglese, es per spagnolo).
4. label: nome descrittivo della traccia di testo, che appare nel menu di selezione delle tracce.
5. default: indica che questa traccia dovrebbe essere attivata di default

Esempi di utilizzo:

Esempio 1: Sottotitoli per video

In questo esempio, il video ha due tracce di sottotitoli: in inglese e spagnolo. L'utente può scegliere la traccia desiderata dal menu.

    
      <video controls>
        <source src="movie.mp4" type="video/mp4">
        <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
        <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Español">
        Il tuo browser non supporta la riproduzione video.
      </video>
    
  

Esempio 2: Sottotitoli per sordi o ipoudenti

Questa configurazione aggiunge una traccia di sottotitoli per sordi o ipoudenti in inglese.

    
      <video controls>
        <source src="movie.mp4" type="video/mp4">
        <track src="subtitles_en.vtt" kind="captions" srclang="en" label="subtitles">
        Il tuo browser non supporta la riproduzione video.
      </video>
    
  

Vantaggi dell'uso di <track>

• Miglioramento dell'accessibilità: sottotitoli e descrizioni rendono il contenuto accessibile a persone sorde, ipoudenti e ipovedenti
• Supporto della multilingua: possibilità di aggiungere sottotitoli in diverse lingue
• Informazioni aggiuntive: capitoli e metadati permettono di organizzare e strutturare il contenuto multimediale

8.3 Formato file per le tracce di testo

Le tracce di testo sono solitamente salvate nel formato WebVTT (Web Video Text Tracks). Questo formato è supportato dalla maggior parte dei browser moderni ed è facilmente leggibile sia dalle macchine che dalle persone.

Esempio di file WebVTT (subtitles_en.vtt)

    
      WEBVTT
      1
      00:00:00.000 --> 00:00:05.000
      Welcome to our video presentation.

      2
      00:00:05.000 --> 00:00:10.000
      We hope you find this informative and enjoyable.
    
  

Esempi di utilizzo complesso degli elementi <source> e <track>

    
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <title>Video con più sorgenti e tracce di testo</title>
        </head>
        <body>
          <h1>Esempio di video con più sorgenti e tracce di testo</h1>
          <video controls width="600" poster="posterimage.jpg">
            <source src="movie.mp4" type="video/mp4">
            <source src="movie.webm" type="video/webm">
            <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
            <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
            <track src="captions_en.vtt" kind="captions" srclang="en" label="English Captions">
            <track src="descriptions_en.vtt" kind="descriptions" srclang="en" label="English Descriptions">
            Your browser does not support the video element.
          </video>
        </body>
      </html>