HTML5 Videa 10 věcí, které designéři potřebují vědět

Revoluce HTML5 je vzrušující web designéři ze všech oblastí světa. Nové specifikace podporují desítky prvků a atributů pro vytváření sémantických webových stránek. Mezi tyto nové funkce patří multimediální značky pro audio a video formáty.

V uplynulých letech Flash-based multimediální přehrávač ve více než dostačující pro streamování na webu a tato technologie je stále nutná pro podporu starších prohlížečů. Ale naštěstí moderní standardy pokročily a začlenění videa HTML5 otevírá dveře desítkám nových příležitostí.

V této příručce bych vám rád nabídl úvod do HTML5 videa pro web. Bude trvat nějakou praxi pochopit nativní přehrávač v prohlížeči a všechny jeho funkce. A nejlepší způsob, jak se seznámit, je nejprve potápění v hlavě!

1. Druhy médií

Když pracujete s přehrávačem flash videa, je příliš běžné přidávat všechny formáty videa do formátu .flv. I když to funguje, většina souborů flv nemůže zachovat kvalitu nikde v blízkosti pokročilejších formátů souborů / kodeků. Existují 3 důležité typy videa, které jsou podporovány HTML5: MP4, WebM a Ogg / Ogv. Typ souboru MPEG-4 je obecně kódován v H.264, což umožňuje přehrávání v přehrávačích Flash třetích stran. To znamená, že nemusíte uchovávat video kopii .flv na podporu nouzové metody! WebM a Ogg jsou dva mnohem novější typy souborů související s HTML5 videem. Ogg používá kódování Theora, které je založeno na standardním formátu zvukového souboru s otevřeným zdrojovým kódem. Ty mohou být uloženy s příponou .ogg nebo .ogv.

WebM je projekt vydaný společností Google, který si můžete přečíst na webových stránkách projektu WebM. Formát je již podporován operacemi Opera, Google Chrome, Firefox 4+ a naposledy Internet Explorer 9. Většina webových profesionálů je dosud neznámá, ale WebM je v budoucnu hlavním video formátem videa..

2. Podpora prohlížeče

Takže který z těchto typů souborů potřebujete pro vaše webové stránky? V ideálním případě by všechny 3 byly skvělé, protože poskytují plné spektrum podpory. To však není realistické a ve skutečnosti můžete všechny základny pokrýt pouze dvěma z nich. Zde je přehled toho, co funguje pro každý prohlížeč:

• Mozilla Firefox - WebM, Ogg
• Google Chrome - WebM, Ogg
• Opera - WebM, Ogg
• Safari - MP4
• Internet Explorer 9 - MP4
• Internet Explorer 6-8 - Žádné HTML5, pouze Flash!

Pokud si vzpomínáte, dříve jsem zmínil, že většina přehrávačů flash videa bude podporovat soubory MP4 tak dlouho, jak budou zakódovány v H.264. Jako takový, každý z těchto prohlížečů vloží MP4 + Flash jako poslední resort. To znamená, že stačí vytvořit dva podporují všechny prohlížeče. MP4 pro Safari / IE9 a volba mezi WebM nebo Ogg pro zbytek.

Podle mého názoru vřele doporučuji držet se formátu WebM. Má za sebou několik velkých jmen (konkrétně Google) a v komunitě HTML5 získala mnoho trakcí. Ogg / Ogv bude podporován, ale s největší pravděpodobností ztratí v popularitě menší velikosti souborů WebM. Můžete si přečíst související dílo o budoucnosti videa na webu, které napsal Sean Golliher.

3. Vložení jednoduchých HTML5 videí

Podívejme se nyní na syntaxi potřebnou k vložení nějakého ukázkového kódu. Vše, co potřebujeme, je značka HTML5 pro odkazování na každou adresu URL filmu.

Všimněte si řízení a automatické přehrávání Atributy nemusí být nastaveny s žádnými hodnotami. Také jsem zahrnul a plakát atribut, který před streamingem načítá obraz přes video přehrávač. Toto je společný náhled s mnoha webovými hráči.

Nabízíme video formát MP4 i WebM. Pokud ani jeden z nich nemůže být načten, zobrazí se uživateli chyba pro aktualizaci prohlížeče.

4. Nabízí Flash Fallback

Výše uvedený příklad je ideální pro všechny webové prohlížeče vyhovující standardům. Musíme si však také uvědomit, že svět není vždy na špičce technologie. Potřebujeme podporovat uživatele ve starších verzích Safari, Mozilla Firefox a zejména Internet Exploreru.

Nejlepší způsob, jak toho dosáhnout, je prostřednictvím záložního přehrávače Flash. Ty mohou být přidány pomocí vložit nebo objekt tagy odkazovat na soubor třetí strany .swf. JW Player a Flowplayer jsou dvě bezplatná open source řešení, která můžete zvážit. Ale také se podívejte na prémiové video přehrávače na ActiveDen, které mohou jít stejně levné jako $ 15- $ 20.

Nyní nechte vyladit výše uvedený kód tak, aby zahrnoval záložní přehrávač Flash, který bude podporovat téměř každý prohlížeč v existenci.

5. Podpora mobilního zařízení

Toto téma je stále velmi diskutované, protože mobilní průmysl je tak mladý. Apple vyšel s podporou pro MP4 na zařízeních Mac a iOS. To znamená, že můžete nativně streamovat videosoubory .mp4 ve vašem iPadu, iPhone nebo iPod Touch ve standardním uživatelském rozhraní videa. To se týká velkého podílu na trhu.

V poslední době zařízení se systémem Android měla těžký čas dostat se na stejnou úroveň podpory. Google však konečně přijal .mp4 web streaming, který nyní využívá téměř všech mobilních uživatelů. A protože Flash zde není možností, MP4 je nejlepším dostupným řešením. Proto chcete nejprve vložit kód .mp4, aby zařízení iOS mohla soubor okamžitě rozpoznat.

6. Safari User Agent

Jedna chyba, kterou je třeba zmínit, je taková, která existuje mezi přehrávači Flash a nativním streamováním HTML5 .mp4 na Safari. Vzhledem k tomu, že prohlížeč může podporovat oba soubory, můžete mít potíže se získáváním proudu videa HTML5 namísto programu Flash. Nicméně díky tomuto skvělému blogovému příspěvku na TUAW je snadné změnit agenta procházení.

To donutí vaši webovou stránku rozpoznat prohlížeč jako spuštěný v jiném zařízení. Nejpravděpodobněji byste si vybrali iPad, který nepodporuje žádné přehrávání Flash. Toto je jediný hlavní problém, na který můžete narazit, když testujete nativní a flash přehrávání metod MP4.

7. Správa ovládacích prvků přehrávače

Věřte tomu nebo ne tam jsou také metody, které můžete použít k manipulaci s ovládači videa HTML5. To vše může být provedeno v JavaScriptu tažením ze sady otevřených metod. Je zde příliš mnoho na to, aby se zde vypsalo, ale pokuste se projít dokumentem mediálního prvku W3C, kde najdete další podrobnosti.

Abychom vám poskytli obecnou představu, blog aplikace Opera dev zveřejnil krátké výukové programy, které jsou skvělé pro začátečníky. Dokonce i když jste nikdy nezvedli JavaScript nebo jQuery dříve, je to stále jednoduché narazit na zem běží s tímto. Můžete volat na určité atributy video média, jako je například ztlumené nebo aktuální čas. Pak můžete provádět akce (ztmavit pozadí, zobrazovat reklamy) na základě těchto kritérií manipulací s DOM v jQuery.

Stejný vývojář v článku Opera nabízí pracovní demo jejich skriptovaného video přehrávače. Možnost přizpůsobit si vlastní ovládací prvky uživatelského rozhraní je vynikající. Je to jen ukázat, jak mocné HTML5 video se stává.

8. Převod video formátu

To je další velký problém, který bude pravděpodobně plést méně tech-důvtipný jednotlivců. Chceme, aby vaše webové stránky stoupl a streaming a teď se budete muset vypořádat s konverzí videí? Vlastně to není tak těžké.

Chcete-li se vypořádat s MP4, která je vaší největší prioritou, můžete použít HandBrake, který je zdarma, open source řešení, které běží na všech 3 hlavních OS. To bude podporovat H.264 spolu s několika dalšími kodeky, což je nejlepší volbou pro uživatele freebie. Pokud máte peníze na vylepšení musím doporučit Xilisoft převodník, který je na Mac App Store za pouhých 40 dolarů celoživotní licence.

Vypadá to, že cesta WebM usnadňuje život. Miro Video Converter je bezplatný nástroj pro Windows a OS X, který produkuje kvalitní soubory WebM. To může také dělat Ogg Theora kódování, které vychází s velmi velkou kvalitu stejně.

9. Vytvoření webového přehrávače

Video formáty s HTML5 specifikacemi jsou pro vývojáře stále nové. Existují otevřené protokoly, které čekají jen na hraní, aby bylo možné použít vlastní ovládací prvky, posuvníky, ikony pro přehrávání / pozastavení atd. Pokud se cítíte odvážně, podívejte se na tento návod, jak vytvořit vlastní přehrávač HTML5 (publikovaný na webu Splashnology).

Kód je pro nováčky trochu intenzivní, protože vyžaduje pokročilé CSS cílení a trochu formálního jQuery. Existují další rámce, na kterých můžete stavět a které již nabízejí přizpůsobený design hráče. Podobně tato prezentace je skvělým úvodem do budování HTML5 video přehrávače.

Vytvoření HTML5 video přehrávače

10. Knihovna VideoJS

VideoJS je pravděpodobně moje oblíbené řešení pro HTML5 video přehrávače. Vše, co potřebujete, je jejich self-hosted JavaScript a CSS stylesheet někde v dokumentu. Pak napíšete standardní HTML5 video kód s některými dalšími třídami pro skinning. Přidal jsem jejich ukázkový kód níže:

Pokud se vám podaří spustit blog WordPress můžete také vyzkoušet jejich vlastní WP plugin. Automaticky bude obsahovat knihovnu js / css na stránkách, kde se zobrazí video HTML5. A můžete to udělat z jakéhokoli příspěvku nebo editoru stránek pomocí krátkých kódů (viz zde).

Závěr

Doufám, že tento úvodní průvodce může vzbudit váš zájem o budoucnost webového videa. Vzhledem k tomu, že se více uživatelů obrací na mobilní zařízení, je důležité, aby byly pro tyto typy médií přijaty standardy HTML5. Web by měl být jednodušší, aby vývojáři mohli vyrábět plně podporovaná řešení mnohem rychleji. Rádi bychom slyšeli vaše nápady a návrhy pro budoucnost videa HTML5. Pokud se chcete podělit, můžete v níže uvedené oblasti komentáře zanechat komentář.