I Video HTML5 nei siti web

Negli ultimi 10 anni l’uso dei video nel web è letteralmente esploso.
Con l’aumentare della banda, e del numero di persone costantemente connesse a internet, siti come Youtube e Vime hanno catturato l’attenzione degli utenti web di tutto il pianeta. Prima di HTML5 per renderizzare un video online avevamo bisogno di Flash.

Attualmente sia Youtube che Vimeo continuano ad utilizzare questo approccio di default, ma entrambi i siti hanno iniziato ad implementare player HTML5, più conforme agli standard, nello stesso momento in cui i produttori di browser hanno aggiornato i loro software supportando il nuovo tag <video>. Questo tag sta diventando pian piano il metodo più utilizzato per presentare contenuti rich media compatibili con tutti dispositivi, compresi gli smartphone.

Perchè “risolvere” un problema se non esiste un problema?

Questa è la domanda tormentone da quando è nato l’html5.

Giustamente i webdesigner e gli sviluppatori si sono chiesti: ma se fino ad ora i video continuano a vedersi con player flash perchè creare un problema, che poi va risolto? Qui entrano in gioco, come spesso accade, i poteri forti. Quando Apple, e per la precisione Steve Jobs, annunciò che l’iPhone non avrebbe supportato Adobe Flash, tutti drizzarono le antenne!

Cosa è successo esattamente….?

Con la messa in vendita degli iPhone un numero sempre più crescente di utenti avrebbe navigato con l’handicap e questo significava che molti siti non venivano visualizzati bene, e con loro anche molte pubblicità fatte di banner flash. I siti in flash ancora oggi non si vedono sull’iPhone!

A seguire un numero sempre crescente di dispositivi ha cambiato rotta. Fortunatamente, Apple prese la sua decisione sapendo che lo scenario principale per l’utilizzo di Flash, la visualizzazione di video, era adeguadatamente coperta da HTML5. In questo modo forzò il passaggio graduale a HTML5.
La loro motivazione fù che Flash era difettoso e che consumava troppa memoria, oltre che prosciugava le batterie dei dispositivi mobili.

Come usare questi 2 tag: <audio> e <video>?

L’impiego è relativamente semplice: basta usare <audio> per incorporare gli audio e <video> per incorporare i video annidando nel tag i link ai diversi formati in cui hai codificato il file. Ecco un esempio di utilizzo del tag video HTML5

<video id="sampleMovie" width="640" height="480" preload controls>
    <source src="video_H264.mov" />
    <source src="video_Ogg.ogv" />
    <source src="video_WebM.webm" />
</video>

Idealmente sul web si dovrebbe accettare un unico formato per i video.

Sfortunatamente, sono 3 i CODEC VIDEO (che non è l’estensione del file) in competizione tra loro: H.264, WebM e Ogg.

Oggi per usare solo HTML5 per renderizzare i video, devi codificare I video in più formati (una rottura lo sò) ed eseguire un link a ogni formato nel tag <video>, assicurandoti così che tutti browser che supportano HTML5 siano in grado di renderizzare il tuo file. Tuttavia, poichè numerosi desktop continuano a sfruttare browser più obsoleti che non supportano HTML5, è meglio usare solo video codificati H.264 e offrire Flash come fallback per quelli che non supportano questi tipi di file. Il fallback è “il piano B” per dirla alla 007. 🙂 Uno dei player migliori che ho avuto modo di provare e testare che utilizza il fallback è Flowplayer (oggi anche in una versione a pagamento). Ecco un codice esempio con tanto di fallback:

<video id="sampleMovie" width="640" height="480" preload controls>
    <source src="video_H264.mov" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source src="video_Ogg.ogv" type='video/ogg; codecs="theora, vorbis"' />
    <source src="video_WebM.webm" type='video/webm; codecs="vp8, vorbis"' />

    <!-- questo è il fallback in flash -->
    <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="480">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowFullScreen" value="true" />
        <param name="wmode" value="transparent" />
        <param name="flashvars" value='config={"clip":{"url":"video_flv.flv","autoPlay":false,"autoBuffering":true}}' />
    </object>
    <!-- questo è il fallback in flash -->

</video>

Come avrai notato c’è la possibilità che con il fallback si vada ad utilizzare un file .flv o .mp4. QUINDI altre conversioni di formato.

Il mio parere personale

Dal punto di vista lavorativo, ritengo ancora prematuro utilizzare i video HTML5.

Il NERD probabilmente mi darà addosso ma ai fini produttivi, usare questo tag comporta delle grandi risorse/sprechi di tempo, fra conversioni varie e test. Quali test? Quei test che il tuo cliente fa e che tu frai 2000 browser a disposizione non hai. La classica legge di Murphy!

A livello di compatibilità ci sono molti crossbrowser test che bisogna fare e non solo con le macchine che hai a disposizione (personalmente ho: iPhone, iPad, iMac e un Acer con Windows Vista che funziona egregiamente), ma anche con dei servizi online a pagamento che hanno un costo.

Ovviamente queso discorso vale per chi lavora in maniera professionale.
Quando devi fare un lavoro e ci devi mettere TOT tempo per realizzarlo bisogna farsi due conti con la redditività oraria.

Altrimenti è meglio cambiare lavoro.

Oggi preferisco caricare un video su Vimeo e far si che sia lo stesso Vimeo (o Youtube) a spendere risorse nella ricerca della disponibilità e allo stesso tempo io mi garantisco la massima compatibilità con pc, tablet e smartphone.

Articoli di questa serie: