Webdesignérův průvodce po HTML5 - používáme pohyblivé obrázky

První krůčky

Z minula již víme, jak vypadá základní syntaxe tagu video. Neukázali jsme si, ale jak to vypadá v prohlížeči – tak to hned napravme:

Obrázek pochází z prohlížeče Google Chrome, v jiném prohlížeči budou ovládací prvky vypadat jinak. Neříkejte, že jste překvapeni, stejně si chcete udělat vlastní. HTML5 nám k tomu nabízí API.

API pro ovládání <video>

Abychom si mohli udělat vlastní ovládací tlačítka (nejčastěji se pro to používá element <button> a CSS), tak máme několik JavaScriptových API, které můžeme volat. Je jich docela dost, my se podíváme jen na několik základních.

Technicky přehrávání <video> (i <audio>) zajišťuje interface nsIDOMHTMLMedi­aElement a to také definuje, co můžeme používat my, jako vývojáři. Více si můžete přečíst třeba u Mozilly.

Jak se s tím pracuje? Například takto spustíte video:

var prahravac = document.getElementsByTagName("video")[0];
prehravac.play();

Skvěle i s příklady to shrnuje Opera (v angličtině).

Podívejme se na některé další možnosti pro ovládání:

• play() and pause() – první zapne a druhé pozastaví video. Je zajímavé, že neexistuje volání stop().
• volume – hodnota hlasitosti od 0.0 do 1.0
• muted – nezávisle na hlasitosti můžete videu vypnout zvuk
• currentTime – vrací čas v sekundách místa, které se zrovna přehrává

Výborně, tak teď již umíme video ovládat. No jo, ale video v jakém formátu?

Formát videa

Abychom mohli přehrát video, potřebujeme ho nějakým způsobem dostat do toho „správného“ formátu (o kterých jsme mluvili minule).

Protože potřebujeme pokrýt co možná nejvíc prohlížečů, musíme publikovat video alespoň ve dvou formátech, o kterých jsme mluvili (MP4, OGG). Doporučujeme rovnou použít i WebM, začíná se výrazně prosazovat. Časem nám z toho naopak pravděpodobně vypadne OGG, Firefox, kvůli kterému ho potřebujeme, ve své čtvrté verzi již obsahuje podporu WebM.

Pokud tohle absolvujeme (a každé video tedy převedeme do všech třech formátů, což není nikterak krátký proces), tak potřebujeme nějak říct prohlížeči, že si má vybrat. Element <video> nám to umožňuje velmi jednoduše:

<video width="320" height="240" controls>
    <source src="mojevideo.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="mojevideo.ogv"  type='video/ogg; codecs="theora, vorbis"'>
    <source src="mojevideo.webm" type='video/webm; codecs="vp8, vorbis"'>
</video>

Prohlížeč pak půjde shora a použije první formát, který zná. Dejte si pozor a první uveďte mp4, prohlížeč Safari v zařízení Apple iPad v současnosti obsahuje chybu a video jinak nepřehraje. (A slyšel jsem, že jeho uživatelů je v Čechách spousta, hned jedenáct takových jich prý bylo na iDevCamp. – Pozn. aut.)

Převádíme video do jednotlivých formátů

Nejjednodušeji převedete video do formátu OGG. Stačí nainstalovat Firefox 3.5+ a jít na adresu http://firefog­g.org/, poté už vás provede průvodce.

Na WebM už si budeme muset pomoci příkazovým řádkem (shellem). Pomůže vám návod pro Windows a pro Linux.

A na MP4 použijeme multiplatformní prográmek HandBrake.

Celý proces skvěle i s obrázky popisuje Mark Pilgrim ve svém Dive into HTML5.

Moment – jak je to s tím licencováním MP4?

Pokud jste pozorně četli předchozí díl, tak si určitě pamatujete, že MP4 (respektive H.264) je patentově chráněno a musí se platit licenční poplatek za užívání. Naštěstí ne na internetu, v tuto chvíli můžeme video v tomto formátu publikovat zdarma až do roku 2015. Co bude pak? Nikdo neví. Ale pět let je dlouhá doba.

Co s IE

Safari, Chrome, Firefox i Opera podporují HTML5 video, určitě budete ale chtít podporovat i Internet Explorer. Tomu nabídneme Flashový přehrávač (který přehrává video ve formátu MP4).

V podstatě neuděláme nic jiného, než že na místo, kde jsme minule uvedli text „Stáhněte si video“, vložíme flashový přehrávač.

<video width="320" height="240" controls>
    <source src="mojevideo.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="mojevideo.ogv"  type='video/ogg; codecs="theora, vorbis"'>
    <source src="mojevideo.webm" type='video/webm; codecs="vp8, vorbis"'>
    <object width="320" height="240" type="application/x-shockwave-flash" data="flash.swf">
        <param name="movie" value="flash.SWF">
        <param name="flashvars" value="image=poster.jpg&amp;file=mojevideo.MP4">
        <img src="mojevideo.JPG" width="320" height="240" alt="title"
             title="No video playback capabilities, please download the video below">
    </object>
</video>

A je to.

Nevymýšlejme kolo

Protože v Americe je teď <video> hodně populární (důvod je jediný: iZařízení), tak webdesigneři již vymysleli několik řešení, ve kterých vy použijete tag video a vložíte kus JavaScriptu. Ten už pak zajistí, že když prohlížeč nepodporuje <video>, tak mu předloží flashový prohlížeč.

Mashable představuje 5+1 takovýchto řešení. Pokud chcete <video> začít používat, určitě se na ně podívejte.

<audio>

Situace s <audio>  je vlastně stejná jako s <video>.

Máme tu tři formáty (Ogg Vorbis, MP3, WAV) a každý prohlížeč zase podporuje, co mu připadá nejlepší.

• Firefox 3.5+ – Ogg Vorbis, WAV
• Safari 4+ – MP3, WAV
• Chrome 3+ – Ogg Vorbis, MP3
• Opera 10.5+ – Ogg Vorbis, WAV

Takže opět potřebujeme více formátů (tentokrát dva), odkážeme na ně stejně jako u <video>  a pro IE degradujeme (toto není cílená provokace, prostě se to slovo ve webdesignérském řemesle používá, jak se snažil vysvětlit v poslední diskusi Martin Malý. – pozn. aut.) na Flash.

Pro zájemce o API dodáme, že je to obdobné jako u <video>, podívejte se na HTML5 Doctor.

A samozřejmě je tu i kus JavaScriptu, který nám implementaci usnadní. Tentokrát se jmenuje jPlayer.

Závěrem

Když se člověk nezabývá problémy s kodeky atd., tak je vlastně implementace HTML5 <video> tagu poměrně jednoduchá a přímočará.

V diskusi pod minulým článkem bylo také naznačeno, že bychom měli spíše říkat degradace z Flashe na HTML5 video. Možná, nevím. Já jen vím, že YouTube a Vimeo pomalu přechází na <video>, Apple se do implementace Flashe nehrne (což otevírá prostor dalším, aby Flash neimplementovali) a jako webdesignérovi se mi příjemněji pracuje s <video>  než s flashovým přehrávačem. Každý si ale nakonec musí udělat na věc vlastní názor. Poslední dva články vám k tomu, doufám, poskytly dostatek informací.