Utilizzo di HTML5 per visualizzare video nei browser correnti

Il tag video HTML5 semplifica l'aggiunta di video alle tue pagine Web. Ma mentre sembra facile in superficie, ci sono molte cose che devi fare per ottenere il tuo video attivo e funzionante. Questo tutorial ti guiderà attraverso i passaggi per creare una pagina in HTML5 che eseguirà il video in tutti i browser moderni.

• Hosting del tuo video HTML5 rispetto all'utilizzo di YouTube
• Panoramica rapida del supporto video sul Web
• Crea e modifica il tuo video
• Converti il ​​video in Ogg per Firefox
• Converti il ​​video in MP4 per Safari
• Converti il ​​video in FLV per Internet Explorer
• Aggiungi l'elemento video alla tua pagina web
• Aggiungi JavaScript e Flash Player per far funzionare Internet Explorer
• Prova in più browser come puoi

01 di 10

Hosting del tuo video HTML 5 rispetto all'utilizzo di YouTube

YouTube è un ottimo sito. Semplifica l'integrazione rapida dei video nelle pagine Web e, con alcune piccole eccezioni, è piuttosto semplice nell'esecuzione di tali video. Se pubblichi un video su YouTube, puoi essere abbastanza sicuro che chiunque sarà in grado di guardarlo.

Ma usare YouTube per incorporare i tuoi video ha alcuni svantaggi

La maggior parte dei problemi con YouTube sono da parte dei consumatori, piuttosto che da parte del designer, cose come:

• Ricerca e indicizzazione lente
• Interruzioni del server
• Contenuto rimosso (apparentemente) arbitrariamente
• Troppo cattivo contenuto

Ma ci sono alcuni motivi per cui YouTube fa male anche agli sviluppatori di contenuti, tra cui:

• Durata massima di 10 minuti per i video (per account gratuiti)
• Scarsa prestazione di caricamento
• YouTube ottiene diritti di utilizzo illimitati sul tuo video
• Qualsiasi utente di YouTube ottiene diritti di utilizzo illimitati sul tuo video

Il video HTML5 offre alcuni vantaggi su YouTube

L'utilizzo di HTML5 per i video ti consente di controllare ogni aspetto del tuo video, da chi può visualizzarlo, quanto tempo è, in che cosa consiste il contenuto, dove è ospitato e come si comporta il server. E i video HTML5 ti offrono l'opportunità di codificare il tuo video in tutti i formati di cui hai bisogno per assicurarti che il numero massimo di persone possa vederlo. I tuoi clienti non hanno bisogno di un plug-in o di aspettare che YouTube rilasci una versione più recente.

Naturalmente, i video HTML5 offrono alcuni svantaggi

Questi includono:

• Devi codificare il tuo video in almeno tre diversi codec
• Devi includere alcuni JavaScript per garantire che i browser che non supportano HTML5 funzionino
• Il tuo server deve essere in grado di gestire i requisiti di larghezza di banda dei video di hosting

Continua a leggere sotto

02 di 10

Panoramica rapida del supporto video sul Web

L'aggiunta di video alle pagine Web è stata a lungo un processo difficile. C'erano così tante cose che potevano andare storte:

• Innanzitutto, usi il tag per incorporare il tuo video nella tua pagina. MA quel tag è deprecato a favore di un altro tag. E alcuni browser non l'hanno mai supportato in ogni caso.
• Quindi si passa a tag, ma i browser più vecchi non lo supportano e i nuovi browser sono imprecisi nel suo supporto.
• Allora pensi Flash! E codifica il tuo video come un file FLV. Ma Flash non è supportato su molti dispositivi mobili e molte persone odiano Flash indipendentemente dal modo in cui vengono utilizzati (il 25% degli intervistati nel mio sondaggio chiede come ti senti su Flash affermando che non possono sopportare Flash in alcun modo).
• Quindi decidi di caricare il tuo video su un sito di incorporamento video come YouTube, ma poi hai i problemi con YouTube di cui abbiamo discusso.
• Infine, decidi di utilizzare HTML5, ma Internet Explorer non lo supporta (non prima di Internet Explorer 9). E anche se lo fai, ci sono due standard di codec video supportati e un solo browser che può utilizzare entrambi. Supporto browser per codec e contenitori video

Quindi cosa dovresti fare? Rinunciare ai video non è più un'opzione per la maggior parte dei siti, poiché il video sta diventando sempre più importante. E molti siti sono passati con successo al video.

Le seguenti pagine di questo articolo ti guideranno attraverso come aggiungere video alle tue pagine Web che funzionano in Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 e 4, iPhone e Android, Flash e Internet Explorer 7 e 8. Sarai avere anche le chiavi necessarie per aggiungere supporto per altri browser più vecchi, se necessario.

Continua a leggere sotto

03 di 10

Crea e modifica il tuo video

La prima cosa di cui hai bisogno quando metti un video su una pagina Web è il video reale. È possibile scattare in modo continuo e modificare successivamente per creare una funzione, oppure è possibile copiarlo e programmarlo in anticipo. In entrambi i casi funziona bene, è semplicemente quello che ti sta a cuore. Se non sai che tipo di video dovresti fare, dai un'occhiata a queste idee nella guida video desktop:

• Progetti video di famiglia
• Marketing e video promozionali
• Video tour virtuali
• Come video
• Video di nozze

Scopri come registrare video di alta qualità

Assicurati di sapere come registrare in interni e all'aperto e come registrare l'audio. Anche l'illuminazione è molto importante - gli scatti troppo luminosi fanno male agli occhi, e troppo scuri sembrano solo fangosi e poco professionali. Anche se hai solo intenzione di avere un video di 30 secondi sul tuo sito, la qualità migliore è la migliore che rifletterà sul tuo sito web.

Ricorda anche che il copyright si applica a qualsiasi suono o musica (così come materiale di repertorio) che potresti voler usare nel tuo video. Se non hai accesso a un amico che può scrivere e suonare una canzone per te, dovrai trovare musica royalty-free da riprodurre in background. Ci sono anche luoghi in cui è possibile fare scorta di filmati da aggiungere ai tuoi video.

Modifica il tuo video

Non importa quale software di editing usi, basta che tu lo abbia familiarizzato e possa usarlo efficacemente. Gretchen, la guida video desktop, ha alcuni suggerimenti professionali per la modifica di video che possono aiutarti a modificare i tuoi video in modo che risultino fantastici.

Salva il tuo video su un MOV o AVI (o MPG, CD, DV)

Per il resto di questo tutorial, assumeremo che il tuo video sia stato salvato con un formato di alta qualità (non compresso) come AVI o MOV. Mentre puoi usare questi file così come sono, ti imbatti in tutti i problemi con i video che abbiamo già discusso. Le pagine seguenti spiegheranno come convertire il file in tre tipi in modo che sia visualizzabile dal maggior numero di browser.

04 di 10

Converti il ​​video in Ogg per Firefox

Il primo formato che convertiremo è Ogg (a volte chiamato Ogg-Theora). Questo formato è uno che Firefox 3.5, Opera 10.5 e Chrome 3 possono visualizzare tutti.

Sfortunatamente, mentre Ogg ha il supporto del browser, molti dei ben noti programmi video che puoi acquistare (Adobe Media Encoder, QuickTime, ecc.) Non offrono un'opzione di conversione Ogg. Quindi l'unico modo per convertire i tuoi video in Ogg è trovare un programma di conversione sul Web.

Opzioni di conversione

C'è uno strumento online chiamato Media-Convert che afferma di convertire vari formati di video (e audio) in altri formati video (e audio). Quando l'abbiamo provato con il mio video di prova di 3 secondi, non riuscivamo a farlo funzionare sul mio Mac. Ma potresti avere più fortuna. Questo sito ha il vantaggio di essere libero.

Alcuni altri strumenti che abbiamo trovato includono:

• Miro Video Converter (Windows Macintosh) - Questo programma ha il vantaggio di convertire sia in Ogg che in MP4 (H.264) ed è open source.
• Koyote Video Converter (Windows)
• Convertitore video gratuito Pensiamo che questo abbia sia una versione Windows che una versione Macintosh, ma era difficile da capire dal loro sito
• Simple Theora Encoder (Macintosh): questo è quello che tendiamo ad usare.

Una volta salvato il tuo video nel formato Ogg, salvalo in una posizione sul tuo sito web e vai alla pagina successiva per convertirlo in altri formati per altri browser.

Continua a leggere sotto

05 di 10

Converti il ​​video in MP4 per Safari

Il prossimo formato in cui convertire il tuo video è MP4 (video H.264) in modo che possa essere riprodotto su Safari 3 e 4 e su iPhone e Android. Inoltre, i video H.264 possono essere facilmente convertiti in file FLV per la visione su Flash.

Questo formato è più facilmente disponibile nei prodotti commerciali e probabilmente hai già un programma che convertirà in MP4 se hai un editor video. Se hai Adobe Premiere puoi usare Adobe Video Encoder o se hai QuickTime Pro che funzionerà bene. Molti dei convertitori che abbiamo discusso nella pagina precedente convertiranno anche i video in MP4.

• MediaConvert: uno strumento AWS online.
• Miro Video Converter (Windows Macintosh) - Questo programma ha il vantaggio di convertire sia in Ogg che in MP4 (H.264) ed è open source.
• SUPER (Windows) - convertirà molti tipi di file diversi in MP4 e FLV
• Convertitore video gratuito Pensiamo che questo abbia sia una versione Windows che una versione Macintosh, ma era difficile da capire dal loro sito.

Salva il tuo file MP4 sul tuo sito Web e dovrai quindi convertirlo in Flash affinché Internet Explorer lo usi.

06 di 10

Converti il ​​video in FLV per Internet Explorer

Il modo più semplice per convertire i video in FLV è utilizzare Flash stesso. È così che convertiamo i miei video in Flash. Ma se non hai Flash, ecco due popolari strumenti per convertire i file in FLV:

• SUPER (Windows) - convertirà molti tipi di file diversi in MP4 e FLV
• ffmpegX (Macintosh) - convertirà molti tipi di file diversi in Mp4 e FLV.

Salva il tuo file FLV sul tuo sito Web e la pagina successiva ti mostrerà come scrivere l'HTML in modo da poter riprodurre i tuoi video.

Continua a leggere sotto

07 di 10

Aggiungi l'elemento video alla tua pagina web

È molto semplice utilizzare l'HTML 5 per aggiungere video alle pagine Web. La maggior parte dei browser moderni supporta i video HTML 5, sebbene non tutti la supportino allo stesso modo. Ma questo significa che se si salva il video sia in formato Ogg sia in formato MP4, sarà possibile scrivere solo quattro o cinque righe di codice HTML per visualizzarlo nella maggior parte dei browser moderni (tranne Internet Explorer 8). Ecco come:

Scrivi l'indicatore di doctype HTML 5 in modo che i browser sappiano aspettarsi l'HTML 5:

1. Crea la tua pagina Web come la creeresti normalmente:

2. All'interno del corpo, posiziona il
3. Decidi quali attributi desideri che il tuo video abbia: ti consigliamo di utilizzare i controlli e il preload. Usa l'opzione poster se il tuo video non ha una buona prima scena.
   1. autoplay - per iniziare non appena scaricato
   2. controlli - consente ai tuoi lettori di controllare il video (pausa, riavvolgimento, avanzamento rapido)
   3. loop - avvia il video dall'inizio quando finisce
   4. preload - pre-scarica il video in modo che sia pronto più velocemente quando il cliente fa clic su di esso
   5. poster - definisce l'immagine che vuoi usare quando il video è fermo
4. Quindi aggiungi i file sorgente per le due versioni del tuo video (MP4 e OGG) all'interno del
5. Apri la pagina in Chrome 1, Firefox 3.5, Opera 10 e / o Safari 4 e assicurati che venga visualizzata correttamente. Dovresti testarlo almeno in Firefox 3.5 e Safari 4 - poiché utilizzano un codec diverso.

Questo è tutto. Una volta installato questo codice, avrai un video che funziona con Firefox 3.5, Safari 4, Opera 10 e Chrome 1. Ma che dire di Internet Explorer?

Internet Explorer non piace HTML 5 o il

Nella prossima sezione, parleremo di cosa è possibile fare per far sì che IE 8 giochi bene con i tag video HTML 5 e mostri un video. Devi usare Flash.La buona notizia è che IE 9 dovrebbe supportare HTML 5 e il tag video.

08 di 10

Aggiungi JavaScript e Flash Player per far funzionare Internet Explorer

Potresti aver notato che nell'HTML della pagina precedente non c'era una linea sorgente per il file FLV. E se hai provato quella pagina in Internet Explorer, non funzionerebbe. Questo perché Internet Explorer non riconosce HTML 5 e non può riprodurre nativamente i video OGG o MP4. Per far funzionare Internet Explorer 7 e 8, è necessario che riproduca il video come Flash. Ma ci sono più passaggi per farlo funzionare rispetto all'aggiunta del file FLV.

Passaggio 1: Ottieni un lettore video Flash per il tuo sito web

Ti consigliamo di scaricare FlowPlayer perché è un riproduttore video Flash open source che puoi installare sul tuo server Web e utilizzare ogni volta che giochi Flash. La versione gratuita di FlowPlayer inserisce pubblicità nei tuoi video, ma puoi anche acquistare licenze commerciali se ne hai bisogno.

Seguire le istruzioni sul sito di FlowPlayer per installare FlowPlayer sul proprio sito Web. In breve, installerai 2 file SWF e un file JavaScript sul tuo sito. Nella parte inferiore del tuo HTML, (prima del tag) aggiungerai una riga:

Ma Internet Explorer continua a non riprodurre il video, devi insegnargli come riconoscere i tag HTML 5.

Passaggio 2: Convinci Internet Explorer a leggere i tag HTML 5

C'è un comodo script su Google Code chiamato "HTML Shiv" che aiuterà IE a riconoscere gli elementi HTML 5. Quindi nel del tuo documento HTML vuoi farvi riferimento. È meglio includerlo nei commenti condizionali di IE in modo che gli altri browser non siano confusi:

Ok, ora IE riconoscerà il

Passaggio 3: aggiungere una linea di origine per il file FLV

Proprio come hai fatto nella pagina precedente, aggiungerai una linea al tuo HTML 5 all'interno del

Continua a leggere sotto

09 di 10

Aggiungi JavaScript e Flash Player per far funzionare Internet Explorer - Parte 2

Sfortunatamente, non abbiamo ancora finito. Ora dobbiamo dire a IE di usare il riproduttore video Flash FlowPlayer di cui sopra abbiamo fatto riferimento.

Passaggio 4: ruotare il

Per questo, abbiamo bisogno di un altro script. Abbiamo ottenuto la sceneggiatura da Dive Into HTML 5. Ma quando l'abbiamo testato, non ha funzionato fino a quando non abbiamo apportato un paio di modifiche:

• Intorno alla riga 31: aggiungi la posizione dell'installazione di FlowPlayer.
• Intorno alla riga 42: cambia il tipo di file da video / mp4 a video / x-flv
• Intorno alla riga 94: iniziando con if (!! $ && !! $ (document) .ready) {alla fine del documento, cambia quella sezione per leggere:

  // if (!! $ && !! $ (document) .ready) {/ * Gli utenti di jQuery possono inizializzare non appena il DOM è pronto * /// $ (document) .ready (html5_video_init);//} altro {/ * Tutti gli altri possono aspettare fino a carico * // * Funzione addEvent tramite http://www.ilfilosofo.com/blog/2008/04/14/addevent-preserving-this/ * /var addEvent = function (obj, type, fn) {if (obj.addEventListener)obj.addEventListener (type, fn, false);altrimenti se (obj.attachEvent)obj.attachEvent ('on' + type, function () {return fn.apply (obj, new Array (window.event));});}addEvent (window, "load", html5_video_init);//}

Una volta modificato il file JavaScript, caricarlo sul server e collegarlo ad esso nella parte inferiore della pagina HTML (prima del ):

Meno male! Ora che hai fatto tutto questo, dovresti caricare il tuo codice HTML in modo da poter iniziare il test.

10 di 10

Prova in più browser come puoi

Il test delle pagine video è fondamentale se si desidera avere un lancio di successo. Dovresti assicurarti di testare la tua pagina nei browser e versioni più popolari per il tuo sito web.

Abbiamo scoperto che, sebbene sia possibile utilizzare strumenti come BrowserLab e AnyBrowser per testare i video, non è affidabile come far apparire la pagina su un browser. Quando lo fai puoi davvero vedere se funziona o meno.

Dal momento che hai fatto tutto il possibile per codificare il tuo video in tre formati, dovresti testarlo per assicurarti che venga visualizzato in tutti e tre i formati. Questo significa, come minimo, dovresti testarlo in:

• Firefox 3.5
• Safari 3 o 4
• Internet Explorer 7 o 8

Puoi eseguire il test in Chrome, ma poiché Chrome visualizza tutti e tre i metodi (anche Flash, se disponi del plug-in), è difficile stabilire se c'è un problema con uno degli altri due o con il codec che Chrome utilizza.

Per la tua tranquillità, dovresti provare anche nei browser più vecchi per vedere cosa fanno, soprattutto se molti dei tuoi lettori utilizzano browser più vecchi.

Ottenere il video che funziona nei browser precedenti

Come con qualsiasi pagina Web, è necessario innanzitutto considerare l'importanza di far funzionare quei browser. Se il 90% dei tuoi clienti utilizza Netscape, dovresti avere un piano di fallback per loro. Ma se meno dell'1% lo fa, potrebbe non avere importanza.

Una volta deciso quali browser cercherete di supportare, il modo più semplice è semplicemente creare una pagina alternativa in cui visualizzare il video. In quella pagina alternativa, incorporerete un video usando HTML 4. E poi o utilizzare una qualche forma di rilevamento del browser per reindirizzare lì o semplicemente aggiungere un collegamento a quella pagina su questo.