Samozřejmě rozmach videa nespočívá v tom, že video je cool. Hlavní důvod je v tom, že jeden obrázek vystačí za tisíc slov. A teď si představte, že promítáte video rychlostí 25 obrázků za sekundu a video trvá minutu. A navíc vaše video obsahuje zvuk. To je panečku pořádné množství informací. Nedivme se proto, že se do roku 2014 očekává zčtyřnásobení celkového množství dat, které proteče internetem (zdroj).

(Vím, že jsem minule slíbil, že si dnes povíme i o elementu <audio>, ale do jednoho článku se mi to prostě nevešlo. – Pozn. aut.)

Trocha historie

Když vzniklo HTML, nikdo netušil, že něco jako video se stane populárním. A při nástupu videa se tak HTML stalo poněkud bezzubým. Nenabízelo standardizovaný způsob, jak vložit video do stránek. Jediné podporované video tak byly animované GIFy.

Touha po videu však byla velká a dala tak vzniknout celé řadě konkurenčních (a proprietárních) přehrávačů, které se do prohlížečů instalovaly jako pluginy. Real Player, Windows Media Player, QuickTime, etc. Až v roce 2005 jeden zvítězil a ze všech ostatních udělal v boji o video na webu trpaslíky potácející se na hranici používanosti. Byl to Adobe Flash. Vyhrál díky tomu, že byl nainstalován skoro všude, a také proto, že byl tím, co si zvolil YouTube. (Což se zase vrací k tomu, že byl nainstalován skoro všude.)

A tak jsme do stránek vkládali (a vkládáme) video nějak takhle:

<object width="480" height="385">
    <param name="movie" value="http://www.youtube.com/v/siOHh0uzcuY&hl=en_US&fs=1&"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param></p>
    <embed src="http://www.youtube.com/v/siOHh0uzcuY&hl=en_US&fs=1&"
    type="application/x-shockwave-flash" allowscriptaccess="always"
    allowfullscreen="true" width="425" height="344"></embed>
</object>

Není to moc hezké a místy to je šifra, ale funguje to, zvykli jsme si a asi bychom s tím i vydrželi, kdyby v roce 2007 nepřišel CEO Apple Steve Jobs a neoznámil, že operační systém pro jeho iPhone (dříve OS X, nyní přejmenován na iOS) nepodporuje a nebude podporovat Flash. Myslet si o tomto kroku můžete co chcete, ale Apple se ho drží (a držet bude, přečtěte si Thoughts on Flash) a my webdesigneři se s tím musíme srovnat. Ignorovat již téměř sto milionů zařízení bez podpory Flashe si nikdo nemůže dovolit.

<video> se představuje

HTML5 zavádí nový element <video>, který umožňuje (teoreticky) jednoduše vložit video do stránky. Šifra je pryč, tag video je velmi jednoduchý:

<video src=hixiebojuje.ogv
    width=320
    height=240
    controls
    poster=hixie.jpg>
    Download the <a href=video.ogg>Boj Hixieho s výrobci prohlížečů o jediný správný kodek pro video</a>
</video>

Atributy

Většina použitých atributů tagu <video> je snadno pochopitelná, ale pojďme si je projít a představit si ještě pár dalších, které můžeme použít:

• „src“ – cesta k videu, které má být přehráno
• „width“ a „height“ – stejně jako u obrázků můžete nastavit šířku a výšku videa. Pokud nenastavíte, prohlížeč použije to, co se mu zdá pro video vhodné. Můžete taky nastavit jen jednu velikost, druhou si prohlížeč dopočítá.
• „controls“ – pokud uvedete tento atribut, tak prohlížeč zobrazí své defaultní prvky pro ovládání videa (přehraj, zastav atd). Můžete si však i vytvořit své, ale to si ukážeme až v příštím díle.
• „poster“ – je url obrázku, který se zobrazí v době, kdy se video načítá.
• „autoplay“ – z názvu je to jasné. Tento atribut zajistí, že se video pustí ihned po načtení.
• „autobuffer“ – pokud jste si jisti, že uživatel si bude chtít video pustit, můžete ho začít automaticky načítat, jinak se začne načítat až ve chvíli, kdy ho uživatel aktivuje.
• „loop“ – video se bude přehrávat ve smyčce

Pokud se podíváte na příklad a překvapila vás věta uvedená uvnitř atributu video tak vězte, že takto jednoduše nastavíte fallback, tedy chování pro případ, že prohlížeč video neumí. Pokud tedy prohlížeč nepodporuje <video>, zobrazí se uživateli věta, že si může video stáhnout. Což je skvělé, ale mohli bychom to ještě o něco vylepšit (a také to v příštím díle vylepšíme).

Podpora

Pochopitelná otázka webdesignéra bez zkušenosti s videem by zněla „A jaké prohlížeče to již podporují?“ Samotný element <video> však není oproti zbytku žádný problém. Podporu má (případně je přislíbena) Opera 10.5+, Firefox 3.5, Safari 3+, Chrome, IE9, iPhone 3.0+, Android 2.0+. U takhle nové věci velmi solidní základ.

Jenže legrace teprve začíná.

Kodeky, kontejnery a podobné libůstky

Kdo jste někdy dělal s videem, tak jistě víte, že jedna věc je obalující kontejner videa (taková skořápka, která drží pohromadě audio a video stopu – to, co označujeme příponami .avi, .mp4, .mov, .webm apod.) a druhá věc je kodek, kterým je video komprimováno. A ne jeden, audio a video stopa má samozřejmě každá svůj speciální kodek.

A jak se na webu již stalo tradicí, tak výrobci prohlížečů se nezvládli úplně shodnout na tom, jaké kodeky a formáty používat. Ne, to je moc politicky korektní věta. Kamarád by vám řekl, že v tom je zase bordel a každý si podporuje, co se mu líbí.

Pro rýpaly, kteří budou říkat, že se to mělo napsat rovnou do specifikace, a bylo by!, je na místě dodat: snaha napsat, jaký kodek používat přímo do specifikace samozřejmě byla. Proběhla debata, výrobci prohlížečů se nedohodli a editor specifikace Ian Hickson neměl jinou možnost než upustit od snah specifikovat formát videa.

Kde jsou problémy

Problémy tkví ve dvou věcech. Za prvé v tom, jaký kontejner by se měl pro video používat, a za druhé s jakým audio a video kodekem. Někdo tlačí zcela otevřené formáty, někdo tvrdí (dle názoru autora poměrně oprávněně), že patentem chráněné H.264 (více si povíme o pár řádků níže) nabízí lepší kvalitu. (Schválně si tipněte, kdo je kdo.)

Poměrně logické řešení by bylo implementovat všechny dostupné možnosti a nechat výběr na nás, webdesignerech. Jenže právě tady přichází kámen úrazu. Za patentem chráněné kodeky se musí platit implementační poplatek. A to Mozilla rezolutně odmítla. Jiným (Apple) se zase nechce investovat energii do implementace něčeho, co se jim nezdá technicky lepší.

Ale konkrétně, kde jsou rozdíly?

Video kodeky

Nejprve se pojďme podívat na technické rozdíly mezi jednotlivými kodeky (tedy něčeho, co zajistí převedení do nul a jedniček na jedné straně a na druhé straně zase zpátky do obrázků). Pro video bychom jich mohli použít spoustu, na internetu jsou ovšem relevantní v tuto chvíli tři (a všechny jsou ztrátové, zmenšují tedy velikost videa za cenu ztráty kvality obrazu):

kodek H.264

Vyvinut a standardizován v roce 2003 skupinou MPEG. Cílí v podstatě všechna zařízení na trhu, od mobilů s pomalými procesory po nejnovější herní PC. Proto obsahuje několik profilů, od toho základního pro mobily a web (podporuje jej právě např. iPhone a Android, dlouho na něm jel také YouTube, nyní však přechází na VP8, potažmo WebM) po ty nejvyšší, používané na Blu-Ray discích. H.264 poskytuje skutečně výbornou kvalitu videa napříč profily.

H.264 je zaběhnutý formát a mnoho zařízení tak obsahuje hardware, které jeho kódování/dekódování urychluje. Tím se žádný jiný níže zmíněný kodek zatím chlubit nemůže. H.264 má jeden zásadní problém – je patentově chráněný a pokud jej chce někdo implementovat, musí zaplatit licenční poplatek.

kodek Theora

Vyvinul se v roce 2004 z kodeku VP3. Je to otevřený kodek pro kódování videa a byl vyvinut skupinou Xiph.org Foundation. Nejsou známy žádné patenty, které by ho zasahovaly (kromě těch, které zmíněná organizace licencovala jako royalty-free). Často se však mluví o tom, že je jen otázkou času, kdy se nějaký patent objeví.

Kvalita videa, kterou poskytuje Theora není v porovnání s H.264 či VP8 nikterak úžasná. Porovnejte sami.

kodek VP8

Nedávno otevřený kodek vyvinutý On2 (která předtím vyvinula již zmíněné VP3, potažmo Theora). Letos On2 koupil Google, kodek otevřel jako open-source a patenty licencoval jako royalty-free. (Už i u něj jsem ale četl, že bude lepší být opatrný, protože nějaký patent se objevit může. Narozdíl od Theora za ním však stojí Google, který by mohl většinu případných problémů vyřešit.)

Kvalitativně je na tom o u webových videí dobře. Dokonce maličko lépe než základní profil H.264, tedy ten, který se na webu nejčastěji používá. Vyšším profilům H.264 nemůže konkurovat, to nás pro použití na webu však příliš nezajímá.

Odkaz: nejlepší porovnání H.264 a VP8 co jsem nalezl.

Audio kodeky

Pokud chceme do našeho videa zakódovat i audio, musíme pro něj zase použít kodek. Těch je znovu velké množství, naštěstí pro potřeby webu se můžeme zaměřit jen na tři.

Nejprve však několik slov o kanálech (anglicky channels). Jistě všichni víte, co je to stereo (z každého sluchátka vám hraje jiný zvuk a váš mozek si to složí dohromady). Technicky to je dělané tak, že zvukový záznam má dva kanály, každý pro jedno sluchátko. Pokud bych chtěl mít doma 6 bedniček a udělat si takové domácí kino, tak budu potřebovat kolik kanálů? Správně, 6. Více kanálů používá např. systém Dolby.

MP3

MP3 je dneska de facto průmyslový standard. Vždyť se podle tohoto kodeku jmenují i kapesní přehrávače. MP3 umí maximálně 2 kanály a zvuk lze kódovat v různém bitrate od 32 kbps do 320 kbps. Čím vyšší bitrate, tím lepší zvuk a větší soubor. MP3 bylo standardizováno v roce 1991 a je patentově chráněno.

Zájemci si další informace jistě zjistí jinde.

AAC

Formát známý hlavně proto, že si jej Apple vybral jako hlavní audio kodek svého iTunes Store. AAC umí až 48 kanálů s horní hranicí bitrate 320 kbps. AAC bylo standardizováno v roce 1997 a je patentově chráněno.

Vorbis

Jediný otevřený kodek z těch tří, které mají význam pro web. Nejsou známy žádné patenty, které by ho zasahovaly a tak je hodně populární mezi open-source vývojáři. Vorbis podporuje neomezené množství kanálů.

Skládáme skládanku

Již víme, jaké kodeky můžeme použít, teď ještě v jaké kombinaci a s jakou skořápkou (lépe řečeno kontejnerem):

• MPEG 4 (.mp4, .m4v) – pracuje s video kodekem „H.264“ a s kodekem „AAC“ pro audio.
• OGG (.ogv) – pracuje s kodeky „Theora“ pro video a „Vorbis“ pro audio.
• WebM (.webm) – pracuje s kodekem „VP8“

Nyní na webu probíhá souboj MPEG 4 a WebM. OGG stojí trošku na druhé koleji, hlavní, kdo ho obhajuje, je Mozilla, podporuje jej i Opera. Google nyní prosazuje svůj WebM (kteří se všichni až na Apple zavázali implementovat) a Apple stojí za MPEG 4 (také bych stál, kdybych prodal sto milionů zařízení, které jsou pro jeho přehrávání uzpůsobeny. Pozn. aut.)

Přehled podpory jednotlivých formátů

Které prohlížeče a co již dnes podporují?

• OGG (Theora+Vorbis) – Firefox 3.5+, Opera 10.5+, Chrome 5.0+
• MP4 (H.264+ACC) – Safari 3.0+, Chrome 5.0+, iPhone 3.0+, Android 2.0+
• WebM: Chrome 6.0+

A jaké prohlížeče podporu oznámily?

• MP4 (H.264+ACC) – IE9
• WebM: IE9 (pokud si uživatel nainstaluje kodek VP8), Firefox 4.0+, 11.0+, Android (přislíbeno, že v některé z budoucích verzí podpora bude)

Odkaz: Vyjádření IE teamu k podpoře videa v IE9.

Budoucnost videa

Jak bude vypadat budoucnost? Vyhraje MP4 (potažmo H.264) či WebM? Hardwarová akcelerace či otevřenost kodeku? Zatím to vypadá, jakoby všechny esa měl v ruce MP4. Je jediným videem které podporují všechna „i“ zařízení i Android a je to prověřená kvalita. Jenže Mozilla s ním nechce mít nic společného a WebM je silný konkurent. Stojí za ním Google a YouTube tím pádem už přechází z MP4 na WebM. Jak dlouho to bude trvat Androidu? A donutí trh implementovat Apple WebM a přidá Microsoft kodek VP8 přímo do nějaké budoucí verze IE? Dozvíme se v příštích letech.

Závěrem

Šikovný čtenář si již jistě zjistil, že v současné chvíli neexistuje jediný formát, který by fungoval ve všech prohlížečích. (Už si představuji ty nadávky: „a to ti trvalo celý článek, abys nám řekl TOHLE?!“ – pozn. aut.)

Mám pro vás však dobrou zprávu – tag video umožňuje nalinkovat video ve více formátech a pokrýt tak všechny možnosti. (Pokud si tedy dáte tu práci a překódujete vaše video do více formátů. – pozn. aut.) A pro prohlížeče, které nepodporují <video>, můžeme degradovat na flashový přehrávač. Dokonce již existují pěkné pluginy např. pro jQuery.

Ale o tom všem, a i o tom, jak si udělat vlastní vzhled ovládacích prvků pro video, až příště.

Kdo budete chtít za týden ihned vyzkoušet vložní videa do stránek, tak si nezapomeňte nějaké krátké připravit, projdeme si spolu mimo jiné i proces toho, jak takové video vyexportovat ve správném formátu a zabezpečit, aby se zobrazilo co největšímu počtu uživatelů.