Video HTML5 10 cose che i designer devono sapere

La rivoluzione HTML5 è entusiasmante per i web designer di tutte le aree del globo. Le nuove specifiche supportano dozzine di elementi e attributi per la costruzione di siti web semantici. Queste nuove funzionalità includono tag multimediali per formati audio e video.

Negli anni passati un lettore multimediale basato su Flash in più che sufficiente per lo streaming sul Web e questa tecnologia è ancora necessario per supportare i browser legacy. Ma per fortuna gli standard moderni sono avanzati e l'inclusione del video HTML5 apre le porte a dozzine di nuove opportunità.

In questa guida mi piacerebbe offrire un'introduzione ai video HTML5 per il Web. Ci vorrà un po 'di pratica per capire il lettore interno nel browser e tutte le sue funzionalità. E il modo migliore per familiarizzare è tuffarsi in testa prima!

1. Tipi di media

Quando lavori con un lettore video flash è fin troppo comune associare tutti i formati video in .flv. Mentre funziona, la maggior parte dei file flv non può mantenere la qualità in nessun punto vicino ai formati / codec di file più avanzati. Esistono 3 tipi di video importanti supportati da HTML5: MP4, WebM e Ogg / Ogv. Il tipo di file MPEG-4 è generalmente codificato in H.264 che consente la riproduzione in lettori Flash di terze parti. Ciò significa che non è necessario conservare una copia video .flv per supportare un metodo di fallback! WebM e Ogg sono due tipi di file molto più recenti relativi al video HTML5. Ogg usa la codifica Theora che si basa sul formato di file audio standard open-source. Questi possono essere salvati con un'estensione .ogg o .ogv.

WebM è un progetto pubblicato da Google che puoi leggere di più sul sito Web del progetto WebM. Il formato è già supportato da Opera, Google Chrome, Firefox 4+ e, più recentemente, da Internet Explorer 9. Non è ancora noto dalla maggior parte dei professionisti del Web, ma WebM è il formato video multimediale leader nel futuro dei video web.

2. Supporto per browser

Quindi quale di questi tipi di file hai bisogno per il tuo sito web? Bene idealmente tutti e 3 sarebbero grandi in quanto forniscono lo spettro di supporto completo. Eppure questo non è realistico, e in effetti, puoi coprire tutte le basi con solo due di loro. Ecco una ripartizione di ciò che funziona per ogni browser:

• Mozilla Firefox - WebM, Ogg
• Google Chrome - WebM, Ogg
• Opera - WebM, Ogg
• Safari - MP4
• Internet Explorer 9 - MP4
• Internet Explorer 6-8 - Nessun HTML5, solo Flash!

Se ricordi, in precedenza ho detto che la maggior parte dei lettori di video flash supporterà i file MP4 purché siano codificati in H.264. In quanto tale, ciascuno di questi browser incorporerà MP4 + Flash come risorsa finale. Questo significa che devi solo creare Due diversi formati video per supportare tutti i browser. MP4 per Safari / IE9 e una scelta tra WebM o Ogg per il resto.

A mio parere consiglio vivamente di attenersi al formato WebM. Ha alcuni grandi nomi dietro il progetto (ovvero Google) e ha guadagnato molta aderenza nella comunità HTML5. Ogg / Ogv sarà supportato ma molto probabilmente perderà popolarità nelle dimensioni dei file più piccole di WebM. Puoi leggere un articolo correlato sul futuro del video sul web scritto da Sean Golliher.

3. Incorporare semplici video HTML5

Diamo ora un'occhiata alla sintassi richiesta per incorporare del codice di esempio. Tutto ciò di cui abbiamo bisogno è il tag video HTML5 per fare riferimento a ciascun URL di film.

Notare il controlli e riproduzione automatica gli attributi non devono essere impostati con nessun valore. Ho anche incluso un manifesto attributo che precarica un'immagine sul lettore video prima dello streaming. Questa è un'anteprima comune con molti web player.

Offriamo sia i formati MP4 che WebM interni all'elemento video. Se nessuno di questi può essere caricato, viene visualizzato un errore per l'utente che aggiorna il browser.

4. Offrire un Fallback Flash

L'esempio sopra è perfetto per tutti i browser Web conformi agli standard. Tuttavia, dobbiamo anche considerare che il mondo non è sempre all'avanguardia della tecnologia. Dobbiamo supportare gli utenti su versioni precedenti di Safari, Mozilla Firefox e in particolare Internet Explorer.

Il modo migliore per ottenere questo è attraverso un player di fallback Flash. Questi possono essere aggiunti usando il incorporare o oggetto tag per fare riferimento a un file .swf di terze parti. JW Player e Flowplayer sono due soluzioni open source gratuite che puoi prendere in considerazione. Ma controlla anche i lettori video premium su ActiveDen che possono andare a buon mercato come $ 15- $ 20.

Ora modifichiamo il codice sopra per includere un lettore Flash di fallback per supportare quasi tutti i browser esistenti.

5. Supporto per dispositivi mobili

Questo argomento è ancora molto dibattuto dal momento che l'industria della telefonia mobile è così giovane. Apple è uscito con il supporto per MP4 su dispositivi Mac e iOS. Ciò significa che puoi riprodurre in modo nativo i file video .mp4 sul tuo iPad, iPhone o iPod Touch nell'interfaccia utente video standard. Questo copre gran parte della quota di mercato.

Recentemente i dispositivi Android hanno avuto difficoltà a raggiungere lo stesso livello di supporto. Tuttavia, Google ha finalmente adottato lo streaming web .mp4 che ora sfrutta tutti gli utenti mobili. E poiché Flash non è un'opzione, MP4 è la migliore soluzione disponibile. Questo è il motivo per cui vuoi prima incorporare il codice .mp4 in modo che i dispositivi iOS possano riconoscere immediatamente il file.

6. Agente utente di Safari

Un bug che deve essere menzionato è uno esistente tra i player Flash e lo streaming nativo HTML5 .mp4 su Safari. Poiché il browser può supportare entrambi i file, potresti avere problemi a scaricare il flusso video HTML5 al posto di Flash. Tuttavia grazie a questo fantastico post sul blog di TUAW è facile cambiare il tuo user-agent di navigazione.

Ciò costringerà la tua pagina web a riconoscere il browser come in esecuzione su un altro dispositivo. Molto probabilmente scegli l'iPad, che NON supporta la riproduzione Flash. Questo è l'unico problema che potresti incontrare durante il test dei metodi di riproduzione nativi e flash MP4.

7. Gestisci i controlli del giocatore

Che ci crediate o no ci sono anche dei metodi che puoi usare per manipolare i controlli di video player HTML5. Tutto può essere fatto in JavaScript estraendo da una serie di metodi aperti. Ci sono troppe cose da elencare qui, ma cerca di sfogliare i documenti dell'elemento multimediale W3C per maggiori dettagli.

Per darti un'idea generale, il blog di Opera dev ha pubblicato alcuni brevi tutorial che sono ottimi per i principianti. Anche se non hai mai scelto JavaScript o jQuery, è ancora semplice andare a fondo con questo. È possibile chiamare attributi specifici del media video come smorzato o ora attuale. Quindi è possibile eseguire azioni (attenuare lo sfondo, visualizzare gli annunci) in base a questi criteri manipolando il DOM in jQuery.

Lo stesso sviluppatore nell'articolo di Opera fornisce una demo funzionante del proprio lettore video con script. L'opportunità di personalizzare i propri controlli dell'interfaccia utente è eccezionale. Serve solo a mostrare quanto sia potente il video HTML5.

8. Conversione del formato video

Questo è un altro grosso problema che probabilmente confonderà meno individui esperti di tecnologia. Vuoi solo far funzionare il tuo sito web e lo streaming e ora devi gestire la conversione dei video? Beh, in realtà non è poi così difficile.

Per gestire MP4, che è la tua più grande priorità, puoi usare HandBrake, una soluzione open source gratuita che funziona su tutti e 3 i principali sistemi operativi. Supporterà H.264 insieme ad alcuni altri codec che lo rendono la migliore opzione per gli utenti freebie. Se hai i soldi da spendere devo raccomandare il convertitore Xilisoft che si trova sul Mac App Store solo per una licenza a vita di $ 40.

Sembra che l'itinerario WebM renda la vita molto più semplice. Miro Video Converter è uno strumento gratuito per Windows e OS X che produce file WebM di elevata qualità. Può anche fare la codifica di Ogg Theora, che esce con una qualità molto buona.

9. Costruire un lettore Web

I formati video con specifiche HTML5 sono ancora nuovi per gli sviluppatori. Ci sono protocolli aperti che aspettano solo di essere giocati per consentire controlli personalizzati, cursori, icone di riproduzione / pausa, ecc. Se ti senti audace, consulta questo tutorial su come creare il tuo player HTML5 (pubblicato su Splashnology).

Il codice è un po 'intenso per i principianti in quanto richiede il targeting CSS avanzato e un po' di jQuery formale. Esistono altri framework su cui è possibile creare un design player personalizzato. Allo stesso modo questa presentazione slideShare è un'ottima introduzione alla creazione di un video player HTML5.

Costruire un video player HTML5

10. Libreria VideoJS

VideoJS è probabilmente la mia soluzione preferita per i video player HTML5. Tutto ciò di cui hai bisogno è il loro foglio di stile JavaScript e CSS auto-ospitato incluso da qualche parte nel tuo documento. Quindi scrivi il codice video HTML5 standard con alcune classi aggiuntive per lo skin. Ho aggiunto il loro codice di esempio qui sotto:

Se ti capita di eseguire un blog WordPress puoi anche provare il loro plugin WP personalizzato. Comprenderà automaticamente la libreria js / css nelle pagine in cui viene visualizzato il video HTML5. E puoi farlo da qualsiasi editor di post o pagina usando shortcode (vedi qui).

Conclusione

Spero che questa guida introduttiva possa suscitare il tuo interesse per il futuro dei video web. Con più utenti che si rivolgono al mobile, è importante che gli standard HTML5 siano adottati per questi tipi di media. Il Web dovrebbe essere reso più semplice in modo che gli sviluppatori possano produrre soluzioni completamente supportate molto più rapidamente. Ci piacerebbe conoscere le tue idee e i tuoi suggerimenti per il futuro dei video HTML5. Se desideri condividere, non esitare a lasciare un commento nell'area di discussione successiva di seguito.