Introduzione

Una delle novità più interessanti di HTML5 sarà costituita dal nuovo tag video, che consentirà appunto l’esecuzione di file video senza richiedere interfacce Flash o QuickTime.

Ciò risulta ancor più importante dal momento che numerosi tablet e smartphone non supportano la tecnologia di Adobe Flash, rendendo non fruibili i contenuti che dipendono dal relativo plugin.

La struttura base del tag <video> è la seguente:

<video><source src=”…”></video>

Tuttavia, in questa fase di sviluppo finale di HTML5, necessario predisporre il file video in più formati per garantire la compatibilità con i diversi browser.

Questi formati sono: .mp4, .ogv, .webm.

Attributi

Il tag <video> di HTML5 consente l’uso dei seguenti attributi:

– src: il percorso del file da caricare, nei diversi formati compatibili con i vari browser (se un formato non è eseguibile nel browser usato, questo passa alla linea successiva e così via)
– poster: il percorso all’immagine fissa che viene visualizzata fino a quando il file non è stato caricato nel browser (utile se il video non viene precaricato)
– preload: può assumere i valori auto (il file viene pre-caricato quando la pagina viene caricata), metadata (vengono precaricati solo i metadati del file) e none
– loop: determina la riproduzione continuata del video una volta che questa è ultimata
– autoplay: determina l’esecuzione automatica del video
– controls: determina la presenza dei comandi all’interno del video
– width / height: la dimensione del video che deve essere visualizzato

Vantaggi e limiti

I vantaggi di questo nuovo tag sono i seguenti:

– consente di evitare l’uso di plugin come Flash Player o QuickTime che possono non essere presenti sul dispositivo dell’utente o non compatibili con questo;
– è una soluzione cross-browser (nelle versioni recenti dei programmi di navigazione, inclusi tablet e smartphone);
– permette di gestire dei parametri come controls, preload, autoplay e loop per ottimizzare l’esperienza utente nel contesto della pagina del sito.

Gli svantaggi o meglio i limiti, strettamente legati alla fase di sviluppo non definitivo di HTML5, sono invece i seguenti:

– occorre convertire il file video in più formati per garantire la compatibilità con tutti i browser;
– i controlli visualizzati sono quelli previsti dal browser e non sono modificabili né personalizzabili;
– dato che il tag non è supportato dalle versioni meno recenti di browser (ad es. IE8 e precedenti), bisogna prevedere un’alternativa quale il video stesso in formato Flash.

Per implementare quest’ultima soluzione, sarà sufficiente inserire il codice di embed di Flash all’interno dei tag <video> e </video> che non verranno interpretati, quindi saranno ignorati, dai browser meno recenti.

Circa le necessità di conversione del filmato, esistono diverse soluzioni professionali e gratuite reperibili su Internet (come ad esempio questa) che consentono di convertire un file nei diversi formati necessari e generare il relativo HTML.
Uno sviluppatore attento può fare uso di questi strumenti ma deve sempre controllare il codice generato, modificarlo ed integrarlo se necessario, testarlo.

Una pagina di esempio

Potete vedere un esempio di utilizzo del tag video di HTML5 in questa pagina, che vi consiglio di aprire con i diversi browser per constatare le differenze di visualizzazione.
Esaminando il codice della pagina, che è stato commentato, potrete notare come dopo l’apertura del tag <video> vengano indicate le varie fonti (source) per i browser compatibili con HTML5, poi l’alternativa (fallback) del formato Flash, infine viene chiuso il tag video.
Se quindi aprite la pagina con una vecchia versione di Internet Explorer, verrà eseguito il file in formato Flash; se il relativo plugin non è disponibile sarà visualizzato il contenuto alternativo.
A proposito di quest’ultimo, è stato lasciato un semplice messaggio di avviso ma sarà opportuno sostituirlo con un contenuto più interessante, come suggerito in un precedente articolo di questo blog.

Ecco il video

Lo stesso video dell’esempio di cui sopra è mostrato qui sotto tramite inserimento di un iframe: