Con l’avvento di questo nuovo linguaggio abbiamo visto entrare all’interno delle pagine web file multimediali che permettono di passare delle informazioni direttamente al browser. Infatti, anche se fino ad ora è stato possibile visualizzare file video ed ascoltare quelli audio, non è stato plausiibile ottenere delle informazioni riguardanti questi file perché venivano rinchiusi all’interno di plugin di terze parti.
Mentre oggi, grazie all’avvento di HTML5, i nostri browser sono in grado di conoscere informazioni rilevanti sul file che viene riprodotto, come per esempio la lunghezza del video/audio, il volume, il tempo di visualizzazione trascorso e molte altre cose...
Quindi, al giorno d’oggi possiamo permettere al browser di riprodurre nativamente i file video ed audio senza alcun problema.
Vi assicuro che mi sarebbe piaciuto scrivere la frase precedente e mostrarvi come sia possibile implementare questi nuovi elementi ma, purtroppo, la guerra tra i browser ha colpito anche questo campo ed ha specificato quali codec possiamo utilizzare nativamente.
I codec video consigliati sono h.264, Theora e VP8; mentre per l’audio possiamo utilizzare: mp3, AAC e Vorbis. Molto probabilmente, nella vostra carriera di sviluppatori non ne avete mai incontrato tanti e tutti insieme ma non dovete spaventarvi, ne esistono molti di più!!
Siccome questa non è una lezione sui codec, non affronteremo l’argomento su “come comprimere un file video/audio” ma, piuttosto, vi darò una 'dritta' sui codec con maggiore compatibilità con i vari browser:
Come potete vedere la compatibilità è differente a seconda del browser, ma il contenitore WebM sta andando per la maggiore ed inoltre è open source!
Adesso che abbiamo analizzato velocemente le parti più complicate andiamo a vedere come sia possibile inserire questi file multimediali.
Video
Dopo tanto parlare ecco a voi presentato l’elemento video. Come potete notare, questo elemento non soltanto accetta un buon numero di parametri, ma inoltre permette di collegare i differenti file video che vi daranno la possibilità di aumentare la compatibilità con i vari browser.
Come possiamo immaginare, il discorso “Mi dispiace...” verrà visualizzato soltanto da quei browser che non comprendono l’elemento di tipo video/mp4 e video/ogg.
Mentre gli attributi width e height, che identificano rispettivamente la larghezza e l'altezza del video, sono intuitivi, ben più curioso è l’attributo controls, grazie al quale possiamo mostrare i controlli di default per il video che saranno anche personalizzabili con l'ausilio di JavaScript. Senza questi parametri, l’unico modo per mandare in play il video è attraverso l’attributo autoplay.
Come vedremo tra poco, esiste anche un attributo preload che ci permette di caricare in anticipo il file video al termine del caricamento della pagina.
Audio
Anche l’elemento audio accetta sia diversi parametri che la possibilità di collegare differenti sorgenti audio, ma la cosa più interessante è che ci permette di includere delle chiamate JavaScript o Flash che verranno lette soltanto da quei browser che non supportano tale elemento.
L’attributo controls si comporta come quello già visto per l’elemento video ma in questo caso il parametro preload, con valore auto, lascerà al browser la scelta di caricare l’intero file mp3 (per una miglior riproduzione) o soltanto i metadata del file audio. Oltre a questo attributo è possibile utilizzare autoplay per lanciare l’audio nel momento in cui viene terminato il caricamento della pagina.