HTML5. audio a video. Silvia Pfeiffer. » kompletní průvodce «

Transkript

1 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

2

3 HTML5 audio a video kompletní průvodce Silvia Pfeiffer

4 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 Všechna práva vyhrazena. Zoner Press Katalogové číslo: ZR1016 ZONER software, a.s. Nové sady 18, 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: Zdrojové soubory ke stažení: 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, Brno tel.: knihy@zoner.cz ISBN

5 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

6 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 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

7 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

8 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 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í 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

9 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 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 269 Základní čtení a zapisování 270

10 8 Pokročilé filtry 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 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 319 Video zobrazující samo sebe 319

11 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

12 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 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

13 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.

14 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 alpha build 1029, Google Chrome , vše na Mac OS X, a Internet Explorer 9 beta ( ) 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 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.

15 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: Můj blog: 13 Zdrojové kódy Zdrojové kódy k ukázkám použitým v této knize jsou dostupné na této adrese: K dispozici jsou i stránky doprovázející tuto knihu: 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.

16 14 Jako odborný redaktor Zoner Press vítám vaše názory. Můžete mi psát poslat 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 . 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í ů, které dostávám, nemohu zaručit odpověď na každou zprávu. miroslav.kucera@zoner.cz nebo knihy@zoner.cz. Adresa: ZonerPress, ZONER software, a.s, Miroslav Kučera, Nové sady 18, Brno.

17 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 nebo na Všechny příklady v této a následujících kapitolách jsou k dispozici na 5videoguide.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.

18 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.

19 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é

20 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ří mwembed 1, Video for Everybody 2, Sublime Video 3 nebo VideoJS 4. 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 Viz 2 Viz 3 Viz 4 Viz

21 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 Následující verze s označením SVG 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 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 Viz (specifikace) 2 Viz 3 Viz

22 158 Kapitola 5 HTML5 média a SVG 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: (Firefox). (WebKit, tj. Chrome a Safari). (Opera). (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 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.

23 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 atributy 4 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:

24 160 Kapitola 5 HTML5 média a SVG <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 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" " <svg version="1.1" xmlns=" xmlns: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>

25 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ána 5. (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 Výpis 5-3. Dvě SVG masky použité ve Firefoxu s hodnotou objectboundingbox <video class="target1" height="270" width="480" controls> 5 Viz

26 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í. 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. V knize naleznete: Úvod Prvky <audio> a <video> Stylování s CSS3 API JavaScriptu HTML5 média a SVG HTML5 média a Canvas HTML5 média a Web Workers API pro HTML5 audio Přístupnost médií a internacionalizace 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 webových mediálních aplikací, na mediální standardy a usnadnění přístupu k médiím. Web doprovázející tuto knihu: Zdrojové soubory ke stažení: ENCYKLOPEDIE WEBDESIGNERA 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.: knihy@zoner.cz ZONER software, a.s., Nové sady 18, Brno Foto: Jana Vališová DOPORUČENÁ CENA: 379 KČ KATALOGOVÉ ČÍSLO: ZR1016 ISBN