Přejít k navigační liště

Zdroják » Různé » Kompletní průvodce HTML5 Audiem a Videem – a spoustou dalších věcí

Kompletní průvodce HTML5 Audiem a Videem – a spoustou dalších věcí

Články Různé

Pro každého recenzenta je příjemné, když si přečte knihu, od které v podstatě nic moc nečeká, nanejvýš to, že autor uspořádal známé informace o určité oblasti, a záhy zjistí, že kniha nabízí mnohem víc, záběrem přesahuje i do jiných oblastí a ukazuje věci, o nichž se běžně nemluví. Toto je ten případ.

Knihu HTML5 audio a video – kompletní průvodce od Silvie Pfeiffer vydalo letos nakladatelství Zoner Press. Na Zdrojáku se audiu a videu v HTML5 věnujeme, proto tato kniha nemohla ujít naší pozornosti.

Zaprvé je nutno říct, že tato kniha „klame titulem“. V titulu se sice hovoří o HTML5, audiu a videu, ovšem kdo by očekával pouze podrobný rozbor těchto dvou elementů a jejich API, bude překvapen. Tedy ne že by to v knize nebylo. Tohle všechno v knize samozřejmě je, a je to popsané podrobně a názorně v první polovině knihy.

Obecně o audiu a videu

Autorka se věnuje oběma multimediálním elementům z HTML5 do hloubky – od možných formátů a kodeků přes praktické použití až po použití jejich JS API. Zmíní se i o možnostech stylování videoelementu pomocí CSS3.

Pokud se o problematiku HTML5 zajímáte, víte, že největší problém přináší fakt, že máme pět „velkých“ prohlížečů, které se více či méně liší a které implementují tyto technologie po svém. Autorka se k tomuto problému postavila čelem, takže např. screenshoty toho, jak vypadá „systémový videopřehrávač“ nebo „jak bude vypadat přehrávač nastylovaný pomocí CSS3“ jsou rovnou v několikerém vydání, pro každý prohlížeč zvlášť, často slovně okomentované a s popsanými rozdíly. V tomto směru je tedy výklad velmi důkladný.

Už ve třetí kapitole, věnované stylování pomocí CSS3, autorka ukazuje, že se nehodlá držet jen a pouze HTML elementů, ale že se bude do jisté míry věnovat i dalším technikám z rodiny „moderních webových technologií“ – a tak zjišťujeme, jak vypadá <video> s aplikovanými 2D transformacemi, co se stane, když na přehrávač pustíme CSS animaci, když na něj aplikujeme gradient… Tedy věci, které člověka po čase napadnou (nebo někdy ani nenapadnou…) a zajímá ho, jak to bude vypadat.

Rovněž popis JS API je psán s ohledem na různé implementace v různých prohlížečích a autorka výslovně upozorňuje na to, co kde funguje, co nefunguje a co se tváří, že funguje, ale ve skutečnosti to nefunguje… Naštěstí udržela únosnou míru, takže dotyčná kapitola není seznamem odlišností. Čtenář se v informacích neztratí, stále si udrží jasnou linii, a přitom je vhodně upozorněn na případné problémy.

Jak jsme si už v úvodu naznačovali, popis elementů a jejich API zabírá necelou polovinu knihy. Zbytek knihy se věnuje kombinaci videa a audia s jinými technologiemi, jejichž výčet najdeme na obálce.

Video + SVG

Autorka se například pustila do seznámení s málo diskutovanou možností kombinace videa a SVG. Ukazuje možnosti „maskování videopřehrávače“ pomocí SVG masek a tvarů – např. kruhový přehrávač nebo přehrávač, pokrytý maskou z vzoru / gradientu. Připomíná možnost použít SVG filtry přes přehrávač, vykreslení vlastních ovládacích prvků v SVG (viz) a ukazuje i vkládání videa přímo do SVG (a následnou aplikaci filtrů).

(Přiznám se, že tato část pro mne byla velmi příjemným překvapením, o kombinaci videa a SVG jsem nikdy hlouběji neuvažoval – pozn.aut.)

Video + Canvas

Tato kombinace je podstatně známější. Na Zdrojáku jsme si už ukazovali práci s videosnímky v reálném čase – a autorka ukazuje v knize tytéž metody (práci se snímky via Canvas), jen se jim věnuje podstatně podrobněji než může krátký článek. Ukazuje nejrůznější efekty, od „maskování“ videa tak, že je vidět pozadí pod přehrávačem, až po využití kompozičních funkcí elementu Canvas.

Video + Web Workers

Autorka pokračuje v manipulaci s pixely videa, a bere si na pomoc vícevláknovou technologii Web Workers. Ukazuje, jak je možné výpočet efektů delegovat na jiné „vlákno“, ovšem zároveň ukazuje, že v některých prohlížečích způsobí režie (spouštění vlákna, předávání dat) výrazný pokles výkonu. Přesto ale právě na Web Workers ukazuje některé výpočetně náročnější operace, jako detekci pohybu ve videu, segmentaci videa nebo jednoduchý algoritmus pro detekci tváře. Algoritmy, které používá, jsou jednoduché, až primitivní – ale účelem kapitoly nebylo, jak autorka podotýká, ukázat dokonalé algoritmy na analýzu videa, ale jen naznačit možnosti a způsoby…

Audio API

Možnosti práce se zvukem v moderních prohlížečích nejsou omezené jen na přehrání hotového zvukového samplu. Firefox, a posléze i Chrome, přišly s implementací tzv. Audio API, tedy API, které umožňuje pracovat přímo s hodnotami samplů v reálném čase. Autorka rovněž zmiňuje práci Audio Incubator Group, ktgerý navrhuje koncept propojených filtrů – AudioNode pro práci se zvukem.

I zde se výklad pohybuje na hraně specifikací, autorka upozorňuje na to, že pracuje s návrhy, které se mohou změnit. V kapitole ukazuje čtení hodnot samplů ze zvuku (a jejich vykreslení / spektrální analýzu pomocí FFT) nebo generování zvuků (zápis hodnot samplů). Ukazuje i příklady pro Audio Context a popisuje tuto technologii, která patří stále k těm opravdu velmi experimentálním.

Přístupnost a zařízení

Závěr knihy patří tématu přístupnosti, které je u multimédií poměrně výrazným faktorem. V knize se tedy dozvíte o možnostech přepisu videa, o tom, jak jsou implementovány titulky (WebSRT) a jak je nabídnout prohlížeči (pomocí <track>).

Poslední kapitola ukazuje možnosti práce se zvukovými a video zařízeními prostřednictvím elementu <device> – tedy nahrávání audia z mikrofonu / audio vstupu, nahrávání videa z webkamery apod. Autorka si i zde zaexperimentovala a ukázala jednoduchou implementaci video chatu pomocí WebSockets. tomuto tématu je věnováno už jen posledních pár stránek, protože jak autorka sama poznamenává, v době psaní knihy existovalo několik experimentálních implementací – autorka pracovala s implementací od společnosti Ericsson, která je založena na WebKitu a není veřejně přístupná.

Zmínky se dočkaly i připravované věci – API pro metadata a API pro QoS.

Závěr

Pokud od knihy očekáváte, že se dozvíte podrobnosti o elementech video a audio, dočkáte se. Pokud očekáváte, že se dozvíte i něco víc o práci s audio/video­obsahem, nebudete zklamáni. Kniha vás uspokojí i v případě, že hledáte přesahy do dalších technologií, nebo v případě, kdy chcete znát novinky z oblasti práce s multimédii na webu.

Kniha bude pro české tvůrce webů rozhodně zajímavá, není na místě se bát, že „za rok to všechno zastará“ – kniha je na konci roku 2011 rozhodně aktuální, a lze očekávat, že bude aktuální i za rok.

Kniha nabízí nejen popis současného stavu, ale i náhled do připravovaných technologií (a tedy i lepší odhad toho, co nás v tomto směru čeká). Stejně tak je zároveň referenční příručkou i zdrojem námětů. Text není šroubovaný, je přirozený, překladatel neopomněl přeložit poznámky ve zdrojových kódech, autorka na webu http://html5v­ideoguide.net/ nabízí příklady ke stažení i k živé demonstraci – od nás má tato kniha jednoznačné doporučení:

Neměla by chybět v žádné knihovničce webového vývojáře!

Základní informace o knize

Autor: Silvia Pfeiffer
Překlad: RNDr. Jan Pokorný
Rozměry: 168×230
Datum vydání: 2011
Počet stran: 352
Typ vazby: brožovaná
Přílohy:
Barva: černobílá
ISBN: 978–80–7413–147–9
Katalogový kód: ZR1016
Běžná cena: 379 Kč

Komentáře

Subscribe
Upozornit na
guest
0 Komentářů
Inline Feedbacks
View all comments

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.