Utilizzo di HTML5 per visualizzare video nei browser correnti

Ospitare il tuo video HTML 5 vs. Utilizzo di YouTube

YouTube è un ottimo sito. Semplifica l'incorporamento di video in pagine web rapidamente e con alcune eccezioni minori è abbastanza fluido nella sua esecuzione di quei video. Se pubblichi un video su YouTube, puoi essere abbastanza sicuro che chiunque sarà in grado di guardarlo.

Ma l'utilizzo di YouTube per incorporare i tuoi video presenta alcuni inconvenienti

La maggior parte dei problemi con Youtube sono dal lato del consumatore, piuttosto che dal lato del designer, cose come:

• Ricerca e indicizzazione lenta
• Interruzioni del server
• Contenuti rimossi (apparentemente) arbitrariamente
• Contenuti troppo brutti

Ma ci sono alcuni motivi per cui YouTube è dannoso anche per gli sviluppatori di contenuti, tra cui:

• Durata massima 10 minuti per i video (per account gratuiti)
• Scarse prestazioni 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 rispetto a YouTube

Usando HTML5 for video ti consente di controllare ogni aspetto del tuo video, da chi può vederlo, quanto dura, cosa contiene il contenuto, dove è ospitato e come funziona il server. E HTML5 ti dà 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, il video HTML5 offre alcuni inconvenienti

Questi includono:

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

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:

• Per prima cosa, 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 lo hanno mai supportato bene comunque.
• Quindi passi a tag, ma i browser più vecchi non lo supportano e i browser più recenti sono approssimativi nel suo supporto.
• poi pensi Veloce! E codifica il tuo video come file FLV. Ma Veloce non è più supportato sui dispositivi Windows.
• 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.

Quindi cosa dovresti fare? Rinunciare al 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 pagine seguenti di questo articolo ti guideranno attraverso come aggiungere un video alle tue pagine Web che funzionano in Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 e 4, iPhone e Android e Internet Explorer 7 e 8. Avrai anche le chiavi necessarie per aggiungere il supporto per altri browser meno recenti, se necessario.

Crea e modifica il tuo video

La prima cosa di cui hai bisogno quando metti un video su una pagina Web è il video vero e proprio. Puoi scattare continuamente e modificare in seguito per creare una funzione, oppure puoi sceneggiarla e pianificarla in anticipo. In entrambi i casi funziona bene, è solo quello con cui ti senti a tuo agio. Se non sai che tipo di video dovresti realizzare, dai un'occhiata a queste idee dalla Guida ai video desktop:

• Progetti video per famiglie
• Video di marketing e promozionali
• Video Tour Virtuali
• Come Video
• Video di matrimonio

Scopri come registrare video di alta qualità

Assicurati di sapere come registrare all'interno e all'esterno e come registrare l'audio. Anche l'illuminazione è molto importante: gli scatti troppo luminosi fanno male agli occhi e quelli troppo scuri sembrano solo fangosi e poco professionali. Anche se prevedi di avere solo un video di 30 secondi sul tuo sito, maggiore è la qualità, migliore sarà il riflesso sul tuo sito web.

Ricorda anche che il copyright si applica a qualsiasi suono o musica (così come ai filmati di repertorio) che potresti voler utilizzare nel tuo video. Se non hai accesso a un amico che può scrivere e suonare una canzone per te, dovrai trovare musica royalty-free per suonare in sottofondo. Ci sono anche posti in cui puoi immagazzinare filmati da aggiungere ai tuoi video.

Modificare il tuo video

Non importa quale software di editing usi, basta che tu abbia familiarità con esso e sia in grado di usarlo in modo efficace. Gretchen, la Desktop Video Guide, contiene alcuni suggerimenti professionali per l'editing video che possono aiutarti a modificare i tuoi video in modo che abbiano un bell'aspetto.

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

Per il resto di questo tutorial, supponiamo che tu abbia il tuo video salvato in un qualche tipo di formato di alta qualità (non compresso) come AVI o MOV. Sebbene tu possa usare questi file così come sono, ti imbatti in tutti i problemi con il video di cui abbiamo già discusso. Le pagine seguenti spiegano come convertire il tuo file in tre tipi in modo che sia visualizzabile dal maggior numero di browser.

Converti il ​​video in Ogg per Firefox

Il primo formato in cui convertiremo è Ogg (a volte chiamato Ogg-Theora). Questo formato è visualizzabile da Firefox 3.5, Opera 10.5 e Chrome 3.

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

Opzioni di conversione

Esiste 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 siamo riusciti a farlo funzionare sul mio Mac. Ma potresti avere più fortuna. Questo sito ha il vantaggio di essere gratuito.

Alcuni altri strumenti che abbiamo trovato includono:

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

Una volta che hai 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.

Converti il ​​video in MP4 per Safari e Internet Explorer

Il prossimo formato in cui dovresti convertire il tuo video è MP4 (video H.264) in modo che possa essere riprodotto su Internet Explorer 9 e versioni successive, Safari 3 e 4, iPhone e Android.

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

• MediaConvert: uno strumento AWS online.
• Convertitore video Miro (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
• Convertitore video gratuito: Pensiamo che questo abbia sia una versione per Windows che una per Macintosh, ma era difficile dirlo dal loro sito.

Aggiungi l'elemento video alla tua pagina web

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

2. All'interno del corpo, posizionare il
3. Decidi quali attributi vuoi che abbia il tuo video: ti consigliamo di utilizzare i controlli e il precarico. Usa l'opzione poster se il tuo video non ha una buona prima scena.
   autoplay - per iniziare non appena viene scaricato
4. controlli - consenti ai tuoi lettori di controllare il video (pausa, riavvolgimento, avanzamento veloce)
5. loop - avvia il video dall'inizio alla fine
6. preload - pre-scarica il video in modo che sia pronto più velocemente quando il cliente fa clic su di esso
7. poster: definisci l'immagine che desideri utilizzare quando il video viene interrotto
8. Quindi aggiungi i file sorgente per le due versioni del tuo video (MP4 e OGG) all'interno del
9. 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é ciascuno utilizza un codec diverso.

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

È molto facile usare HTML 5 per aggiungere un video alle pagine Web. La maggior parte dei browser moderni supporta i video HTML 5, anche se non tutti lo supportano allo stesso modo. Ma ciò significa che se salvi il tuo video in entrambi i formati Ogg e MP4, puoi scrivere solo quattro o cinque righe di HTML per visualizzarlo nella maggior parte dei browser moderni (eccetto Internet Explorer 8). Ecco come:

Scrivi il marcatore doctype HTML 5 in modo che i browser sappiano di aspettarsi HTML 5:

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

2. All'interno del corpo, posizionare il
3. Decidi quali attributi vuoi che abbia il tuo video: ti consigliamo di utilizzare i controlli e il precarico. Usa l'opzione poster se il tuo video non ha una buona prima scena.
   autoplay - per iniziare non appena viene scaricato
4. controlli - consenti ai tuoi lettori di controllare il video (pausa, riavvolgimento, avanzamento veloce)
5. loop - avvia il video dall'inizio alla fine
6. preload - pre-scarica il video in modo che sia pronto più velocemente quando il cliente fa clic su di esso
7. poster: definisci l'immagine che desideri utilizzare quando il video viene interrotto
8. Quindi aggiungi i file sorgente per le due versioni del tuo video (MP4 e OGG) all'interno del
9. 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 ciascuno un codec diverso.

Questo è tutto. Una volta inserito questo codice, avrai un video che funziona in Firefox 3.5, Safari 4, Opera 10, Internet Explorer 9+ e Chrome 1.

Prova in più browser che puoi

Per la tua tranquillità, dovresti anche testare i browser più vecchi per vedere cosa fanno, specialmente se molti dei tuoi lettori utilizzano browser meno recenti.

Testare le pagine video è fondamentale se vuoi avere un lancio di successo. Assicurati di testare la tua pagina nei browser e nelle versioni più popolari per il tuo sito web.

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

Dal momento che ti sei preso la briga di codificare il tuo video in più formati, dovresti testarlo per assicurarti che venga visualizzato in più browser. Ciò significa che, come minimo, dovresti testarlo in Firefox, Safari e IE.

Per la tua tranquillità, dovresti anche testare i browser più vecchi per vedere cosa fanno, specialmente se molti dei tuoi lettori utilizzano browser meno recenti.

Far funzionare il video nei browser precedenti

Come con qualsiasi pagina Web, dovresti prima considerare quanto sia importante far funzionare quei browser. Se il 90% dei tuoi clienti usa Netscape, dovresti avere un piano di riserva per loro. Ma se lo fa meno dell'1%, potrebbe non importare così tanto.

Una volta deciso quali browser proverai a supportare, il modo più semplice è semplicemente creare una pagina alternativa in cui visualizzare il video. In quella pagina alternativa, incorporeresti un video utilizzando HTML 4. E poi usa una qualche forma di rilevamento del browser per reindirizzarli lì o semplicemente aggiungi un link a quella pagina su questa.