Video in HTML5

HTML5 ha introdotto nuovi elementi e nuovi attributi per poter mostrare e gestire un video senza preoccuparsi se nel PC di chi visualizza la pagina web ci siano o meno i programmi e/o i plug-in istallati, Quello che serve è tutto all’interno del browser.
Di seguito la descrizione con esempi dei nuovi elementi usabili per i video. Nelle attuali versioni di alcuni browser si riscontra che non tutti si comportano allo stesso modo ma possiamo dire che a differenza delle versioni precedenti tutti riescono a mostrare il video cambiando soltanto quello che è l’interfaccia grafica di controllo.

Vi segnalo questo sito che vi permette direttamente on line di convertire video e audio da e verso qualsiasi formato.

<video>…</video>

L’elemento <video> richiama un file di tipo video facendo uso dell’attributo srcpraticamente allo stesso modo di come si è abituati ad usare il tag img. Al momento sono tre i formati video supportati: MP4, Ogg e WebM.

Potrei quindi usare uno dei tre formati con questa sintassi:

Questo il risultato:

Non vedete nulla? è probabile perchè non tutti i browser supportano il formato mp4. Ma allora qualcuno penserà che anche con html5 non è cambiato nulla, tranquilli, la soluzione c’è, ho fatto volutamente questo passaggio per farvi capire meglio lo scopo dell’elemento source spiegato subito sotto. Prima però assicuriamoci che il vostro browser riconosca il tag video fate un click sul pulsante Check Video:

<source>

L’elemento <source> si adopera all’interno dell’elemento <video>, richiama tramite il suo attributo src il tipo di file video. Praticamente la stessa cosa vista sopra ma con la notevole differenza che è possibile dichiarare all’interno di <video> più di un solo source. Così facendo i formati video dichiarati saranno più di uno e sarà il browser a mostrare quello da lui stesso riconosciuto ignorando gli altri. A differenza di src per video che richiamava soltanto il nome del file, con source si deve specificare tramite l’attributo type, anche il tipo di codifica mine:

MP4 = video/mp4
Ogg = video/ogg
WebM = video/webm

Potrei quindi usare tutti e tre i formati con questa nuova sintassi:

Questo il risultato, sono sicuro che anche il vostro browser vi mostrerà il filmato.

Questi sotto i tre formati presi singolarmente, al solo scopo di vedere quali dei tre il tuo browser supporta.

Formato mp4

Formato ogg

Formato webm

In tutti gli esempi sopra ho fatto uso dell’attributo controls anche se nel codice degli esempi non è riportato, lo andremo a vedere subito, mi è servito per mostrare l’interfaccia grafica offrendovi la possibilità di avviare e fermare il filmato stesso.

controls

L’attributo controls permette di avere un’interfaccia grafica che cambia a seconda del browser e che serve per fermare/avviare il filmato, controllare il volume dell’audio, passare a schermo intero, avere dei sottotitoli ed altro ancora.

Questo il risultato:

Portate il cursore del mouse sopra l’interfaccia grafica, vedrete la possibilità di controllare il volume, mettere il video in pausa, riavviarlo, passare a tutto schermo ecc. ecc. La qualità e la durata del filmato sono volutamente ridotte per non gravare sulle risorse del mio spazio web, tenete sempre in considerazione il consumo di banda usando filmati di lunga durata e con ottima qualità video.

whidt e hight

Gli attributi whidt e hight servono per specificare le misure in pixel per larghezza ed altezza del filmato. Conviene specificarle sempre, anche nel caso in cui non si volesse ingrandire o ridurre le dimensioni originali, questo aiuterebbe il browser che diversamente dovrebbe calcolarselo da solo soltanto a caricamento del filmato avvenuto.

Questo il risultato con dimensioni doppie rispetto a quelli visti sopra:

Portate il cursore del mouse sopra l’interfaccia grafica, vedrete la possibilità di controllare il volume, mettere il video in pausa, riavviarlo, passare a tutto schermo ecc. ecc. La qualità e la durata del filmato sono volutamente ridotte per non gravare sulle risorse del mio spazio web, tenete sempre in considerazione il consumo di banda usando filmati di lunga durata e con ottima qualità video.

autoplay

L’attributo autoplay inserito nell’elemento <video> indica al browser di avviare automaticamente il video non appena questo è stato caricato.

loop

L’attributo loop inserito nell’elemento <video> indica al browser di ripetere la riproduzione del filmato all’infinito.

Questo il risultato:

Una volta avviato si fermerà soltanto cliccando sul pulsantino dell’interfaccia grafica.

muted

L’attributo muted inserito nell’elemento <video> indica al browser di riprodurre il filmato senza audio, muto.

Questo il risultato:

Una volta avviato si fermerà soltantoi cliccando sul pulsantino dell’interfaccia grafica.

poster

L’attributo poster inserito nell’elemento <video> indica quale immagine visualizzare al posto di quella del primo fotogramma del filmato stesso. Questa immagine resta visibile fino a quando non si avvia il filmato o automaticamente o facendo click sul pulsante [play] dell’apposita interfaccia grafica. Per i tipi di immagini che è possibile utilizzare e relativo percorso in cui si trovano, valgono le stesse regole più volte descritte in precedenza.

Questo il risultato:

Ho messo come immagine di copertina il logo di HTML5 che sparirà una volta avviato il filmato.

preload

L’attributo preload inserito nell’elemento <video> accetta tre valori: auto, metadate e none se non si specifica nulla, il solo preload assume come valore di default auto. Questi tre valori indicano al browser rispettivamente:

auto = carica il video durante il caricamento della pagina, si avranno così meno attese nella sua esecuzione.

metadate = non caricare il video durante il caricamento della pagina ma solo le sue informazioni compresa una eventuale immagine usata con poster.

none = non caricare il video se non quando sarà premuto il pulsantino [play] dell’interfaccia.

Questo il risultato:

Facciamo una considerazione, perchè mai dovrei caricare sempre nella memoria cache del browser il filmato, specialmente poi se ha notevoli dimensioni? Chi mi assicura che poi questo sarà visto da chi visita la mia pagina? Avrei uno spreco di banda e di risorse, meglio fare in modo di consumare queste risorse soltanto per chi è realmente interessato al filmato, quindi personalmente scelgo none.

src

L’attributo src inserito nell’elemento <video> o <source> indica il nome del file video completo di estensione ed eventuale percorso per raggiungerlo.

Nella prossima lezione vedremo tutto quello che serve per la gestione dei files audio.

Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.