Page 58 - Guida tascabile HTML5

type="audio/ogg" per i file audio .ogg;

type="video/webm" per i file video .webm;

type="video/mp4" per i file video .mp4;

type="video/ogg" per i file video .ogv.

Sorgenti diverse per contesti diversi

La specifica HTML5 getta le basi per una gestione avanzata dei contenuti
multimediali, prevedendo l’attributo media da utilizzare all’interno dei tag <source>.

Con l’adeguata sintassi sarà possibile specificare più media query per consentire

al browser di caricare la versione del documento multimediale più adatta al
contesto in cui deve essere visualizzata: potrebbe essere predisposto un file a

risoluzione ridotta per l’utilizzo in mobilità e uno a piena risoluzione per la

visualizzazione su display di dimensioni più generose.

<source src="filmato_mobile.mp4" type="audio/mp4"media="(max-width:640px)">

<source src="filmato_full.mp4" type="audio/mp4"media="(min-width:640px)">

ATTENZIONE Nel momento in cui scriviamo, il supporto dell’attributo media da parte
dei principali browser è ancora limitato e in evoluzione.

Nel listato di esempio vengono messe a disposizione due versioni del video

sorgente: la prima sarà caricata dal browser quando la finestra di visualizzazione
ha una larghezza inferiore a 640 pixel, la seconda (certamente con risoluzione

migliore) sarà caricata quando l’area a disposizione è maggiore.

NOTA È possibile creare regole complesse concatenando più parametri: per esempio
l’orientamento del dispositivo mobile, la risoluzione, la dimensione del display e così
via, per ottimizzare l’esperienza dell’utente e il trasferimento di dati. Nell’appendice

dedicata alle media query trovate una panoramica sui possibili parametri.

Sottotitoli per i contenuti multimediali

Per garantire all’utente un’esperienza ancora più completa è possibile nidificare
all’interno dei tag <audio> e <video> uno o più tag <track>, per fare riferimento a una

traccia testuale associata all’elemento multimediale: possono essere sottotitoli o

altri contenuti pertinenti.

<video controls>
<source src="filmato.mp4" type="audio/mp4">
<track src="sub_it.vtt" kind="subtitles" srclang="it" label="IT">
</video>