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:
[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
a a a a 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.. 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. a , 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. a 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.[email protected] . Najdete mě také zde: Twitter: @silviapfeiffer Můj blog: http://blog.gingertech.net[email protected] nebo [email protected] . Adresa: ZonerPress, ZONER software, a.s, Miroslav Kučera, Nové sady 18, 602 00 Brno. a V této kapitole si představíme nové prvky a 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 a 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 a 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. a V této sekci se seznámíte se všemi atributy prvků a 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. 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 HTML5, viz tabulku 2-1. a v pěti prohlížečích (zleva doprava): Firefox, Safari, Chrome, Opera a IE. 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. 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 – konkrétně prvky <source> a . K nim se také dostaneme. Zadruhé, všechno, co je umístěno uvnitř prvku a není to uvnitř některého z konkrétních dceřiných prvků prvku , se považuje za "náhradní obsah". Jde o to, že webové prohlížeče, které nepodporují prvky a 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 a 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 Your browser does not support the HTML5 video element. ve starším prohlížeči, zde se jedná o IE8. Dovnitř prvku můžete přidat jakkoli značkování HTML, včetně prvků 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 HTML5, můžete použít knihovny JavaScriptu, které a 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 , abyste pochopili, co přesně prvek nabízí. 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 patřičným formálním kódem HTML5: Výpis 2-5. Dokument HTML5 s videem MPEG-4 Guide to HTML5 video: chapter 2: example Chapter 2: example 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 , takže proto videa vypadají "jako obrázek". a . 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 má logicky viditelné rozměry, SVG se ho týká. Nedá se opravdově aplikovat na (lze ale realizovat SVG grafiku ve spolupráci s prvkem ). 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>, , <metadata>, <symbol>, <use>, <g>, <switch>, <a>, <view>).<br />
<br />
1 2 3<br />
<br />
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<br />
<br />
Kapitola 5 – HTML5 média a SVG<br />
<br />
158<br />
<br />
Tvary a obrazce (<circle>, <ellipse>, <rect>, <line>, <polyline>, <polygon>, <path>, <cursor>). Text (<text>, <tspan>, <tref>, <textPath>, <altGlyph rel="nofollow">, <altGlyphDef rel="nofollow">, <altGlyphItem rel="nofollow">, <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 rel="nofollow">, <set>, <animateMotion rel="nofollow">, <animateTransform rel="nofollow">, <animateColor rel="nofollow">, <mpath>). Ostatní (<script>, <image> a <foreignObject>).<br />
<br />
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).<br />
<br />
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).<br />
<br />
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.<br />
<br />
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.<br />
<br />
HTML5 – audio a video, kompletní průvodce<br />
<br />
159<br />
<br />
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.<br />
<br />
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>.<br />
<br />
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.<br />
<br />
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).<br />
<br />
4<br />
<br />
Navržené také do W3C ke standardizaci: http://people.mozilla.com/~roc/SVG-CSS-Effects-Draft.html<br />
<br />
Kapitola 5 – HTML5 média a SVG<br />
<br />
160<br />
<br />
<polyline> (lomená čára). <polygon> (mnohoúhelník). <path> (cesta).<br />
<br />
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><br />
<br />
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><br />
<br />
HTML5 – audio a video, kompletní průvodce<br />
<br />
161<br />
<br />
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><br />
<br />
5<br />
<br />
Viz http://code.google.com/p/chromium/issues/detail?id=63055<br />
<br />
Silvia Pfeiffer<br />
<br />
HTML5 audio a video<br />
<br />
Kniha "HTML5 – audio a video" je kompletní průvodce, který se zaměřuje na používání HTML5 prvků <audio rel="nofollow"> 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 rel="nofollow"> 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 rel="nofollow"> a <video> x Stylování s CSS3 x API JavaScriptu x HTML5 média a SVG x HTML5 média a Canvas<br />
<br />
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.<br />
<br />
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í<br />
<br />
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.<br />
<br />
www.zoner.cz<br />
<br />
Web doprovázející tuto knihu: http://www.html5videoguide.net<br />
<br />
Zdrojové soubory ke stažení:<br />
<br />
E N C Y K LO P E D I E<br />
<br />
W E B D E S I G N E R A<br />
<br />
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í.<br />
<br />
Zoner Press tel.: 532 190 883 e-mail: knihy@zoner.cz www.zonerpress.cz ZONER software, a.s., Nové sady 18, 602 00 Brno<br />
<br />
© Foto: Jana Vališová<br />
<br />
http://zonerpress.cz/download/html5-audio-a-video.rar<br />
<br />
DOPORUČENÁ CENA: 379 KČ KATALOGOVÉ ČÍSLO: ZR1016<br />
<br />
ISBN 978-80-7413-147-9<br />
<br />
9 7 8 8 0 7 4 1 3 1 4 7 9<br />
<br /> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" method="post" action="https://adoc.pub/report/html5-audio-a-video-silvia-pfeiffer-kompletni-prvodce-" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "HTML5. audio a video. Silvia Pfeiffer. » kompletní průvodce «"</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Your name</label>
<input type="text" name="name" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Reason</label>
<select name="reason" required="required" class="form-control">
<option value="">-Select Reason-</option>
<option value="pornographic" selected="selected">Pornographic</option>
<option value="defamatory">Defamatory</option>
<option value="illegal">Illegal/Unlawful</option>
<option value="spam">Spam</option>
<option value="others">Other Terms Of Service Violation</option>
<option value="copyright">File a copyright complaint</option>
</select>
</div>
<div class="form-group">
<label>Description</label>
<textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea>
</div>
<div class="form-group">
<div style="display: inline-block;">
<div class="g-recaptcha" data-sitekey="6LcEnMcZAAAAAFHzKKgaE-Qh57XzUTzpfRElD4dP"></div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var inner_height = $(window).innerHeight() - 250;
$('#pdfviewer').css({"height": inner_height + "px"});
});
</script>
<footer class="footer" style="margin-top: 60px;">
<div class="container-fluid">
Copyright © 2024 ADOC.PUB. All rights reserved.
<div class="pull-right">
<span><a href="https://adoc.pub/about">About Us</a></span> |
<span><a href="https://adoc.pub/privacy">Privacy Policy</a></span> |
<span><a href="https://adoc.pub/term">Terms of Service</a></span> |
<span><a href="https://adoc.pub/copyright">Copyright</a></span> |
<span><a href="https://adoc.pub/contact">Contact Us</a></span> |
<span><a href="https://adoc.pub/cookie_policy">Cookie Policy</a></span>
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="add-note-label">Sign In</h4>
</div>
<div class="modal-body">
<form action="https://adoc.pub/login" method="post">
<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div class="form-group">
<div class="checkbox">
<label class="form-checkbox">
<input type="checkbox" name="remember" value="1" />
<i class="form-icon"></i> Remember me
</label>
<label class="pull-right"><a href="https://adoc.pub/forgot">Forgot password?</a></label>
</div>
</div>
<button class="btn btn-primary btn-block" type="submit">Sign In</button>
</form>
</div>
</div>
</div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-177279549-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-177279549-1');
</script>
<script src="https://adoc.pub/assets/js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://adoc.pub/assets/css/jquery-ui.css">
<script>
$(function () {
$("#document_search").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://adoc.pub/suggest",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
autoFill: true,
select: function( event, ui ) {
$(this).val(ui.item.value);
$(this).parents("form").submit();
}
});
});
</script>
<!-- cookie policy -->
<div id="ADOCPUB_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #FFC107; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;">
Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://adoc.pub/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_ADOCPUB_cookie_box();return false;">Agree & close</a>
</div>
<script>
function accept_ADOCPUB_cookie_box() {
document.cookie = "ADOCPUB_cookie_box_viewed=1;max-age=15768000;path=/";
hide_ADOCPUB_cookie_box();
}
function hide_ADOCPUB_cookie_box() {
var cb = document.getElementById('ADOCPUB_cookie_box');
if (cb) {
cb.parentElement.removeChild(cb);
}
}
(function () {
var ADOCPUB_cookie_box_viewed = (function (name) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
})('ADOCPUB_cookie_box_viewed');
if (ADOCPUB_cookie_box_viewed) {
hide_ADOCPUB_cookie_box();
}
})();
</script>
<!-- end cookie policy -->
</body>
</html>
