Používanie HTML5 na zobrazenie videa v aktuálnych prehľadávačoch

Hostenie vlastného videa vo formáte HTML 5 vs. Pomocou služby YouTube

YouTube je skvelá stránka. Uľahčuje vkladanie videa internetové stránky až na malé výnimky je pri vykonávaní týchto videí pomerne plynulý. Ak zverejníte video na YouTube, môžete si byť celkom istí, že si ho bude môcť pozrieť ktokoľvek.

Používanie YouTube na vkladanie videí má však určité nevýhody

Väčšina problémov s YouTube sú na strane spotrebiteľa, a nie na strane dizajnéra, napríklad:

• Pomalé vyhľadávanie a indexovanie
• Výpadky servera
• Obsah sa odstraňuje (zdanlivo) svojvoľne
• Príliš zlý obsah

Existuje však niekoľko dôvodov, prečo je služba YouTube škodlivá aj pre vývojárov obsahu, napríklad:

• Maximálna dĺžka videa 10 minút (pre bezplatné účty)
• Zlý výkon nahrávania
• YouTube získava neobmedzené práva na používanie vášho videa
• Ktokoľvek z používateľov YouTube získava neobmedzené práva na používanie vášho videa

Video HTML5 má oproti YouTube niektoré výhody

Použitím HTML5 pre video vám umožňuje ovládať všetky aspekty vášho videa, od toho, kto si ho môže pozrieť, aké je dlhé, čo obsahuje obsah, kde je hostené a ako server pracuje. A HTML5 vám dáva príležitosť kódovať vaše video v toľkých formátoch, koľko potrebujete, aby ste sa uistili, že si ho môže pozrieť maximálny počet ľudí. Vaši zákazníci nepotrebujú doplnok ani čakať, kým YouTube vydá novšiu verziu.

Video HTML5 samozrejme ponúka niektoré nevýhody

Tie obsahujú:

• Video musíte kódovať najmenej do troch rôznych kodekov.
• Musíte zaistiť určitý JavaScript, aby ste zabezpečili, že prehľadávače, ktoré nepodporujú HTML5 bude pracovať.
• Váš server musí byť schopný zvládnuť požiadavky na rýchlosť spojenia s hostovaním videí.

Stručný prehľad podpory videa na webe

Pridávanie videa na webové stránky bolo dlho zložitým procesom. Mohlo sa pokaziť toľko vecí:

• Najprv použijete tag na vloženie videa na svoju stránku. ALE táto značka je zastaraná v prospech inej značky. A niektoré prehliadače to aj tak nikdy dobre nepodporili.
• Takže prepnete na značka, ale staršie prehľadávače ju nepodporujú a novšie prehľadávače sú v jej podpore povrchné.
• Potom si myslíte Blesk! A zakódujte svoje video ako súbor FLV. ale Blesk zariadenie Windows už nie je podporované.
• Takže sa rozhodnete nahrať svoje video na web na vkladanie videí, ako je YouTube, ale potom máte problémy so službou YouTube, o ktorých sme hovorili.
• Nakoniec sa rozhodnete pre prácu s formátom HTML5, ale prehľadávač Internet Explorer ho nepodporuje (až do prehľadávača Internet Explorer 9). A aj keď tak urobíte, sú podporované dva štandardy videokodekov a iba jeden prehľadávač, ktorý dokáže používať oba.

Čo máš teda robiť? Vzdanie sa videa nie je pre väčšinu webov už možné, pretože video je čoraz dôležitejšie. Mnohé stránky úspešne prešli na video.

Nasledujúce stránky tohto článku vás prevedú návodom, ako pridať video na vaše webové stránky, ktoré fungujú vo Firefoxe 3.5, Opera 10.5, Chrome 3.0, Safari 3 a 4, iPhone a Android a Internet Explorer 7 a 8. K dispozícii budete mať tiež kľúče, ktoré v prípade potreby potrebujete pridať pre ďalšie staršie prehliadače.

Vytvorte a upravte svoje video

Prvá vec, ktorú potrebujete, keď chcete umiestniť video na webovú stránku, je skutočné video. Môžete snímať nepretržite a následne upravovať, aby ste vytvorili prvok, alebo ho môžete skriptovať a naplánovať vopred. Či tak alebo onak funguje dobre, je to všetko, s čím ste spokojní. Ak neviete, aký typ videa by ste mali vytvoriť, pozrite si tieto nápady v príručke Desktop Video Guide:

• Rodinné videoprojekty
• Marketingové a propagačné videá
• Video virtuálne prehliadky
• Ako na videá
• Svadobné videá

Naučte sa, ako nahrávať vysokokvalitné video

Uistite sa, že viete, ako nahrávať v interiéroch aj exteriéroch, ako aj nahrávať zvuk. Osvetlenie je tiež veľmi dôležité - zábery, ktoré sú príliš jasné, poškodia oči a príliš tmavé vyzerajú iba bahnito a neprofesionálne. Aj keď plánujete na svojom webe mať iba 30-sekundové video, čím vyššia je kvalita, tým lepšie sa to na vašom webe prejaví.

Pamätajte tiež, že autorské práva sa vzťahujú na všetky zvuky alebo hudbu (rovnako ako stopáž), ktoré môžete vo svojom videu použiť. Ak nemáte prístup k priateľovi, ktorý by vám mohol napísať a prehrať pieseň, musíte ju nájsť hudba bez licenčných poplatkov hrať na pozadí. Existujú aj miesta, kde môžete vytvoriť stopáž a pridať ich do svojich videí.

Úpravy videa

Nezáleží na tom, aký softvér na úpravy použijete, iba ak ho poznáte a viete ho efektívne používať. Gretchen, Sprievodca videom pre počítač, má niekoľko profesionálnych tipov na úpravu videa, ktoré vám môžu pomôcť upraviť vaše videá tak, aby vyzerali skvele.

Uložte svoje video do formátu MOV alebo AVI (alebo MPG, CD, DV)

Vo zvyšku tohto tutoriálu budeme predpokladať, že máte svoje video uložené v nejakom vysokokvalitnom (nekomprimovanom) formáte, ako je AVI alebo MOV. Aj keď môžete tieto súbory použiť také, aké sú, narazíte na všetky problémy s videom, o ktorých sme už hovorili. Nasledujúce stránky vysvetľujú, ako konvertovať súbor na tri typy tak, aby ho bolo možné zobraziť v najväčšom počte prehľadávačov.

Preveďte video na Ogg pre Firefox

Prvý formát, do ktorého prevedieme, je Ogg (niekedy sa mu hovorí Ogg-Theora). Tento formát môžu zobraziť všetky prehliadače Firefox 3.5, Opera 10.5 a Chrome 3.

Zatiaľ čo Ogg bohužiaľ podporuje prehliadač, mnoho známych videoprogramov, ktoré si môžete kúpiť (Adobe Media Encoder, QuickTime atď.), Neponúka možnosť konverzie Ogg. Jediným spôsobom, ako previesť video do formátu Ogg, je vyhľadať program na prevod na webe.

Možnosti prevodu

Existuje online nástroj s názvom Media-Convert, ktorý tvrdí, že prevádza rôzne formáty videa (a zvuku) do iných formátov videa (a zvuku). Keď sme to vyskúšali s mojím 3-sekundovým testovacím videom, nedokázali sme to dosiahnuť, aby fungovalo na mojom počítači Mac. Ale môžete mať viac šťastia. Výhodou tejto stránky je, že je zadarmo.

Niektoré ďalšie nástroje, ktoré sme našli, zahŕňajú:

• Miro Video Converter (Windows Macintosh): Tento program má výhodu konverzie na Ogg aj MP4 (H.264) a je to open-source.
• Zadarmo Video Converter: Myslíme si, že toto má verziu pre Windows aj Macintosh, ale bolo ťažké povedať z ich stránky
• Jednoduchý kodér Theora (Macintosh): Toto je ten, ktorý zvykneme používať.

Keď máte video uložené vo formáte Ogg, uložte ho na svoje webové stránky a na nasledujúcej stránke ho preveďte do iných formátov pre ďalšie prehliadače.

Konvertujte video na MP4 pre Safari a Internet Explorer

Ďalším formátom, do ktorého by ste mali svoje video previesť, je MP4 (video H.264), ktoré je možné prehrať v prehliadačoch Internet Explorer 9 a novších, Safari 3 a 4 a iPhone a Android.

Tento formát je dostupnejší v komerčných produktoch a pravdepodobne už máte program, ktorý prevádza formát MP4, ak máte editor videa. Ak máte Adobe Premiere môžete použiť program Adobe Video Encoder alebo ak máte program QuickTime Pro, ktorý tiež funguje. Mnoho prevádzačov, o ktorých sme hovorili na predchádzajúcej stránke, tiež prevádza videá do formátu MP4.

• MediaConvert: Online nástroj AWS.
• Miro Video Converter (Windows Macintosh): Tento program má výhodu konverzie na Ogg aj MP4 (H.264) a je to open-source.
• SUPER (Windows): Skonvertuje sa mnoho rôznych typov súborov na MP4
• Zadarmo Video Converter: Myslíme si, že toto má verziu pre Windows aj Macintosh, ale bolo ťažké povedať z ich stránky.

Pridajte prvok videa na svoju webovú stránku

1. Vytvorte svoju webovú stránku tak, ako by ste ju vytvorili bežne:

2. Vo vnútri tela umiestnite
3. Rozhodnite sa, aké atribúty má mať vaše video: Odporúčame používať ovládacie prvky a predbežné načítanie. Ak vaše video nemá dobrú prvú scénu, použite možnosť plagátu.
   automatické prehrávanie - spustí sa hneď po stiahnutí
4. ovládacie prvky - umožňujú vašim čitateľom ovládať video (pozastaviť, pretočiť dozadu, rýchlo dopredu)
5. slučka - spustenie videa od začiatku až do konca
6. preload - predbežné stiahnutie videa, aby bolo pripravené rýchlejšie, keď na neho zákazník klikne
7. plagát - definujte obrázok, ktorý chcete použiť pri zastavení videa
8. Potom pridajte zdrojové súbory pre dve verzie videa (MP4 a OGG) do priečinka
9. Otvorte stránku v prehliadačoch Chrome 1, Firefox 3.5, Opera 10 a / alebo Safari 4 a skontrolujte, či sa zobrazuje správne. Mali by ste to otestovať minimálne v prehliadačoch Firefox 3.5 a Safari 4, pretože každý z nich používa iný kodek.

To je všetko. Po zavedení tohto kódu budete mať k dispozícii video, ktoré funguje vo prehliadačoch Firefox 3.5, Safari 4, Opera 10 a Chrome 1. Čo však s Internet Explorerom?

Na pridanie videa na webové stránky je použitie kódu HTML 5 veľmi jednoduché. Väčšina moderných prehľadávačov podporuje video vo formáte HTML 5, aj keď nie všetky ho podporujú rovnakým spôsobom. Čo to však znamená, je to, že ak video uložíte vo formátoch Ogg aj MP4, môžete napísať iba štyri alebo päť riadkov kódu HTML, aby sa zobrazilo vo väčšine moderných prehľadávačov (okrem programu Internet Explorer 8). Tu je postup:

Napíšte značku doctype HTML 5, aby prehliadače vedeli, že HTML 5 môžu očakávať:

1. Vytvorte svoju webovú stránku tak, ako by ste ju vytvorili bežne:

2. Vo vnútri tela umiestnite
3. Rozhodnite sa, aké atribúty má mať vaše video: Odporúčame používať ovládacie prvky a predbežné načítanie. Ak vaše video nemá dobrú prvú scénu, použite možnosť plagátu.
   automatické prehrávanie - spustí sa hneď po stiahnutí
4. ovládacie prvky - umožňujú vašim čitateľom ovládať video (pozastaviť, pretočiť dozadu, rýchlo dopredu)
5. slučka - spustenie videa od začiatku až do konca
6. preload - predbežné stiahnutie videa, aby bolo pripravené rýchlejšie, keď na neho zákazník klikne
7. plagát - definujte obrázok, ktorý chcete použiť pri zastavení videa
8. Potom pridajte zdrojové súbory pre dve verzie videa (MP4 a OGG) do priečinka
9. Otvorte stránku v prehliadačoch Chrome 1, Firefox 3.5, Opera 10 a / alebo Safari 4 a skontrolujte, či sa zobrazuje správne. Mali by ste to otestovať minimálne v prehliadačoch Firefox 3.5 a Safari 4, pretože každý z nich používa iný kodek.

To je všetko. Keď tento kód nastavíte, budete mať k dispozícii video, ktoré funguje vo prehliadačoch Firefox 3.5, Safari 4, Opera 10, Internet Explorer 9+ a Chrome 1.

Vyskúšajte čo najviac prehliadačov

Kvôli pohode by ste tiež mali otestovať, čo robia, v starších prehliadačoch, najmä ak veľa vašich čitateľov používa staršie prehliadače.

Testovanie stránok s videom je zásadné, ak chcete mať úspešné spustenie. Mali by ste byť istí, že ste svoju stránku otestovali v najpopulárnejších prehliadačoch a verziách svojich webových stránok.

Zistili sme, že aj keď je možné na testovanie videa použiť nástroje ako BrowserLab a AnyBrowser, nie je to také spoľahlivé ako samotné vyvolanie stránky v prehliadači. Keď to urobíte, môžete skutočne zistiť, či to funguje alebo nie.

Pretože ste sa dostali do všetkých problémov s kódovaním videa do viacerých formátov, mali by ste ho otestovať, aby sa zabezpečilo, že sa zobrazuje vo viacerých prehliadačoch. To znamená, že by ste to mali minimálne otestovať vo Firefoxe, Safari a IE.

Kvôli pohode by ste tiež mali otestovať, čo robia, v starších prehliadačoch, najmä ak veľa vašich čitateľov používa staršie prehliadače.

Príprava videa v starších prehliadačoch

Ako pri každej webovej stránke, aj tu by ste si mali najskôr uvedomiť, aké dôležité je uviesť tieto prehliadače do činnosti. Ak 90% vašich zákazníkov používa Netscape, mali by ste pre nich mať záložný plán. Ale ak áno menej ako 1%, nemusí to až tak záležať.

Keď sa rozhodnete, ktoré prehľadávače sa pokúsite podporovať, najjednoduchším spôsobom je vytvoriť pre nich alternatívnu stránku na prezeranie videa. Na túto alternatívnu stránku by ste vložili video pomocou HTML 4. Potom ich buď presmerujte nejakou formou detekcie prehľadávača, alebo na túto stránku jednoducho pridajte odkaz na túto stránku.