HTML5, audio e video senza l'utilizzo di plugin esterni - WeSchool


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.





















Videolezione "HTML e canvas: disegniamo con javascript"

























    const isRelatedVideo = 1;

 
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.


 


 

