Audio e video - HTML5 con CSS e JavaScript - page 189

Tabella 9.1 - MIME type di esempio per una risorsa video.
Inoltre, la scelta della sorgente può essere suggerita con l'attributo media , da aggiungere
sempre sul tag source . Attraverso le media query (utilizzate soprattutto con i CSS e intro-
dotte nel capitolo 5 ) possiamo indicare quali condizioni devono essere soddisfatte per sce-
gliere una sorgente piuttosto che un'altra. In aggiunta, all'indirizzo http://aspit.co/
a0r possiamo trovare le specifiche e le numerose espressioni supportate da CSS3 in mag-
gior dettaglio.
Nell'esempio 9.5 utilizzamo la condizione min-device-width per impostare la
scelta del file di nome hi-res.mp4 , solo se la risoluzione del dispositivo supera almeno
800 pixel in larghezza.
Esempio 9.5
<video controls>
<source src="hi-res.mp4"
media="screen AND (min-device-width: 800px)" />
<source src="low-res.mp4" />
</video>
Quanto abbiamo visto finora è tutto basato su markup ma, essendo questi dei normali ele-
menti della pagina, possiamo intervenire attraverso JavaScript per fornire funzionalità più
avanzate.
Controllare la riproduzione da JavaScript
I tag audio e video presentano, oltre a specifiche di markup, anche le interfacce DOM
che permettono ai linguaggi di scripting, come JavaScript, di manipolare e gestire la risorsa
multimediale attraverso metodi, proprietà ed eventi.
Tra le ragioni che ci possono spingere all'uso dello scripting c'è sicuramente il fatto
che la UI e l'esperienza dei controlli predefiniti dal browser non sono sempre sufficienti,
oltre a variare da browser a browser.
Sicuramente, il fatto che il layout e i colori cambino a seconda del browser presenta un
problema relativamente all'uniformità di rappresentazione del player multimediale, perciò
ricorrere a JavaScript è quasi inevitabile.
Se poi vogliamo creare video che partono in base ad azioni dell'utente (come nei gio-
chi, per esempio) la via dello scripting è l'unica percorribile.