Používání HTML5 k zobrazení videa v aktuálních prohlížečích

Hostování vlastního videa HTML 5 vs. Používání YouTube

YouTube je skvělý web. Umožňuje snadné vkládání videa webové stránky rychle a až na malé výjimky je při provádění těchto videí poměrně plynulé. Pokud zveřejníte video na YouTube, můžete si být docela jisti, že jej bude moci sledovat kdokoli.

Používání YouTube k vkládání videí má však některé nevýhody

Většina problémů s Youtube jsou spíše na straně spotřebitele než na straně designéra, například:

• Pomalé vyhledávání a indexování
• Výpadky serveru
• Odstraňovaný obsah (zdánlivě) libovolně
• Příliš špatný obsah

Existuje však několik důvodů, proč je YouTube špatný i pro vývojáře obsahu, například:

• Maximální délka videa 10 minut (pro bezplatné účty)
• Špatný výkon nahrávání
• YouTube získává neomezená práva na používání vašeho videa
• Kterýkoli uživatel YouTube získá neomezená užívací práva k vašemu videu

Video HTML5 přináší oproti YouTube některé výhody

Použitím HTML5 pro video vám umožňuje ovládat všechny aspekty vašeho videa, od toho, kdo jej může zobrazit, jak dlouhé je, co obsahuje obsah, kde je hostováno a jak server funguje. A HTML5 vám dává příležitost kódovat vaše video v tolika formátech, kolik potřebujete, abyste se ujistili, že si ho může prohlédnout maximální počet lidí. Vaši zákazníci nepotřebují plugin ani čekat, až YouTube vydá novější verzi.

Video HTML5 samozřejmě nabízí některé nevýhody

Tyto zahrnují:

• Video musíte zakódovat alespoň do tří různých kodeků.
• Musíte zahrnout nějaký JavaScript, abyste zajistili, že prohlížeče nepodporují HTML5 bude pracovat.
• Váš server musí být schopen zvládnout požadavky na šířku pásma hostování videí.

Stručný přehled podpory videa na webu

Přidávání videa na webové stránky je již dlouho náročný proces. Bylo tolik věcí, které by se mohly pokazit:

• Nejprve použijete tag pro vložení videa na vaši stránku. ALE tato značka je zastaralá ve prospěch jiné značky. A některé prohlížeče to stejně dobře nepodporovaly.
• Takže přepnete na tag, ale starší prohlížeče jej nepodporují a novější prohlížeče jsou v jeho podpoře povrchní.
• Pak si myslíte Blikat! A zakódujte své video jako soubor FLV. Ale Blikat zařízení Windows již není podporováno.
• Rozhodnete se tedy nahrát své video na web pro vkládání videí, jako je YouTube, ale pak máte problémy s YouTube, o kterých jsme diskutovali.
• Nakonec se rozhodnete použít HTML5, ale Internet Explorer jej nepodporuje (až do aplikace Internet Explorer 9). A i když to uděláte, existují dva standardy video kodeků, které jsou podporovány, a pouze jeden prohlížeč, který může používat oba.

Co tedy máte dělat? Vzdání se videa již pro většinu webů není možné, protože video je stále důležitější. Mnoho webů úspěšně přešlo na video.

Následující stránky tohoto článku vás provedou tím, jak přidat video na vaše webové stránky, které fungují ve Firefoxu 3.5, Opera 10.5, Chrome 3.0, Safari 3 a 4, iPhone a Android a Internet Explorer 7 a 8. Budete také mít klíče, které potřebujete k přidání podpory pro další starší prohlížeče, pokud je to nutné.

Vytvořte a upravte své video

První věc, kterou potřebujete, když chcete umístit video na webovou stránku, je skutečné video. Můžete buď nepřetržitě natáčet a následně upravovat, abyste vytvořili prvek, nebo jej můžete skriptovat a naplánovat předem. Ať tak či onak funguje dobře, je to přesně to, co vám vyhovuje. Pokud nevíte, jaký typ videa byste měli vytvořit, podívejte se na tyto nápady v příručce Desktop Video Guide:

• Rodinné videoprojekty
• Marketingová a propagační videa
• Video virtuální prohlídky
• Jak videa
• Svatební videa

Naučte se, jak nahrávat vysoce kvalitní video

Ujistěte se, že víte, jak nahrávat uvnitř i venku a jak nahrávat zvuk. Osvětlení je také velmi důležité - záběry, které jsou příliš jasné, bolí oči a příliš tmavé vypadají jen blátivě a neprofesionálně. I když plánujete mít na svém webu pouze 30sekundové video, čím vyšší kvalita, tím lépe se to na vašem webu projeví.

Pamatujte také, že autorská práva se vztahují na všechny zvuky nebo hudbu (stejně jako záběry z akcí), které byste ve videu mohli chtít použít. Pokud nemáte přístup k příteli, který vám může napsat a přehrát skladbu, musíte ji vyhledat hudba bez autorských poplatků hrát na pozadí. Existují také místa, kde můžete zaznamenat záběry a přidat je do svých videí.

Úpravy videa

Nezáleží na tom, jaký editační software používáte, pokud ho znáte a dokážete ho efektivně používat. Gretchen, příručka Desktop Video, má několik profesionálních tipů pro úpravy videa, které vám pomohou upravit vaše videa tak, aby vypadala skvěle.

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

Pro zbytek tohoto tutoriálu budeme předpokládat, že máte své video uložené v nějakém vysoce kvalitním (nekomprimovaném) formátu, jako je AVI nebo MOV. I když můžete tyto soubory použít tak, jak jsou, narazíte na všechny problémy s videem, o kterých jsme již hovořili. Následující stránky vysvětlují, jak převést soubor do tří typů tak, aby jej bylo možné zobrazit v největším počtu prohlížečů.

Převeďte video na Ogg pro Firefox

První formát, do kterého převedeme, je Ogg (někdy nazývaný Ogg-Theora). Tento formát je prohlížeč Firefox 3.5, Opera 10.5 a Chrome 3.

Zatímco Ogg bohužel podporuje prohlížeč, mnoho známých video programů, které si můžete koupit (Adobe Media Encoder, QuickTime atd.), Nenabízí možnost převodu Ogg. Jediným způsobem, jak převést video do Oggu, je najít program pro převod na webu.

Možnosti převodu

Existuje online nástroj s názvem Media-Convert, který tvrdí, že převádí různé formáty videa (a zvuku) do jiných formátů videa (a zvuku). Když jsme to zkusili s mým 3sekundovým testovacím videem, nemohli jsme to nechat fungovat na mém Macu. Ale můžete mít větší štěstí. Výhodou tohoto webu je, že je zdarma.

Některé další nástroje, které jsme našli, zahrnují:

• Miro Video Converter (Windows Macintosh): Tento program má výhodu převodu na Ogg i MP4 (H.264) a je to open-source.
• Zdarma Video Converter: Myslíme si, že to má verzi pro Windows i Macintosh, ale bylo těžké to zjistit z jejich stránek
• Jednoduchý kodér Theora (Macintosh): Toto je ten, který máme tendenci používat.

Jakmile budete mít video uloženo ve formátu Ogg, uložte jej na místo na svém webu a přejděte na další stránku a převeďte jej do jiných formátů pro jiné prohlížeče.

Převeďte video na MP4 pro Safari a Internet Explorer

Další formát, do kterého byste měli video převést, je MP4 (video H.264), aby jej bylo možné přehrávat v aplikaci Internet Explorer 9 a vyšší, Safari 3 a 4 a iPhone a Android.

Tento formát je snadněji dostupný v komerčních produktech a pravděpodobně již máte program, který převádí na MP4, pokud máte editor videa. Pokud máte Adobe Premiere můžete použít Adobe Video Encoder, nebo pokud máte QuickTime Pro, který také funguje. Mnoho převaděčů, které jsme probrali na předchozí stránce, také převádí videa do MP4.

• MediaConvert: Online nástroj AWS.
• Miro Video Converter (Windows Macintosh): Tento program má výhodu převodu na Ogg i MP4 (H.264) a je to open-source.
• SUPER (Windows): Převede mnoho různých typů souborů na MP4
• Zdarma Video Converter: Myslíme si, že to má verzi pro Windows i Macintosh, ale bylo těžké to zjistit z jejich stránek.

Přidejte prvek Video na svou webovou stránku

1. Vytvořte svou webovou stránku tak, jak byste ji normálně vytvořili:

2. Uvnitř těla umístěte
3. Rozhodněte, jaké atributy má vaše video mít: Doporučujeme používat ovládací prvky a předběžné načítání. Pokud vaše video nemá dobrou první scénu, použijte možnost plakát.
   automatické přehrávání - spustí se ihned po stažení
4. ovládací prvky - umožňují čtenářům ovládat video (pozastavit, přetočit zpět, přetočit vpřed)
5. smyčka - spustí video od začátku až do konce
6. preload - předběžné stažení videa, aby bylo rychlejší, když na něj zákazník klikne
7. plakát - definujte obrázek, který chcete použít při zastavení videa
8. Pak přidejte zdrojové soubory pro dvě verze vašeho videa (MP4 a OGG) uvnitř
9. Otevřete stránku v prohlížeči Chrome 1, Firefox 3.5, Opera 10 nebo Safari 4 a zkontrolujte, zda se zobrazuje správně. Měli byste to otestovat minimálně ve Firefoxu 3.5 a Safari 4 - protože každý používá jiný kodek.

A je to. Jakmile tento kód zavedete, budete mít video, které funguje ve Firefoxu 3.5, Safari 4, Opera 10 a Chrome 1. Ale co Internet Explorer?

Přidávání videa na webové stránky pomocí HTML 5 je velmi snadné. Většina moderních prohlížečů podporuje video ve formátu HTML 5, i když ho všechny nepodporují stejným způsobem. To však znamená, že pokud video uložíte ve formátech Ogg i MP4, můžete napsat jen čtyři nebo pět řádků HTML, aby se zobrazilo ve většině moderních prohlížečů (kromě Internet Exploreru 8). Zde je postup:

Napište značku doctype HTML 5, aby prohlížeče věděly, že mohou očekávat HTML 5:

1. Vytvořte svou webovou stránku tak, jak byste ji normálně vytvořili:

2. Uvnitř těla umístěte
3. Rozhodněte, jaké atributy má vaše video mít: Doporučujeme používat ovládací prvky a předběžné načítání. Pokud vaše video nemá dobrou první scénu, použijte možnost plakát.
   automatické přehrávání - spustí se ihned po stažení
4. ovládací prvky - umožňují čtenářům ovládat video (pozastavit, přetočit zpět, přetočit vpřed)
5. smyčka - spustí video od začátku až do konce
6. preload - předběžné stažení videa, aby bylo rychlejší, když na něj zákazník klikne
7. plakát - definujte obrázek, který chcete použít při zastavení videa
8. Pak přidejte zdrojové soubory pro dvě verze vašeho videa (MP4 a OGG) uvnitř
9. Otevřete stránku v prohlížeči Chrome 1, Firefox 3.5, Opera 10 nebo Safari 4 a zkontrolujte, zda se zobrazuje správně. Měli byste to otestovat alespoň ve Firefoxu 3.5 a Safari 4, protože každý používá jiný kodek.

A je to. Jakmile tento kód zavedete, budete mít video, které funguje ve Firefoxu 3.5, Safari 4, Opera 10, Internet Explorer 9+ a Chrome 1.

Vyzkoušejte co nejvíce prohlížečů

Pro větší klid byste měli také testovat ve starších prohlížečích, abyste zjistili, co dělají, zvláště pokud mnoho vašich čtenářů používá starší prohlížeče.

Testování stránek s videem je zásadní, pokud chcete mít úspěšné spuštění. Nezapomeňte otestovat svou stránku v nejpopulárnějších prohlížečích a verzích vašeho webu.

Zjistili jsme, že i když je možné k testování videa použít nástroje jako BrowserLab a AnyBrowser, není to tak spolehlivé, jako když si stránku v prohlížeči sami vytvoříte. Když to uděláte, můžete opravdu zjistit, zda to funguje, nebo ne.

Protože jste se dostali do všech problémů s kódováním videa ve více formátech, měli byste jej otestovat, abyste se ujistili, že se zobrazuje ve více prohlížečích. To znamená, že byste jej měli otestovat minimálně ve Firefoxu, Safari a IE.

Pro větší klid byste měli také testovat ve starších prohlížečích, abyste zjistili, co dělají, zvláště pokud mnoho vašich čtenářů používá starší prohlížeče.

Zprovoznění videa ve starších prohlížečích

Stejně jako u každé webové stránky byste měli nejprve zvážit, jak důležité je zajistit, aby tyto prohlížeče fungovaly. Pokud 90% vašich zákazníků používá Netscape, měli byste pro ně mít záložní plán. Ale pokud ano méně než 1%, nemusí to tak záležet.

Jakmile se rozhodnete, které prohlížeče se pokusíte podporovat, nejjednodušší je jednoduše pro ně vytvořit alternativní stránku pro prohlížení videa. Na tuto alternativní stránku byste vložili video pomocí HTML 4. A pak buď použijte nějakou formu detekce prohlížeče, abyste je tam přesměrovali, nebo jen přidejte odkaz na tuto stránku na této stránce.