Inserire un video in un sito con HTML 5
Con l’avvento di HTML 5 per inserire un video possiamo fare a meno di Flash o di caricarlo prima su piattaforme come You Tube o Vimeo per poi condividerlo. E’ stato infatti creato il tag <video> attraverso il quale è possibile inserire video senza supporti esterni.
IL TAG.
Il tag è molto semplicemente questo:
<video src="test.mp4" controls="controls"> </video>
Con “controls” si vogliono inserire i tasti di controllo automatici, infatti i browsers leggono in automatico il codice generando i pulsanti con loro plugin interni.
Sarebbe troppo facile però se bastasse inserire questo tag per risolvere il tutto. Dobbiamo infatti affrontare alcune problematiche riguardanti la compatibilità con i browser.
QUALI BROWSER SUPPORTANO HTML 5:
QUALI FORMATI UTILIZZARE.
Non tutti i browsers si avvalgono dello stesso formato video, infatti anche qui bisogna fare una suddivisione. Ad esempio iPad e Microsoft vogliono il formato .mp4.Per accontentare tutti inseriremo a cascata diversi formati in modo tale da accontentare tutti o quasi, è importante mettere al primo posto il formato .mp4 perché Apple lo richiede.
<video controls="controls">
<source src="video/test.mp4" type="video/mp4" /> <source src="video/test.webm" type="video/webm" /> <source src="video/test.ogg" type="video/ogg" /> il tuo browser non supporta HTML5 </video>
CON QUESTA TABELLA POTETE VEDERE IL PERCHE’ DELLA SCELTA DI QUESTI FORMATI RISPETTO AD ALTRI COME .VLC PER ESEMPIO
QUALE PLAYER UTILIZZARE
Tra i 9 player inclusi in html 5 vi parlo di quelli che secondo me funzionano meglio e utilizzo abitualmente:
Il primo in assoluto è VIDEO JS
Si appoggia a un file javascript e uno css, non richiede framework ed è molto semplice da installare.
Il secondo invece, che si avvale di un unico codice html 5 è VIDEO FOR EVERYBODY
CONVERTITORE AUTOMATICO HTML 5
Esistono, per chi non vuole proprio saperne di cimentarsi nei passaggi mostrati in precedenza, dei convertitori gratuiti scaricabili in pochi minuti sul web e che funzionano perfettamente. Vi segnalo questo:
Guarda anche: i migliori Corsi di Web Design
Promozioni
Potrebbe interessarti
Commenti