Video e HTML5: come aggiungere un video in formato nativo su una pagina web

Aggiungere un video su una pagina web, con HTML5, è semplice come posizionare immagini.

Aggiungere un video su una pagina web, con HTML5, è semplice come posizionare immagini. Se per le immagini il tag di riferimento è IMG, per i filmati è, invece, VIDEO. Rimane identico per entrambi l’attributo SRC, per indicare la fonte del file.
Adesso non rimane che vedere quali e quanti formati nativi si possono visualizzare e come distinguerli con l’elemento SOURCE e l’attributo TYPE, per far rientrare dalla finestra anche il vostro amatissimo flash player.

Attualmente sono due i formati nativi per file video e audio che si contendono l’arena del nuovo elemento di HTML: .mp4 (più conosciuto per il suo codec H.264) e .ogv (Ogg Theora).
Il primo è un formato di proprietà dell’organizzazione MPEG-LA, i cui principali licenziatari sono Apple e Microsoft. MPEG-LA richiede una licenza di circa 5 milioni di dollari all’anno per i browser che intendono includere il software di decodifica e, per questo, solo i browser Safari e Internet Explorer (RC9) lo supportano.
Il secondo invece è un formato aperto, sicuramente più congeniale alla filosofia del web, da sempre basata su standard aperti e senza proprietari. Ogg Theora è supportato da Firefox, Opera e anche da Chrome (che è in grado però, di supportare entrambi i formati).
Fino a qui sembrerebbe che il nuovo che avanza, non abbia risolto problemi di natura quasi antropologica del web… ma in realtà HTML5 porta con se una grande novità. Non è più necessario fare una scelta di campo: l’elemento SOURCE, infatti, permette di codificare l’alternativa e delegare al browser, non solo la scelta tra i formati, ma anche il contenuto da presentare quando il browser non è in grado di supportare lo stesso HTML5.
Negli esempi di codice riportati nelle immagini 2 e 3, si può notare come sia proprio l’elemento VIDEO a delimitare tutte le alternative, non solo riportando, con l’elemento SOURCE, i sorgenti dei filmati (SRC) e le tipologie dei singoli codec (TYPE), ma anche il possibile ripiego nel caso in cui non il browser non sia in grado di interpretare HTML5. Tra i possibili ripieghi, nell’immagine 3, è illustrato come integrare anche un flash player come lettore di video H.264.
Inoltre all’’elemento principale è possibile associare due ulteriori attributi: CONTROLS, per indicare al browser di mostrare i pulsanti di controllo tipici di un filmato (play/pausa/volume, etc.) e POSTER, per definire il percorso dell’immagine (singolo fotogramma) da mostrare durante il caricamento del video o comunque prima che l’utente prema il tasto play. Se quest’ultimo attributo non viene definito il browser mostrerà il primo fotogramma del filmato.

Convertire filmati in formato OGG
Esistono molti tool gratuiti, per convertire qualsiasi formato video in .ogv.
Il più pratico in assoluto, per i vostri filmati presenti su youtube, è un’applicazione web based: www.tinyogg.com: basta copiare e incollare il percorso URL del vostro filmato, per ottenere in pochi minuti una copia in formato .ogv da salvare sul vostro hard disk. L’alternativa per gli appassionati di Firefox, è il suo plug-in: firefogg.com. A seguire segnaliamo poi alcuni software di tipo desktop gratuiti per tutte le piattaforme: www.videolan.org/vlc, thelittleappfactory.com/evom (solo MacOsX), oggconvert.tristanb.net (solo per sistemi Linux).

Non pensate, infine, che questa novità possa rendere obsoleti e fuori moda i canali di youtube: per restare al passo con i tempi, anche da quelle parti, ci si incomincia ad attrezzare per la nuova era. Date un’occhiata a questo indirizzo: YOUTUBE in HTML5

Per approfondire e conoscere tutti gli aspetti del web design scopri tutti i dettagli dei nostri corsi.