html5 - audio a video
DESCRIPTION
HTML5 - audio a video, kompletní průvodceTRANSCRIPT
1
» kompletní průvodce «
Prvky pro audio a video • Stylování s CSS3 • SVG • Canvas • Web Workers • API pro HTML5 audio • Přístupnost médií
E N C Y K L O P E D I E W E B D E S I G N E R A
HTML5audio a video
Silvia Pfeiff er
Silvia Pfeiffer
HTML5 – audio a videokompletní průvodce
The Definitive Guide to HTML5 VideoSilvia 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 autor-ských práv.
HTML5 – audio a video, kompletní průvodceAutor: Silvia Pfeiffer
Copyright © ZONER software, a.s. Vydání první v roce 2011. Všechna práva vyhrazena.
Zoner PressKatalogové čí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ánDTP 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 dis-tribuová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 soft ware, a.s Nové sady 18, 602 00 Brno
tel.: 532 190 883 e-mail: [email protected] 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> 23
Prvky <video> a <audio> 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 157
Použití SVG s prvkem <video> 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 fi ltry 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í 185
Kapitola 6 HTML5 média a Canvas 187
Video v Canvas 188
drawImage() 188
Rozšíření funkce drawImage() 191
Funkce getImageData() a putImageData() 193
Funkce getImageData() a jednoduchá putImageData() 195
Dvě canvas 197
Jednoduché manipulace v Canvas 199
Nahrazení pozadí průhlednými pixely 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 251
Čtení audio dat 252
Extrakce audio samplů 252
Pole framebuff er 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 fi ltrového grafu 269
Základní čtení a zapisování 270
8
Pokročilé fi ltry 271
Vytvoření dozvuku 272
Zobrazení tvaru vlny 273
Shrnutí 275
Kapitola 9 Přístupnost médií a internacionalizace 277
Technologie alternativního obsahu 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 308
Navigace 309
Kapitoly 309
Navigace z klávesnice 310
Specifi kace 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 319
Video zobrazující samo sebe 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í 333
Výhled 333
API metadat 333
API pro kvalitu služby 335
Celkové shrnutí 336
Kapitoly 2, 3 a 4 – seznámení s problematikou 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 autoroviSilvia Pfeiffer, PhD., se narodila a strávila mládí v Německu, kde také vystudovala kombi-naci 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 mi-nulé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 (Com-monwealth 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šech-ny 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ů pro-stř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 sou-borovou 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 pra-covat 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, Me-dia 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 recenzentoviChris 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í kon-tejner 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 technolo-giím nový boom, větší než poslední boom zvaný "Web 2.0", a že budeme mít k dispozici nějakou audiovizuál-ní 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 me-diá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áz-ky 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 dovo-lili 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 architek-tury, které nakonec umožnily přímý přístup k sekcím audia a videa tak, jak je to popsáno v kapitole o usnad-ně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ředmluvaJe 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 tako-vý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 obsahujeKniha 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í fun-gují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 JavaScrip-tu 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 autoraNijak se neostýchejte se svými názory a kontaktujte mě na [email protected].
Najdete mě také zde:
Twitter: @silviapfeiffer
Můj blog: http://blog.gingertech.net
Zdrojové kódyZdrojové 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ázorJako č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: [email protected] nebo [email protected].
Adresa: ZonerPress, ZONER software, a.s, Miroslav Kučera, Nové sady 18, 602 00 Brno.
23
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 aktu-alizací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://html-5videoguide.net. Pravděpodobně usoudíte, že bude prospěšné, když otevřete pro-hlíž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 kte-rý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 úva-hu 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.
Prvky <audio> a <video>
KAPITOLA 2
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 nadefino-vali šíř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.
25HTML5 – audio a video, kompletní průvodce
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á zobra-zovat. Funkce a rozdíly budeme podrobněji analyzovat níže. Tohle měl být jen aperitiv po povzbuzení chuti.
Náhradní obsahTaké 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 obra-zovky 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é
26 Kapitola 2 – Prvky <audio> a <video>
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ý pod-poruje 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 zvo-lený 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í pro-stř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 srcVe svém nejzákladnějším tvaru obsahuje prvek <video> pouze atribut src, což je URL na zdroj videa. Zdro-jem 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 Viz http://www.kaltura.org/project/HTML5_Video_Media_JavaScript_Library2 Viz http://camendesign.com/code/video_for_everybody3 Viz http://sublimevideo.net/4 Viz http://videojs.com/
157
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áz-ků. 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 ob-jekty, 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 funkcio nalit 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 funkcio nalit SVG 1.2, včetně modulu Media.
V této kapitole se podíváme, jak se může pomocí funkcio nalit 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 spolu-prá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>, <sym-bol>, <use>, <g>, <switch>, <a>, <view>).
1 Viz http://www.w3.org/TR/SVG/intro.html (specifikace)2 Viz http://www.w3.org/TR/SVG12/3 Viz http://www.w3.org/TR/2004/WD-SVG12-20041027/media.html
HTML5 média a SVG
KAPITOLA 5
158 Kapitola 5 – HTML5 média a SVG
Tvary a obrazce (<circle>, <ellipse>, <rect>, <line>, <polyline>, <polygon>, <path>, <cur-sor>).
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 po-už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_(Sca-lable_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 SVGS příchodem HTML5 začalo být SVG nativně integrováno do webových stránek prostřednictvím jeho vlast-ní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.
159HTML5 – audio a video, kompletní průvodce
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 for-mě 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 defi-novány inline nebo v nějakém externím souboru SVG.
Video v SVGVš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ůmV 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řed-nictví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 sou-bor. 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ě nejkom-patibilně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
160 Kapitola 5 – HTML5 média a SVG
<polyline> ( lomená čára).
<polygon> ( mnohoúhelník).
<path> (cesta).
Tvary jako maskaKterý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 pro-hlíž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 apliku-jeme 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>
161HTML5 – audio a video, kompletní průvodce
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. Pro-tož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že-né na WebKitu. Prvek <use> umožňuje vyhnout se opakování definice kružnice – prostě se na ni jen odkazu-jeme, 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 userSpaceO-nUse, můžete definovat rozměry jako absolutní a pozicovat masku kdekoliv uvnitř hranic objektu. Rozhod-nete-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
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ě kon-cového uživatele vyžadovaly, aby měl v prohlížeči nainstalovány potřebné plugi-ny, 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 nej-vhodnějším řešením pro úlohy, jak publikovat video online. Technologii Flash po-uží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 komplex-ně 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: Úvod Prvky <audio> a <video> Stylování s CSS3 API JavaScriptu HTML5 média a SVG HTML5 média a Canvas
E N C Y K L O 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í publi-kace 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í.
Silvia Pfeiff er
HTML5audio a video
ISBN 978-80-7413-147-9
DOPORUČENÁ CENA: 379 KČKATALOGOVÉ ČÍSLO: ZR1016
9 7 8 8 0 7 4 1 3 1 4 7 9
www.zoner.cz
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.
© F
oto:
Jana
Val
išov
á
ZONER software, a.s., Nové sady 18, 602 00 Brno
Zoner Presstel.: 532 190 883e-mail: [email protected]
HTML5 média a Web Workers API pro HTML5 audio Přístupnost médií a internaciona-
lizace Audio a video zařízení Výhled a celkové shrnutí
O autorovi:Silvia Pfeiffer je expertka s mezinárodním renomé. Soustřeďuje se na oblast webo-vých mediálních aplikací, na mediální standardy a usnadnění přístupu k médiím.
Web doprovázející tuto knihu: http://www.html5videoguide.net
Zdrojové soubory ke stažení: http://zonerpress.cz/download/html5-audio-a-video.rar