HTML5 - audio a video

E N C Y K L O P E D I E

W E B D E S I G N E R A 1

HTML5 audio a video » kompletní průvodce «

Prvky pro audio a video • Stylování s CSS3 • SVG • Canvas • Web Workers • API pro HTML5 audio • Přístupnost médií

Silvia Pfeiffer

HTML5 – audio a video kompletní průvodce

Silvia Pfeiffer

The Definitive Guide to HTML5 Video Silvia Pfeiffer Original edition copyright © 2010 by Silvia Pfeiffer. Czech edition copyright © 2011 by ZONER software, a.s. All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright the publisher.

Copyright originálního vydání © 2010 Silvia Pfeiffer. Copyright českého vydání © 2011 ZONER software, a.s. Všechna práva vyhrazena. Žádná část této publikace nesmí být reprodukována nebo předávána žádnou formou nebo způsobem, elektronicky ani mechanicky, včetně fotokopií, natáčení ani žádnými jinými systémy pro ukládání bez výslovného svolení držitele autorských práv.

HTML5 – audio a video, kompletní průvodce Autor: Silvia Pfeiffer Copyright © ZONER software, a.s. Vydání první v roce 2011. Všechna práva vyhrazena.

Zoner Press Katalogové číslo: ZR1016 ZONER software, a.s.

Nové sady 18, 602 00 Brno Překlad: RNDr. Jan Pokorný Odpovědný redaktor: Miroslav Kučera Šéfredaktor: Ing. Pavel Kristián DTP a obálka: Lenka Křížová, foto na obálce: Jana Vališová Webové stránky doprovázející tuto knihu: http://www.html5videoguide.net

Zdrojové soubory ke stažení: http://zonerpress.cz/download/html5-audio-a-video.rar

Informace, které jsou v této knize zveřejněny, mohou byt chráněny jako patent. Jména produktů byla uvedena bez záruky jejich volného použití. Při tvorbě textů a vyobrazení bylo sice postupováno s maximální péčí, ale přesto nelze zcela vyloučit možnost výskytu chyb. Vydavatelé a autoři nepřebírají právní odpovědnost ani žádnou jinou záruku za použití chybných údajů a z toho vyplývajících důsledků. Všechna práva vyhrazena. Žádná část této publikace nesmí být reprodukována ani distribuována žádným způsobem ani prostředkem, ani reprodukována v databázi či na jiném záznamovém prostředku či v jiném systému bez výslovného svolení vydavatele, s výjimkou zveřejnění krátkých částí textu pro potřeby recenzí.

Veškeré dotazy týkající se distribuce směřujte na: Zoner Press ZONER software, a.s Nové sady 18, 602 00 Brno tel.: 532 190 883 e-mail: knihy@zoner.cz www.zonerpress.cz

ISBN 978-80-7413-147-9

Benjaminovi, který mě včera požádal, jestli by si mohl přečíst knihu své maminky, aby mohl udělat všechny ty skvělé videoukázky.

A Johnovi, který tohle všechno umožnil.

– Silvia

4

Obsah O autorovi

10

O technickém recenzentovi

10

Poděkování

11

Předmluva

12

Proč "kompletní průvodce"?

12

Komu je tato kniha určena a co obsahuje

13

Kontakt na autora

13

Zdrojové kódy

13

Sdělte nám svůj názor

13

Kapitola 1

Úvod

15

Špetka historie

15

Nějaký společný formát?

17

Shrnutí

21

Kapitola 2

Prvky <audio> a <video>

Prvky <video> a <audio>

23 23

Prvek <video>

23

Prvek <audio>

34

Prvek <source>

37

Přehled prvků a atributů

42

Kódování mediálních zdrojů

43

Kódování videa MPEG-4 H.264

44

Kódování videa Ogg Theora

46

Kódování videa WebM

48

Kódování audia ve formátu MP3 a Ogg Vorbis

49

Publikování

49

Webový server a progresivní stahování

50

Streamování pomocí RTP/RTSP

51

Rozšiřování HTTP streamování

52

Výchozí uživatelské rozhraní

55

Viditelné ovládací prvky

55

Kontextové nabídky

59

Přehled ovládacích prvků

62

Shrnutí

63

5 Kapitola 3

Stylování s CSS3

65

Box model CSS a video

66

Pozicování CSS a video

68

Řádkový typ boxu

68

Neviditelný box vs žádný box

70

Blokový typ boxu

71

Režim pozicování: relativní

72

Režim pozicování: plovoucí

74

Režim pozicování: absolutní

75

Změna měřítka a zarovnání videa uvnitř boxu

76

Základní vlastnosti CSS

78

Průhlednost

79

Gradient

80

Posouvající se obsah

81

Přechody a transformace s CSS

83

Přechody

84

Dvojrozměrné transformace

86

Trojrozměrné transformace

87

Galerie videí

90

Animace s CSS

92

Shrnutí

95

Kapitola 4

API JavaScriptu

97

Obsahové atributy

98

IDL atributy

99

Atributy související s všeobecnými funkcemi mediálních zdrojů

101

Atributy související s přehráváním mediálních zdrojů

113

Stavy mediálního prvku

124

Řídící metody v API

141

Metoda load()

141

Metoda play()

142

Metoda pause()

143

Metoda canPlayType()

145

Události

146

Vlastní ovládací prvky

148

Shrnutí

155

6 Kapitola 5

HTML5 média a SVG

Použití SVG s prvkem <video>

157 158

Inline SVG

158

SVG pro maskování

159

Video v SVG

159

Pár slov příkladům

159

Základní tvary a <video>

159

Tvary jako maska

160

SVG text a <video>

164

SVG stylování pro <video>

165

SVG přepínač přehrát/pozastavit

166

Gradient v SVG

168

Vzorek v SVG

169

SVG efekty pro <video>

171

Ořezávací cesta SVG

171

SVG filtry

172

SVG animace a <video>

177

SVG prvek <animate>

178

SVG prvky <animateColor> a <animateTransform>

179

SVG prvek <animateMotion>

179

Média v SVG

180

Video v SVG

180

Maskování videa v SVG

181

SVG a zrcadlení

183

SVG a detekce stran

184

Shrnutí

Kapitola 6

185

HTML5 média a Canvas

Video v Canvas drawImage()

187 188 188

Rozšíření funkce drawImage()

191

Funkce getImageData() a putImageData()

193

Funkce getImageData() a jednoduchá putImageData()

195

Dvě canvas

197

Jednoduché manipulace v Canvas Nahrazení pozadí průhlednými pixely

199 199

7 Video ve 2D canvas s 3D efektem

200

Barevný rám obklopující video

203

Video jako vzorek

206

Kompozice

208

Maska průhlednosti podle gradientu

208

Vyříznutí regionu

211

Kreslení textu

214

Transformace

216

Zrcadlení

216

Video ve spirále

219

Animace a interaktivita

222

Shrnutí

225

Kapitola 7

HTML5 média a Web Workers

227

Web Workers a prvek <video>

228

Detekce pohybu s Web Workers

233

Video v odstínech šedé

234

Detekce pohybu

235

Segmentace regionu

238

Detekce obličeje

244

Shrnutí

250

Kapitola 8

API pro HTML5 audio

Čtení audio dat Extrakce audio samplů

251 252 252

Pole framebuffer

254

Realizace tvaru vlny audia

256

Realizace spektra audia

259

Generování audio dat

261

Vytvoření zvuku o jediné frekvenci

261

Vytvoření zvuku z jiného zdroje audia

262

Nepřetržité přehrávání

263

Manipulace se zvukem: vypípnutí

265

Generátor tónu

267

Přehled API filtrového grafu Základní čtení a zapisování

269 270

8 Pokročilé filtry

271

Vytvoření dozvuku

272

Zobrazení tvaru vlny Shrnutí

Kapitola 9

273 275

Přístupnost médií a internacionalizace

Technologie alternativního obsahu

277 278

Uživatelé se zrakovým postižením

278

Uživatelé se sluchovým postižením

280

Hluchoslepí uživatelé

283

Podpora učení

284

Cizí uživatelé

284

Souhrn technologií

285

Transkripce

285

Prostá transkripce

285

Interaktivní transkripce

286

Alternativní synchronizovaný text

289

WebSRT

289

Značkování HTML5

298

Použití in-band

301

JavaScript API

305

Vícestopé audio nebo video Navigace

308 309

Kapitoly

309

Navigace z klávesnice

310

Specifikace mediálních fragmentů URI

311

Adresy URL v narážkách

313

Souhrn funkcí pro usnadnění přístupu

313

Shrnutí

315

Kapitola 10

Audio a video zařízení

317

Prvek <device>

318

Atribut type

318

Atribut data

318

Stream API Video zobrazující samo sebe

319 319

9 Zaznamenávání

320

API pro WebSockets

322

Použití API pro WebSockets

322

Výměna zpráv

323

Sdílené řízení videa

326

Video konference

329

API ConnectionPeer

331

Shrnutí

331

Dodatek

Výhled a celkové shrnutí

Výhled API metadat API pro kvalitu služby Celkové shrnutí Kapitoly 2, 3 a 4 – seznámení s problematikou

333 333 333 335 336 336

Kapitoly 5, 6 a 7 – interakce s jinými prvky HTML

336

Kapitoly 8, 9 a 10 – nejnovější vývoj

337

Rejstřík

339

10

O autorovi Silvia Pfeiffer, PhD., se narodila a strávila mládí v Německu, kde také vystudovala kombinaci oborů Computer Science a Business Management. Později získala v počítačové vědě titul PhD. Její výzkum se soustředil na audiovizuální obsahovou analýzu s cílem zvládnout prudký nápor digitálního audio a video obsahu na Internetu. Výzkumu se věnovala už v minulém století, od příchodu webu, dlouho předtím, než vůbec vznikla myšlenka vytvořit něco takového, jako je YouTube.

Poté, co v roce 1999 dokončila studia, byla Silvia pozvána do Austrálie, aby se zapojila do CSIRO (Commonwealth Scientific and Industrial Research Organisation). A právě tam, poté, co se krátce angažovala ve standardizaci MPEG-7, napadlo Silvii používat audiovizuální anotace za účelem použitelnosti mediálního obsahu na webu.

Společně se svými kolegy rozpracovala myšlenku "plynule mediálního webu", takového, kde se budou všechny informace skládat z audio a video obsahu a kde budete tímto obsahem bude možné procházet stejně, jako když prohlížíte textové stránky a přecházíte jinam prostřednictvím hypertextových odkazů. Součástí tohoto webu by měl také být úplné a správně časované transkripce audiovizuálních zdrojů, aby je vyhledávače mohly indexovat a aby uživatelé byli schopni vyhledávat informace skryté hluboko uvnitř mediálních souborů prostřednictvím existujících a dobře známých přístupů pro vyhledávání na webu.

Silvia a její kolegové se spojili s organizací Xiph a realizovali své nápady prostřednictvím rozšíření do Ogg, zásuvných modulů pro Firefox a serverových zásuvných modulů pro Apache. Tím, že implementovali souborovou podporu do výzkumného vyhledávače CSIRO, vytvořili v roce 2001 první video vyhledávač, který byl schopen získávat video na úrovni klipů prostřednictvím dočasných URI. Bylo to něco podobného, jako je vyhledávání videa, které bylo o mnoho let později přidáno do Googlu.

Silvia zůstala u CSIRO až do roku 2006, kdy, inspirována vývojem Web 2.0 a úspěchem YouTube, začala pracovat u firmy Vquence, která se soustřeďuje na všechno, co se týká prohledávání videa a jeho metrik. Společně s ní zde pracovali Chris Gilbey a John Ferlito.

V současné době je Silvia na volné noze a zabývá se webovými mediálními aplikacemi, mediálními standardy a usnadněním přístupu k médiím. Je hlavní organizátorkou každoročního workshopu Foundations of Open Media Software (FOMS). Často je zvána jako expert do W3C v oblastech HTML, Media Fragments, Media Annotations a Timed Text Working Groups. Přispívá do mediální technologie HTML5 prostřednictvím WHATWG a W3C a mívá krátkodobé smlouvy s Mozillou a Googlem, které jsou zaměřeny na standardy ohledně usnadnění přístupu k médiím.

Silviin blog je na http://blog.gingertech.net.

O technickém recenzentovi Chris Pearce je softwarový inženýr, který pracuje u Mozilly na podpoře přehrávání audia a videa v HTML5 pro open source webový prohlížeč Firefox. Je také tvůrcem indexování snímků, které používá mediální kontejner Ogg. Přispívá do komunity Ogg/Xiph. Chris předtím pracoval na textovém editoru Mozilly a na nástrojích pro vývojáře softwaru pro mobily. Chris pracuje v kanceláři Mozilly v Aucklandu na Novém Zélandu a bloguje o záležitostech týkajících se vývoje internetového videa a Firefoxu na http://pearce.org.nz.

11

Poděkování Nejprve chci poděkovat všem skvělým lidem, kteří se podílejí na vývoji HTML5 a souvisejících standardů a technologií (jak u WHATWG, tak i u W3C) a kteří tak uskutečnili můj dlouholetý sen, učinit audio a video obsah prvořadými občany na webu. Věřím, že během následujících deseti let zažijeme díky těmto technologiím nový boom, větší než poslední boom zvaný "Web 2.0", a že budeme mít k dispozici nějakou audiovizuální komponentu, která od základu změní způsob, jakým lidé a firmy komunikují online.

Dále chci poděkovat konkrétně softwarovým vývojářům u rozličných prohlížečů, kteří implementovali mediální prvky a jejich funkcionalitu a poskytovali mi zpětné vazby týkající se otázek vztahujících se k médiím, kdykoli jsem je potřebovala. Jmenovitě chci zmínit Chrise Pearce od Mozilly, který vykonal obrovský kus práce tím, že provedl odborné korektury v celé knize, a Philipa Jägenstedta od Opery za jeho cenné zpětné vazby týkající se záležitostí souvisejících s Operou.

Osobně chci poděkovat přispěvovatelům z Xiph a FOMS, s nimiž bylo zábavnou projížďkou vyvíjet otevřenou mediální technologii a bořit hranice webu pro audio a video.

Chci poděkovat Ianu Hicksonovi za jeho neúnavnou práci na specifikacích HTML5 a za důkladný rozbor záležitostí týkajících se videa.

Chci poděkovat všem bloggerům, kteří publikovali všelijaké pozoruhodné experimenty s prvky <audio> a <video> a byli inspirací pro mnohé mé příklady. Jmenovitě chci uvést Paula Rougeta od Mozilly, jehož některá dema založená na HTML5 doslova boří hranice.

Chci poděkovat Chrisu Heilmannovi, že mi dovolil opětovně použít design jeho přehrávače pro potřeby ukázky vlastních ovládacích prvků v kapitole o JavaScriptu.

Chci poděkovat vývojářům Audio API od Mozilly a Googlu za všechnu pomoc, kterou mi poskytli, abych porozuměla dvěma existujícím návrhům Audio API pro mediální prvky.

Chci poděkovat vývojářům u Ericsson Labs za jejich experimenty s prvkem <device>. Oceňuji, že mi dovolili použít snímky obrazovek z jejich dem v kapitole věnované zařízením.

Chci poděkovat expertům v mediální podskupině HTML5 Accessibility Task Force za jejich přínosné diskuse, jimiž přispěli do kapitoly o usnadnění přístupu k médiím. Jmenovitě chci uvést Johna Foliota a Janinu Sajka, jejichž korektury oné kapitoly mi pomohly přesně vyjádřit potřeby uživatelů týkající se usnadnění přístupu.

Chci poděkovat kolegům v pracovní skupině W3C Media Fragment URI, s nimiž byla radost vyvíjet architektury, které nakonec umožnily přímý přístup k sekcím audia a videa tak, jak je to popsáno v kapitole o usnadnění přístupu k médiím.

Chci poděkovat Davidu Bolterovi a Chrisu Blizzardovi od Mozilly, kteří mi příležitostně umožnili účastnit se porad a konferencí a pokračovat v práci na standardech.

Chci poděkovat vydavatelství Apress za to, že na mne vyvíjeli neustálý tlak, takže jsem tuto knihu dokázala dokončit v plánovaném termínu.

A nakonec chci poděkovat za podporu své rodině, zejména mámě a tátovi, že měli se mnou svatou trpělivost, když jsem psala jednu z kapitol knihy během naší dovolené na Fidži. Také chci poděkovat Benovi za to, že toleroval poněkud duchem nepřítomnou matku, a Johnovi, že mi neustále fandil.

12

Předmluva Je trochu ironie, že tuto knihu jsem začala psát přesně toho dne, kdy poslední z hlavních prohlížečů ohlásil, že se chystá podporovat HTML5 a s ním i HTML5 video. 16. března 2010 se Microsoft přidal k Firefoxu, Opeře, Chrome a WebKit/Safari s prohlášením, že Internet Explorer 9 bude podporovat HTML5 a prvek HTML5 <video>. Několik týdnů předtím, než jsem byla s knihou hotová, byl vydán IE9 beta, takže jsem mohla do knihy zařadit i tento prohlížeč IE9, byť v betaverzi, aby kniha byla o něco užitečnější.

V průběhu doby, kdy jsem psala tuto knihu, byla učiněna celá řada dalších prohlášení a do všech prohlížečů byly doplněno mnoho nových funkcí. Všechny příklady, které jsou uvedeny v knize, byly otestovány v takových verzích prohlížečů, které byly k dispozici v době dokončování knihy. Jednalo se o Firefox 4.0b8pre, Safari 5.0.2, Opera 11.00 alpha build 1029, Google Chrome 9.0.572.0, vše na Mac OS X, a Internet Explorer 9 beta (9.0.7930.16406) na Windows 7. Prohlížeče pochopitelně procházejí neustálou evolucí a co nefunguje dnes, možná už funguje, nebo začne fungovat hned zítra. Až začnete používat mediální funkce HTML5 – a zejména až s ním začnete vyvíjet své vlastní weby – doporučuji, abyste si u všech relevantních prohlížečů zkontrolovali, v jakém stavu se u nich nachází aktuální implementace té funkcionality, kterou požadujete.

Proč "kompletní průvodce"?

Možná jste zvědaví, proč má tato kniha podtitul "kompletní průvodce", proč to jednoduše není úvod nebo přehled? Jsem si plně vědoma toho, že to možná zní trochu namyšleně vzhledem k tomu, že mediální prvky HTML5 jsou nové a mnohé o nich se musí teprve specifikovat, nemluvě o tom, že v prohlížečích stále postrádáme implementace několika důležitých funkcí.

Když se mnou ve vydavatelství Apress hovořili o návrhu napsat knihu o HTML5 médiích, dali mi vyplnit formulář, v němž jsem měla uvést jisté podrobnosti – obsah knihy, shrnutí, srovnání s jinými knihami na toto téma atd. V tom formuláři už byl uveden titul "Definitive Guide to HTML5 Video". Usilovně jsem přemýšlela, jak ho změnit. Zvažovala jsem možnosti jako "Úvod do médií HTML5", "Všechno, co potřebujete vědět o HTML5 video", "Mediální prvky HTML5", "Ultimátní průvodce k HTML5 video", ale ani jedna z těchto variant pro název se mi příliš nelíbila.

Nakonec jsem se rozhodla, že si s tím dál lámat hlavu nebudu a použiju navrhovaný titul jako výzvu. Měla jsem napsat nejkompletnější příručku k HTML5 prvkům <audio> a <video>, jaká bude v době vydání na trhu. Skutečně jsem probrala všechny aspekty mediálních prvků HTML5, o nichž jsem věděla, že existují, nebo že se na nich pracuje. Protože je ale téměř jisté, že tato kniha nebude navždy "kompletním průvodcem", dávala jsem si pozor, abych vždy zmínila změny, o nichž jsem věděla, že právě probíhají, a abych nezapomněla připomenout, že máte u jistých funkcí zkontrolovat aktuální chování prohlížeče, než se na ně začnete spoléhat.

Ať ale usiluji sebevíc, budoucnost rozhodně předvídat neumím. Takže jediná možnost, jak tohle všechno vyřešit, je případné druhé vydání, o němž bude Apress se mnou jistě diskutovat, až nastane vhodná doba (a pokud bude kniha dostatečně úspěšná). Své komentáře, závady v textu, zprávy o chybách v kódu, návrhy na zdokonalení a nápady na nová témata, která by se měla do knihy přidat, zanechte na http://apress.com/ book/errata/1470, nic nebude opominuto.

Do té doby doufám, že vám tato kniha udělá radost a že získáte spoustu praktických návodů, abyste s médii HTML5 dokázali vytvářet přesně takové webové návrhy, jaké jste si předsevzali.

13

Komu je tato kniha určena a co obsahuje Kniha je určena komukoli, kdo se zajímá o používání mediálních prvků HTML5. Předpokládá se, že víte, jak se píše základní kód HTML, CSS a JavaScript, ale máte malou – nebo žádnou – zkušenost s médii.

Jestliže teprve začínáte a potřebujete se prostě jen dozvědět základní informace o tom, jak do webových stránek zařadit video, postačí vám první tři kapitoly. Dozvíte se v nich, jak se v HTML vytváří značkování fungující napříč různými prohlížeči, pokud jde o zařazování audia a videa do webových stránek. Také se dozvíte, jak zakódovat video tak, abyste mohli obsluhovat jakákoli přehrávací zařízení. Probereme také některé open source nástroje, které jsou k dispozici pro práci s novými mediálními prvky HTML5. Rovněž se dozvíte, jak stylovat zobrazení prvků <audio> a <video> v CSS, aby je ve stránkách nikdo nepřehlédnul.

Další čtyři kapitoly jsou o integraci mediálních prvků s ostatními webovými technologiemi. Dozvíte se například, jak nahradit výchozí ovládací prvky webových prohlížečů vlastními. Naučíte se používat API JavaScriptu pro mediální prvky. Také se naučíte integrovat mediální prvky s ostatními konstrukcemi HTML5 , mezi něž patří SVG, Canvas a vlákna Web Worker.

Ve zbývajících kapitolách obrátíme pozornost k pokročilejším mediálním funkcionalitám HTML5. Většinu z těchto funkcionalit lze označit za experimentální a doposud nejsou jednotně implemenovány do prohlížečů.

Je zde úvod o aktuálním stavu a základní informace o tom, co se asi bude dít dál. Naučíte se číst audio data a manipulovat s nimi, internacionalizovat audio a video, včetně legend, titulků a popisů audia. Také se dozvíte, jak z různých zařízení, jako jsou webkamery, přistupovat k videím a jak je přenášet po síti. Výklad uzavřeme shrnutím a stručným výhledem, na co všechno se můžeme v budoucnu těšit.

Kontakt na autora Nijak se neostýchejte se svými názory a kontaktujte mě na silvia@html5videoguide.net.

Najdete mě také zde: Twitter: @silviapfeiffer Můj blog: http://blog.gingertech.net

Zdrojové kódy Zdrojové kódy k ukázkám použitým v této knize jsou dostupné na této adrese: http://zonerpress.cz/download/html5-audio-a-video.rar

K dispozici jsou i stránky doprovázející tuto knihu: http://www.html5videoguide.net

Sdělte nám svůj názor Jako čtenáři této knihy se stáváte těmi nejdůležitějšími kritiky a komentátory. Vážíme si vašeho názoru a chtěli bychom vědět, co děláme správně, co bychom mohli dělat lépe, ve kterých oblastech bychom měli publikovat, a také bychom chtěli znát vaše další podnětné myšlenky, o které jste ochotni se s námi podělit.

14 Jako odborný redaktor Zoner Press vítám vaše názory. Můžete mi psát – poslat e-mail nebo dopis – a sdělit mi, co se vám v této knize líbilo nebo nelíbilo, stejně tak, co bychom měli udělat, aby naše další knihy byly lepší. Pokud mi napíšete, nezapomeňte prosím připojit název knihy, ISBN, jméno autora, vaše jméno, telefon, nebo e-mail. Pozorně zhodnotím vaše názory a poskytnu je autorovi a ostatním redaktorům, kteří pracovali na této knize. Prosím, vězte, že nemohu pomoci s technickými problémy, které se týkají obsahu knihy, a že díky velkému množství e-mailů, které dostávám, nemohu zaručit odpověď na každou zprávu.

E-mail: miroslav.kucera@zoner.cz nebo knihy@zoner.cz.

Adresa: ZonerPress, ZONER software, a.s, Miroslav Kučera, Nové sady 18, 602 00 Brno.

23

KAPITOLA 2 Prvky <audio> a <video> V této kapitole si představíme nové prvky <audio> a <video> HTML, vysvětlíme, jak se kóduje audio a video tak, abyste je mohli využívat v mediálních prvcích HTML5, jak se publikuje a jak vypadá uživatelské rozhraní.

Hned teď je ale třeba zdůraznit, že <audio> a <video> jsou ve specifikaci HTML stále poměrně nové prvky a že značkování popisované v této kapitole se mohlo změnit od doby, kdy šla kniha do tisku. Jádro funkcionality <audio> a <video> by ale mělo zůstat stejné, takže pokud narazíte na něco, co nefunguje přesně tak, jak očekáváte, doporučuji zkontrolovat aktuální specifikaci, zda v ní nedošlo k nějakým aktualizacím. Specifikaci najdete na http://www.w3.org/TR/html5/spec.html nebo na http://www.whatwg.org/specs/web-apps/current-work/multipage/.

Všechny příklady v této a následujících kapitolách jsou k dispozici na http://html5videoguide.net. Pravděpodobně usoudíte, že bude prospěšné, když otevřete prohlížeč a budete při četbě sledovat, jak příklady vypadají v aktuálních verzích prohlížečů, které máte nainstalované na svém počítači.

Prvky <video> a <audio> V této sekci se seznámíte se všemi atributy prvků <video> a <audio> a zjistíte, ve kterých prohlížečích tyto prvky fungují. Také se dozvíte o rozdílech v interpretaci těchto prvků v jednotlivých prohlížečích. Upozorníme také na možné chyby, abyste předem věděli, kde byste mohli narazit.

Prvek <video> Jak jsme vysvětlili v předchozí kapitole, v současné době musejí vydavatelé brát v úvahu tři různé formáty, chtějí-li pokrýt všechny prohlížeče podporující prvek <video> HTML5, viz tabulku 2-1.

24

Kapitola 2 – Prvky <audio> a <video>

Tabulka 2-1. Kodeky videa podporované hlavními prohlížeči.

Kodek WebM

Kodek Ogg Theora

Kodek MPEG-4 H.264

Firefox





-

Safari

-

-



Opera





-

Google Chrome







Internet Explorer

-

-



Protože neexistuje žádný pevný základní společný kodek (baseline codec, viz historický vývoj popisovaný v kapitole 1), uvedeme příklady pro všechny tři tyto formáty. Běžnou praxí je začínat s příkladem typu "Hello World", takže máte tři jednoduché ukázky, jimiž se vkládá video do HTML5: Výpis 2-1. Vložení Ogg videa do HTML5 <video src="HelloWorld.ogv"></video>

Výpis 2-2. Vložení WebM videa do HTML5 <video src="HelloWorld.webm"></video>

Výpis 2-3. Vložení MPEG-4 videa do HTML5 <video src="HelloWorld.mp4"></video>

Všechny tři výpisy jsme vložili na jedinou webovou stránku, přidali ovládací prvky (panel s ovládacími prvky a ukazatelem průběhu přehrávání vidíte podél dolní strany videa; dostaneme se k němu později) a nadefinovali šířku na 300px, abychom mohli lépe porovnat vzhled ve všech pěti hlavních prohlížečích.

Výsledky vidíte na obrázku 2-1.

Obrázek 2-1. Prvek <video> v pěti prohlížečích (zleva doprava): Firefox, Safari, Chrome, Opera a IE.

HTML5 – audio a video, kompletní průvodce

25

Firefox zobrazí videa Ogg a WebM a ukáže chybu pro video MPEG-4. Opera reaguje podobně: nezobrazí nic pro video MPEG-4. Safari a IE neukážou nic pro videa Ogg a WebM, zobrazí jen video MPEG-4. Chrome zobrazí všechny tři formáty.

Možná jste si povšimli, že implementace prvku <video> se v jednotlivých prohlížečích od sebe poněkud odlišují. Například v některých se nezobrazuje prázdný rám u formátů, které neumějí dekódovat, a v některých se ovládací prvky zobrazí jen tehdy, když na ně najedete kurzorem myši. S těmito odlišnostmi se blíže seznámíte v průběhu kapitoly. Je tomu tak proto, že specifikace poskytuje jistou volnost v interpretaci. My očekáváme, že se chování prohlížečů bude postupně sjednocovat, až bude ze samotné specifikaci jasnější, co se má zobrazovat. Funkce a rozdíly budeme podrobněji analyzovat níže. Tohle měl být jen aperitiv po povzbuzení chuti.

Náhradní obsah Také jste si jistě všimli, že prvek <video> má otevírající a uzavírající značku. Je tomu tak ze dvou důvodů.

Zaprvé, existují další prvky, které jsou dceřiné vůči prvku <video> – konkrétně prvky <source> a <track>.

K nim se také dostaneme. Zadruhé, všechno, co je umístěno uvnitř prvku <video> a není to uvnitř některého z konkrétních dceřiných prvků prvku <video>, se považuje za "náhradní obsah". Jde o to, že webové prohlížeče, které nepodporují prvky <audio> a <video> z HTML5, budou tyto prvky ignorovat, nicméně budou schopny zobrazit jejich obsah. Toto řešení tak nabízí určitou míru zpětné kompatibility. Prohlížeče, které prvky <video> a <audio> HTML5 podporují, tento náhradní obsah nezobrazí. Je to vidět ve výpisu 2-4.

Výpis 2-4. Vložení videa MPEG-4 do HTML5 včetně náhradního obsahu <video src="HelloWorld.mp4"> Your browser does not support the HTML5 video element. </video>

Pokud tento text ("Váš prohlížeč nepodporuje prvek video HTML5") zařadíte do příkladu výše kombinujícího výpis ve třech formátech a spustíte v nějakém postarším prohlížeči, dostanete to, co vidíte na snímku obrazovky na obrázku 2-2.

Obrázek 2-2. Prvek <video> ve starším prohlížeči, zde se jedná o IE8.

Dovnitř prvku <video> můžete přidat jakkoli značkování HTML, včetně prvků <object> a <embed>. Díky tomu tak můžete poskytnout náhradní obsah například prostřednictvím přehrávače Adobe Flash ve formátu mp4 nebo flv, nebo s appletem Cortado Java pro ogv. Ačkoliv tyto zásuvné moduly videa pochopitelně nebudou podporovat API JavaScriptu prvku <video> HTML5, můžete použít knihovny JavaScriptu, které

Kapitola 2 – Prvky <audio> a <video>

26

jsou schopny emulovat něco z funkcionality API JavaScriptu a poskytnout tak náhradní obsah pro mnoho různých situací. Mezi tyto knihovny patří mwEmbed1, Video for Everybody2, Sublime Video3 nebo VideoJS4.

Připomeňme ještě, že pokud používáte nějaký moderní webový prohlížeč s podporou HTML5, který podporuje formáty Ogg nebo WebM, ale už nepodporuje zdroj ve formátu MPEG-4, ve výpisu 2-4 se nezobrazí žádný náhradní obsah. Musíte pomocí JavaScriptu zachytit chybu načítání a podniknout patřičnou akci. To, jak se zachytávají chyby při načítání, se dozvíte v kapitole 4. Toto řešení je pro vás relevantní jen tehdy, pokud se chystáte používat pouze jeden mediální formát a chcete zachytávat chyby pro ty prohlížeče, které vámi zvolený formát nepodporují. Pokud vám nevadí podporovat více formátů, existuje jiné značkovací řešení, v němž se nepoužívá atribut src a všechny dostupné alternativní zdroje pro jediný prvek <video> se vypisující prostřednictvím prvku <source>. K tomu se dostaneme později (viz sekci 2.1.3).

Nyní projdeme všechny obsahové atributy prvku <video>, abyste pochopili, co přesně prvek <video> nabízí.

Atribut src Ve svém nejzákladnějším tvaru obsahuje prvek <video> pouze atribut src, což je URL na zdroj videa. Zdrojem videa je soubor obsahující data videa a je uložen na serveru. Abychom vytvořili řádný dokument HTML5, obalme prvek <video> patřičným formálním kódem HTML5: Výpis 2-5. Dokument HTML5 s videem MPEG-4 <!DOCTYPE html> <html lang="en"> <head> <title>Guide to HTML5 video: chapter 2: example </title> </head> <body> <h1>Chapter 2: example</h1> <video src="HelloWorld.mp4"></video> </body> </html>

Na obrázku 2-3 můžete vidět, jak tento příklad vypadá ve Firefoxu (nicméně se zdrojem HelloWorld.webm, nikoli HelloWorld.mp4) a v IE9 (zdroj HelloWorld.mp4; přesně podle výpisu 2-5). Obsah obou prohlížečů vypadá identicky, protože jsme v tomto případě pro každý prohlížeč použili podporovaný zdroj.

Jistě jste si povšimli, že obě videa vypadají pouze jako obyčejné obrázky. Je tomu tak proto, že zde nemáme žádné ovládací prvky, jimiž bychom mohli video spustit, nic, co by indikovalo, že se jedná o skutečné video.

Používat prvek <video> v tomto minimálním provedení má smysl jen za dvou okolností – buď se video ovládá prostřednictvím JavaScriptu (na to se podíváme v kapitole 4), nebo je video explicitně nastaveno tak, aby se automaticky začalo přehrávat okamžitě poté, co se načte. Výchozí chování videa (tj. bez použití dalších atributů) je pozastavit se po inicializaci prvku <video>, takže proto videa vypadají "jako obrázek".

1 2 3 4

Viz http://www.kaltura.org/project/HTML5_Video_Media_JavaScript_Library Viz http://camendesign.com/code/video_for_everybody Viz http://sublimevideo.net/ Viz http://videojs.com/

157

KAPITOLA 5 HTML5 média a SVG SVG je zkratka pro Scalable Vector Graphics (škálovatelná vektorová grafika). Jedná se o jazyk pro popis dvourozměrných grafických objektů v XML. V minulosti byl SVG tzv. standalone formátem, který se používal ve webových prohlížečích prostřednictvím Adobe Flash ve formě vloženého zdroje (embedded resource) nebo jako zdroj obrázků. V dnešní době formát SVG nativně podporují všechny moderní prohlížeče, včetně Microsoft Internet Exploreru 9.

Hlavní využití SVG na webu spočívá ve vytváření interaktivních grafik s mnoha objekty, které je možné libovolně zvětšovat bez toho, aby došlo ke ztrátě kvality. Mapy, všelijaké technické výkresy a hierarchické systémové diagramy – tohle všechno jsou typicky dobré příklady užití SVG. Současná verze SVG podporovaná v prohlížečích je SVG 1.11. Následující verze s označením SVG 1.22 existuje jako pracovní koncept a zahrnuje spoustu dodatečných funkcionalit specifikovaných v tzv. modulech. Obsahuje třeba modul "Media"3, který obsahuje prvky <audio> a <video>. Ze všech moderních webových prohlížečů pouze Opera podporuje některé z dodatečných funkcionalit SVG 1.2, včetně modulu Media.

V této kapitole se podíváme, jak se může pomocí funkcionalit SVG 1.1 manipulovat s HTML5 videem. Protože prvek <video> má logicky viditelné rozměry, SVG se ho týká. Nedá se opravdově aplikovat na <audio> (lze ale realizovat SVG grafiku ve spolupráci s prvkem <audio>). My se v této kapitole především soustředíme na schopnosti SVG 1.1, nicméně se také podíváme na modul Media z SVG 1.2, abyste se dozvěděli, jaké dodatečné funkcionality poskytuje.

V této kapitole samozřejmě nemůžeme poskytnout důkladný popis SVG. Protože z něj ale budeme používat jen několik prvků, bude snadné výklad sledovat a chápat. Uveďme si nicméně alespoň seznam různých typů prvků, které existují v SVG verze 1.1:  Strukturální prvky (<svg>, <defs>, <desc>, <title>, <metadata>, <symbol>, <use>, <g>, <switch>, <a>, <view>).

1 2 3

Viz http://www.w3.org/TR/SVG/intro.html (specifikace) Viz http://www.w3.org/TR/SVG12/ Viz http://www.w3.org/TR/2004/WD-SVG12-20041027/media.html

Kapitola 5 – HTML5 média a SVG

158

 Tvary a obrazce (<circle>, <ellipse>, <rect>, <line>, <polyline>, <polygon>, <path>, <cursor>).  Text (<text>, <tspan>, <tref>, <textPath>, <altGlyph>, <altGlyphDef>, <altGlyphItem>, <glyphRef>, <font> a další funkcionality související s písmem).  Stylování (<style>, <marker>, <linearGradient>, <radialGradient>, <stop>, <pattern>).  Efekty (<clipPath>, <mask>, <filter> a filtrovací efekty).  Animace (<animate>, <set>, <animateMotion>, <animateTransform>, <animateColor>, <mpath>). Ostatní (<script>, <image> a <foreignObject>).

Pokud se poohlížíte po nějakém dobrém zdroji informací, který by vám pomohl vyznat se v základech a použití SVG v různých prohlížečích, vřele doporučujeme tyto odkazy: https://developer.mozilla.org/En/SVG_in_Firefox (Firefox). http://webkit.org/projects/svg/status.xml (WebKit, tj. Chrome a Safari). http://www.opera.com/docs/specs/opera95/svg/ (Opera). http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.asp (IE).

Pokud chcete zkontrolovat, které prohlížeče mají implementovanou podporu té či oné funkcionality z verze 1.1, může vám hodně pomoci článek "Comparison of layout engines (Scalable Vector Graphics)" z Wikipedie, který naleznete na adrese http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Scalable_Vector_Graphics).

Použití SVG s prvkem <video> Interakce HTML5 prvku <video> a SVG může probíhat těmito třemi různými způsoby: inline SVG, SVG pro maskování a video v SVG. V následujících sekcích si je stručně popíšeme.

Inline SVG S příchodem HTML5 začalo být SVG nativně integrováno do webových stránek prostřednictvím jeho vlastního prvku <svg> nebo ve formě odkazované vlastnosti CSS. Z toho plyne, že nyní můžete vytvářet webové stránky s inline SVG grafikou, přičemž tyto SVG grafiky jsou plně integrovány se zbytkem stránky, což například znamená, že dodržují stylování CSS, umožňují JavaScriptu komunikovat s objekty SVG, kreslit grafiky nebo vytvářet všelijaké efekty (například při najetí kurzorem myši na nějaký objekt SVG).

Prostřednictvím inline SVG můžete dále modifikovat dané grafiky a videa – například je ořezávat, přidávat všelijaké filtry nebo různé animace.

Poznamenejme, že v současné době jen Firefox, IE a Chrome podporují inline SVG pro stránky HTML (tj. umožňují použít uvnitř HTML stránky prvek <svg>). Safari a Opera podporují inline SVG pouze pro stránky XHTML, protože XML se umí vypořádat se zařazeným jmenným prostorem. Tam, kde chceme ovládat prvek pomocí SVG prostřednictvím JavaScriptu, použijeme v této fázi XHTML s inline SVG. Ještě poznamenejme, že podpora SVG v IE je pořád velmi útržkovitá, což ostatně sami uvidíte u některých funkcí, které použijeme později v této kapitole.

HTML5 – audio a video, kompletní průvodce

159

SVG pro maskování Ve stránkách HTML se SVG používá hlavně jako nástroj pro pokročilé stylování a efekty. Ve Firefoxu máme k dispozici CSS atributy4 filter, mask a clip-path, pokud chceme pro efekty použít inline nebo externí fragmenty SVG. V prohlížečích založených na jádru WebKit je možné používat externí SVG soubory ve formě CSS masky prostřednictvím atributu -webkit-mask. Inline SVG v atributu -webkit-mask použít nejde.

Opera a IE nemají v této fázi žádné prostředky, jak použít SVG v CSS pro nějaké extra efekty, ať už jsou definovány inline nebo v nějakém externím souboru SVG.

Video v SVG Všechny prohlížeče kromě IE jsou schopny podporovat prvek <video> uvnitř nějaké definice SVG, buď nativně, nebo jako funkci SVG 1.2 (jako je tomu v případě s prohlížečem Opera), nebo prostřednictvím SVG funkce <foreignObject>. IE doposud neimplementoval žádnou funkci SVG 1.2, což znamená, že zatím nepodporuje ani <video>, ani <foreignObject>.

Pár slov příkladům V příkladech této kapitoly předvedeme všechny tři způsoby, jimiž se používá SVG s HTML a prvkem <video>.

Tam, kde chceme předvést pouze inline SVG prvky společně přímým napojením na prvek <video> prostřednictvím JavaScriptu, budeme používat HTML a XHTML (například pro vlastní ovládací prvky). Tento způsob funguje ve všech moderních prohlížečích.

Pro demonstraci některých efektů SVG, jako je maskování videa, budeme používat HTML a externí SVG soubor. Do HTML souboru začleníme různý CSS kód pro prohlížeče založené na jádru WebKit (Safari a Google Chrome) a pro Firefox. Bohužel tím v těchto příkladech zůstanou stranou Opera a IE. Tam, kde budeme chtít experimentovat s inline prvky SVG i s efekty SVG, budeme moci použít pouze Firefox, takže budeme používat inline SVG. A nakonec se podíváme, jak se v SVG pracuje s videem, ale pouze ve formě inline SVG s XHTML, a to buď prostřednictvím prvku <video>, nebo prvku <foreignObject>. To jsou v současné době patrně nejkompatibilnější prostředky, jak používat SVG efekty pro video, aby fungovaly pokud možno ve všech prohlížečích, přestože tím zatím necháváme IE mrznout venku. Dá se ale očekávat, že vývojáři IE budou schopni poměrně rychle implementovat <foreignObject>, nebo možná dokonce i <video> pro SVG.

Základní tvary a <video> Když začneme na té nejzákladnější úrovni, SVG umožňuje vytvářet tyto základní tvary a obrysy: <circle> (kružnice). <ellipse> (elipsa). <rect> (obdélník). <line> (úsečka).

4

Navržené také do W3C ke standardizaci: http://people.mozilla.com/~roc/SVG-CSS-Effects-Draft.html

Kapitola 5 – HTML5 média a SVG

160

<polyline> (lomená čára). <polygon> (mnohoúhelník). <path> (cesta).

Tvary jako maska Kterýkoliv z těchto tvarů můžeme použít jako masku, jíž překryjeme video. To znamená, že můžeme video oříznout do složitého obrazce definovaného pomocí SVG. Pro tento účel použijeme SVG obrázek (pro prohlížeče s jádrem WebKit) nebo fragment SVG (pro Firefox), obojí ve formě masky v CSS. Výpis 5-1 ukazuje použití SVG souboru, jehož podoba je uvedena ve výpisu 5-2. SVG soubor obsahuje kružnici, kterou aplikujeme jako masku na video. Výsledky ve Firefoxu a v Safari vidíte na obrázku 5-1.

Kompletní kód této ukázky naleznete na http://html5videoguide.net/code_c5_1.html.

Výpis 5-1. Stylování videa, kde je externí SVG zdroj použit jako maska <video class="target" height="270" width="480" controls> <source src="HelloWorld.mp4" type="video/mp4"> <source src="HelloWorld.webm" type="video/webm"> <source src="HelloWorld.ogv" type="video/ogg"> </video> <style> .target { mask: url("basic_example_c5_1.svg#c1"); -webkit-mask: url("basic_example_c5_1.svg"); } </style>

Výpis 5-2. SVG zdroj, který se používá ve výpisu 5-1 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <mask id="c1" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"> <circle id="circle" cx="240" cy="135" r="135" fill="white"/> </mask> </defs> <use xlink:href="#circle"/> </svg>

HTML5 – audio a video, kompletní průvodce

161

Obrázek 5-1. Aplikování SVG masky na <video> v prohlížečích Firefox a Safari.

Opera a IE doposud nepodporují SVG obrázky ve formě masky na prvky HTML prostřednictvím CSS. Protože jednoduše zobrazí úplné video, nezařadili jsme sem snímky obrazovek z těchto prohlížečů. Později se podíváme, jak dosáhnout stejného efektu v Opeře, nicméně pro IE ale řešení nemáme.

Speciálním případem je Chrome. Příklad kdysi fungoval ve verzích Chrome 6.0.xxx, ale s poslední verzí, kterou jsme používali při práci na této knize, fungovat přestal a zobrazil stejné úplné video jako Opera a IE. Zdá se, že maskování SVG přestalo fungovat pro prvek <video>, i když nadále funguje pro prvek <img>. Tato chyba byla Googlem zaregistrována5. (V Chrome 11 je ukázka funkční – pozn. red.)

Asi jste si v kódu povšimli, že Firefox požaduje odkaz přímo na fragment SVG adresovaný prostřednictvím fragmentu URL (#), zatímco prohlížeče založené na WebKitu se odkazují na úplný SVG zdroj. Proto v SVG zdroji máme zahrnuty dvě různé specifikace: prvek <mask> pro Firefox a prvek <use> pro prohlížeče založené na WebKitu. Prvek <use> umožňuje vyhnout se opakování definice kružnice – prostě se na ni jen odkazujeme, což ovšem vyžaduje použít jmenný prostor xlink. Prvek <use> v zásadě vytvoří instanci kružnice ve formě masky pro prohlížeče založené na WebKitu, zatímco Firefox požaduje pouze definici.

Zajímavou věcí zpozorovanou na všech maskovaných videích je to, že jsou zapnuté ovládací prvky videa.

To znamená, že je možné ovládat přehrávání videa klikáním myší, pokud dobře odhadnete, kde je skrytá oblast tlačítka "Přehrát" a ukazatel pro průběh přehrávání. Vedlejším efektem je, že události myši prostupují maskovanou oblastí – na to se musí dávat pozor, protože to může vést k neočekávaným vedlejším efektům u uživatelů. Asi by bylo lepší používat vlastní ovládací prvky.

Poznamenejme, že prvek <mask> má v SVG dva prostředky pro stylování: můžete nastavit maskUnits a maskContentUnits buď na userSpaceOnUse, nebo na objectBoundingBox. Použijete-li userSpaceOnUse, můžete definovat rozměry jako absolutní a pozicovat masku kdekoliv uvnitř hranic objektu. Rozhodnete-li se místo toho pro objectBoundingBox, budou se souřadnice středu kružnice cx a cy, stejně jako poloměr r, interpretovat jako procenta vzhledem k rozměrům x a y objektu.

Výpis 5-3 ukazuje dvě různé verze SVG používající <mask> s objectBoundingBox ve Firefoxu. Výsledky jejich realizace vidíte na obrázku 5-2. Tento SVG jsme napsali jako inline, abyste viděli, jak se to dělá. Masky jsou definovány v prvku <defs>, protože samy o sobě nemají být vidět.

Kompletní kód této ukázky naleznete na http://html5videoguide.net/code_c5_2.html.

Výpis 5-3. Dvě SVG masky použité ve Firefoxu s hodnotou objectBoundingBox <video class="target1" height="270" width="480" controls>

5

Viz http://code.google.com/p/chromium/issues/detail?id=63055

Silvia Pfeiffer

HTML5 audio a video

Kniha "HTML5 – audio a video" je kompletní průvodce, který se zaměřuje na používání HTML5 prvků <audio> a <video> na webu. Dlouho předtím, než přišly na svět tyto multimediální prvky, mohl webový vývojář zařadit audio a video do webových stránek pouze prostřednictvím prvků <object> a <embed>, které na straně koncového uživatele vyžadovaly, aby měl v prohlížeči nainstalovány potřebné pluginy, například pro obsah ve formátu RealMedia, QuickTime nebo Windows Media.

Později přišel Flash, který s postupem času – díky svým animačním a interaktivním schopnostem – začal být uživateli akceptován natolik, že se stal pro vydavatele nejvhodnějším řešením pro úlohy, jak publikovat video online. Technologii Flash používaly například projekty Videos od Google nebo YouTube. Vývoj v této oblasti se ovšem nezastavil a s příchodem standardu HTML5 byly představeny prvky <audio> a <video> umožňující nativní přehrávání (tj. bez nutnosti mít potřebný plugin) multimédií v prohlížečích. Protože tato kniha má podtitul "kompletní průvodce", nevěnuje se pouze těmto novým mediálním prvkům HTML5, ale snaží se komplexně obsáhnout i další související záležitosti – například kódování mediálních zdrojů či možnosti, které pro stylování videa nabízí CSS3. V kontextu práce s multimédii na webu se také věnuje popisu a používání API JavaScriptu, vektorovému formátu SVG, Canvas nebo vláknům Web Workers. Nechybí ani popis API pro HTML5 audio či problematika přístupnosti médií.

V knize naleznete: x Úvod x Prvky <audio> a <video> x Stylování s CSS3 x API JavaScriptu x HTML5 média a SVG x HTML5 média a Canvas

ZONER software, a.s. významný producent softwaru v oblasti digitální fotogra¿e, poþítaþové gra¿ky a multimédií, poskytovatel internetových služeb, souvisejících s prezentací na internetu a e-komercí, a nakladatelství odborné literatury.

x HTML5 média a Web Workers x API pro HTML5 audio x Přístupnost médií a internacionalizace x Audio a video zařízení x Výhled a celkové shrnutí

O autorovi: Silvia Pfeiffer je expertka s mezinárodním renomé. Soustřeďuje se na oblast webových mediálních aplikací, na mediální standardy a usnadnění přístupu k médiím.

www.zoner.cz

Web doprovázející tuto knihu: http://www.html5videoguide.net

Zdrojové soubory ke stažení:

E N C Y K LO P E D I E

W E B D E S I G N E R A

Pod tímto logem vycházejí publikace určené pro každého, kdo se zajímá o tvorbu webových stránek. Od ryze praktických příruček a průvodců až po komplexní publikace o všem, co potřebuje webdesignér při každodenní práci. Na vydavatelský plán a výhody, které můžete získat, se informujte na adrese vydavatelství.

Zoner Press tel.: 532 190 883 e-mail: knihy@zoner.cz www.zonerpress.cz ZONER software, a.s., Nové sady 18, 602 00 Brno

© Foto: Jana Vališová

http://zonerpress.cz/download/html5-audio-a-video.rar

DOPORUČENÁ CENA: 379 KČ KATALOGOVÉ ČÍSLO: ZR1016

ISBN 978-80-7413-147-9

9 7 8 8 0 7 4 1 3 1 4 7 9