Visita Orebla.it su Facebook Segui Orebla.it su Twitter Vedi i video su YouTube di Orebla.it Unisciti alle cerchie di Orebla.it
DOVE TI TROVI: \\ Home Page\\Guida su HTML 5: il TAG <video>, visualizzare video senza plugin

Guida su HTML 5: Il TAG <video>

autore: Orebla
26/02/11

Introduzione al TAG <video></video>:

Partiamo con una prima guida su come utilizzare le novità introdotte dalla specifica HTML 5.

Sicuramente, una delle novità più interessanti della versione 5 di HTML è la possibilità di visualizzare un video, sul proprio browser, senza l'ausilio di Plug-in esterni.

Questa importante novità porta un'ondata di interoperabilità fra i diversi browser ma sopratutto fra le diverse piattaforme su cui girano i software. Evitare l'utilizzo di plug-in esterni, come può essere Flash di Adobe, permette di garantire una maggiore usabilità a livello mondiale.

È anche vero che dovete scordarvi le funzioni che il lettore di video di Adobe ci aveva abituato. Funzioni come la modifica della risoluzione, la possibilità di visualizzare video di diverse dimensioni non saranno più presenti nel lettore. I lettori dei diversi browser hanno gli strumenti essenziali: pulsante di avvio e pausa filmato, la barra di riproduzione, indicatore del tempo di durata del filmato e il controller per l'audio. Tutto questo se si utilizza il lettore senza modificarne l'aspetto con Javascript. Io parlerò sempre, in questa guida, delle funzioni base del TAG!

Allo stato attuale i browser che supportano, nativamente, il tag video sono:

  • Chrome 3+
  • Firefox 3.5+
  • Internet Explorer 9+
  • Opera 10
  • Safari 3.2+

ATTENZIONE: L'attuale incompatibilità totale con i browser di oggi con la specifica HTML 5 potrebbe NON farvi visualizzare correttamente gli esempi inseriti in questa guida!

IL TAG <VIDEO>:

Impariamo ad usare <video></video> con un esempio:

<video src="video.estensione"></video>

Questi pochi caratteri di codice basterebbero per far visualizzare il video al browser correttamente. Mancano, però, tutti gli attributi, nella sintassi essenziale che vi ho scritto prima, che il TAG contiene nella specifica del W3C.

Indicare solamente la sorgente da dove è possibile recuperare il video per la riproduzione, e nessun'altra opzione, non è mai la soluzione giusta per diversi motivi, continuando la lettura di questa guida scoprirete, poi, il perchè!

Anzitutto non specificando nessun attributo,tutti i browser, a parte IE9 che fa come vuole lui (come sempre aggiungerei), non visualizzano all'utente nessun controllo del video. Per tanto noi vediamo un semplice filmato senza possibilità di fermarlo, vedere a che punto è, oppure modificare l'audio!

ATTRIBUTO CONTROLS:

Aggiungiamo un primo, e fondamentale, attributo: "controls".

<video src="video.estensione" controls>
</video>

In questa pagina potete visualizzare un primo esempio di come il video viene riprodotto: Test HTML TAG VIDEO CON CONTROLS.

Come avrete notato ogni browser dona all'aspetto della finestra video un design diverso. Nelle specifiche, fino ad ora, non è stato definito come il browser deve mostrare il lettore video; per tanto ogni sviluppatore lo elabora a proprio piacimento.

Potete anche notare come Google Chrome mostri la barra dei controlli bloccata, mentre su Opera compare al passaggio del mouse!

IL LETTORE SU GOOGLE CHROME:

HTML VIDEO su Chrome

IL LETTORE SU OPERA 11:

HTML VIDEO su Opera 11

ATTRIBUTO POSTER:

Questo attributo serve per mostrare un'immagine rappresentativa del filmato. Nella sintassi precedente il lettore video ci mostrava, prima che avviassimo la riproduzione, il primo fotogramma del video (lo potete vedere anche nelle precedenti immagini). Può capitare, a volte, che tale fotogramma non sia rappresentativo del filmato e faccia confondere l'utente sul reale contenuto del filmato.

Per questo motivo la specifica HTML 5 ci permette di selezionare e mostrare un'immagine che per noi rappresenta meglio il filmato, eccone la sintassi:

<video src="video.estensione" poster="video1.jpg" controls>
</video>

Ecco come si presenta la pagina: HTML TAG VIDEO CON POSTER.

Vedete che, ora, l'immagine mostrata non è più il primo fotogramma ma ciò che è indicato nell'attributo poster.

Voglio fare una precisazione: l'attributo poster indica, anche, al browser di che dimensioni deve essere il player video. Per tanto se il nostro filmato è di dimensioni 400x300 pixel e ci mettiamo un'immagine poster di 200x200 il "primo" lettore mostrato sarà di queste ultime dimensioni! Verrà poi ritrasformato nella giuste dimensioni una volta che il browser ha decodificato il filmato, ma prima rimane delle dimensioni 200x200 pixel!

ATTRIBUTO PRELOAD:

Preload serve ad indicare al browser se, una volta aperta la pagina, il video verrà in automatico pre-caricato; questo per rendere, una volta che l'utente ha avviato la riproduzione, il video più fluido senza le interruzioni di attesa di caricamento del video.

Può essere una buona soluzione ma assume anche aspetti negativi. Mettiamo per esempio che il visitatore non voglia riprodurre il video che noi facciamo pre-caricare al browser. Se l'attributo "preload" è attivo e l'utente poi non guarda il video, abbiamo fatto consumare banda al visitatore e al server inutilmente! Tornando al discorso che il TAG VIDEO diventerà utilissimo per i dispositivi mobili, tale azione comporta un consumo eccessivo della connessione mobile che di solito ha un limite mensile molto basso!

Per tanto se attivate questo attributo dovete essere ben sicuri che l'utente che visita la pagina voglia poi guardare il video!

L'attributo "preload" può assumere tre stati:

  1. none: ovvero nessun pre-caricamento; il video verrà caricato una volta che l'utente avvia la riproduzione. Se l'attributo "preload" non viene dichiarato è l'opzione di default;
  2. metadata: questa è una via di mezzo fra le tre. Con questo stato attivo, il browser, analizzerà il filmato mostrando all'utente i dati essenziali, cioè: durata, dimensioni e prima immagine del video;
  3. auto: il browser avvia, all'apertura della pagina, il caricamento del video in background; questo anche se il visitatore non guarderà poi il video. Questo è lo stato di default dell'attributo "preload". Scrivere 'preload="auto"' e scrivere "preload" è la stessa cosa.

Ecco un esempio in cui il video viene precaricato all'apertura della pagina: HTML TAG VIDEO CON PRELOAD SU AUTO.

ATTRIBUTI AUTOPLAY E LOOP:

Come potete ben intuire questi due attributi servono per avviare in automatico il video, "autoplay", e far riprodurre sempre il video con "loop". Sono tutti e due attributi booleani, cioò significa che accettano solamente due parametri: acceso, spento; true, false; 1, 0 e via dicendo.

Vediamo la sintassi:

<video src="video.estensione" autoplay controls>
</video>

Qui potete visualizzarne un esempio di avvio automatico del video all'apertura della pagina: HTML TAG VIDEO CON AUTOPLAY ATTIVO.

Non vi indico l'esempio per "loop" perchè è identico a quello di "autoplay"!

Voglio fare una precisazione: l'attributo "autoplay" obbliga il browser a caricare, non appena la pagina viene aperta, il video nella propria cache. Per tanto utilizzare "autoplay" con "preload" è assolutamente inutile, dato che il browser già caricherà il video senza bisogno che glielo indichiamo noi! Non è però un errore di sinstassi ma solo una ripetizione inutile! Ricordatevi di pensare sempre al precedente appunto che ho scritto per l'attributo "preload" verso i nostri visitatori!

ELEMENTO <SOURCE>:

Fino ad ora vi ho mostrato come il TAG VIDEO "cerchi" il file video tramite l'attributo "src", come accade per il TAG immagini.

Bisogna specificare che esiste anche un altro metodo, che è l'elemento SOURCE:

<video controls>
<source src="video.estensione" type="mime type e codec utilizzato">
</video>

Questo elemento ci viene molto utile se vogliamo inserire diversi tipi di video per poter permettere a tutti gli utenti, che utilizzano diversi browser, di poter guardare il video senza problemi (vedi il paragrafo dopo per approfondire l'argomento della "guerra" dei codec che c'è fra i diversi browser!).

Ecco come poter indicare al browser l'utilizzo di diversi tipi di video:

<video controls>
<source src="video.mp4" type='video/mp4; codecs="avc.42E01E, mp4a.40.2"'>
<source src="video.webm" type='video/webm; codecs="vp8, vorbis"'>
</video>

Così diamo la possibilità al browser di selezionare il video con i codec da lui supportati per permettere all'utente di visualizzare il video!

ATTRIBUTO CODECS E L'INDECISIONE GENERALE DEI BROWSER:

Arriviamo al punto più scottante di questa guida: il supporto dei formati video nei diversi browser.

Poteva il W3C creare una standard che potesse andare bene, e mettere d'accordo, tutti i browser?!? Ovviamente no. Così ci ritroviamo che i 4 browser più importanti: Internet Explorer, Firefox, Chrome e Opera supportano formati video diversi!

Per potere avere un quadro completo della situazione in cui ci troviamo guardate la tabella finale della pagina relativa ad HTML 5 VIDEO su uno speciale che ho scritto: Compatibilità dei codec video sui browser per HTML 5.

Comunque senza fare troppa confusione procedo con il mostrarvi come specificare al browser in che codec il video è stato creato. Ma prima di tutto vi pongo una domanda: Perchè indicare al browser il codec?? Voi penserete: non può trovarlo da se?!?

In effetti il browser, se noi non gli indichiamo il codec si arrangia a trovarlo. Questo però implica che il video venga, in parte, caricato e analizzato con consumo di banda sia per i visitatori che per il server! Il browser per capire di che codec si tratta deve per forza "riprodurne" un pezzetto in background.

Per ovviare a questo consumo di banda, inutile, dobbiamo indicare noi al browser il codec!

Ecco la sintassi:

<video controls>
<source src="video.mp4" type='video/mp4; codecs="avc.42E01E, mp4a.40.2"'>
<source src="video.webm" type='video/webm; codecs="vp8, vorbis"'>
</video>

Facciamo "esplodere" il testo per spiegarlo al meglio:

type='video/mp4;

qui indichiamo il mime type del video.

codecs="avc.42E01E, mp4a.40.2"'

di seguito abbiamo il codec del video!

Finisce qui la, prima, guida di base su come utilizzare il TAG VIDEO di HTML 5. Per qualsiasi altra specifica vi rimando alla documentazione ufficiale del W3C su HTML 5 VIDEO.

 

 

 






Articoli utili:
Jailbreak iOS 10: tweaks compatibili

Recensione iPhone 6

IPhone 7 uscito, novita, prezzi