Audio a video - Studijní program: N6209 – Systémové inženýrství a informatika Studijní obor: 62

1. HTML5

1.5 Audio a video

Prvky audio a video jsou jednou z největších změn v HTML5. Standardizují způsob vkládání multimediálních souborů do stránek. Před HTML5 bylo hlavní alternativou použití Flash Playeru nebo Quick Time Playeru, což vyžadovalo instalaci přídavného modulu do prohlížeče a jeho pravidelnou aktualizaci. S příchodem dotykových zařízení začal být Flash spíše záporem, jelikož spotřebovává příliš mnoho energie u zařízení, která jsou navržena pro nízkou spotřebu a i některé funkce jako „hover“ nebo„mouse-over“

přestaly mít význam. Proto samotný Adobe (firma vlastnící technologii Flash) začíná více podporovat HTML5 ve svých programech od verze Adobe CS6¹².

Nemělo by být ovšem zapomínáno na starší prohlížeče, které jsou stále využívány a nepodporují prvky video ani audio. Popularita internetových prohlížečů v České republice je zobrazena v tabulce níže. Je patrné, že se zvyšuje popularita Chromu, který podporuje prvky audio a video. Počet uživatelů používajících Internet Explorer, jehož starší verze video a audio nepodporují, naopak klesá. Stále se ale jedná o 19% uživatelů webu, kteří mohou mít prohlížeč bez podpory prvků audio a video. Pokud chce tedy webový designer opravdu přístupný web, měl by využít alternativní zobrazení mediálního obsahu, což bude podrobněji popsáno dále.

12 REYNA, Jorge. From Flash to HTML5: the eLearning evolution. Training & Development [online]. 2012, Issue: 5, 2012-11-07 [cit. 2014-01-22]. DOI: 18398561. Dostupné z:

http://search.proquest.com/docview/1140333316?accountid=17116

Tab. 2: Oblíbenost prohlížečů v ČR napříč lety. Údaje jsou v %.

Rok Internet Explorer Firefox Chrome Safari Opera

2009 38 45 7 1,3 9,6

2010 29 41 16 2 9

2011 25 36 25 2,5 8

2012 22 31 32 3 6

2013 19 28 38 4 5

Zdroj: Top 9 Desktop, Mobile & Tablet Browsers in Czech Republic from Q1 2009 to Q1 2014. StatCounter [online]. 2014 [cit. 2014-02-20]. Dostupné z:

http://gs.statcounter.com/#desktop+mobile+tablet-browser-CZ-quarterly-200901-201401

Kontejnery a kodeky

S prvky video a audio vyvstala i důležitá otázka, jaký kodek bude ten, jenž bude podporován napříč všemi prohlížeči. Kodek je algoritmus, který je použit pro zakódování a dekódování proudu multimediálních dat. Kodek je může kódovat za účelem uložení, přenosu nebo zašifrování, nebo je naopak dekódovat za účelem přehrávání nebo editování.

Kodeky se doručují v kontejnerových formátech, které zapouzdřují kódované video a audio do struktury, která umožňuje následné dekódování. Nejznámější formáty zapouzdření jsou v následující tabulce.

Tab. 3: Multimediální kontejnery a kodeky v nich obsažené.

DŮVODY PRO ZACHOVÁNÍ PODPORY

Ogg Xiph Ogg: Theora

Zdroj: vlastní zpracování podle PFEIFFER, Silvia. HTML5 - audio a video : kompletní průvodce.

Jan Pokorný. Brno: Zoner Press, 2011. ISBN 978-80-7413-147-9.

Ogg Theora a Vorbis byly původně zahrnuty do HTML5 specifikace jako základní kodeky pro audio a video, jelikož s nimi nejsou spojeny žádné licenční poplatky. Ne všichni výrobci prohlížečů však chtěli implementovat podporu Ogg a to například z důvodu špatné kvality nebo nepodpory pro mobilní zařízení. Proto vznikl nový souborový formát WebM od Googlu, který splňoval všechna kritéria výrobců. Google tedy začal spolupracovat s Operou, Mozillou, Adobe i Microsoftem, aby byla docílena větší podpora v jejich prohlížečích. Apple ale zatím spolupráci odmítl. WebM dále začaly používat některé větší společnosti jako YouTube, Wikimedia nebo Skype ve zkušební verzi, což podpořilo další rozšířená tohoto formátu.¹³

Nejlépe využitelnými formáty jsou v současnosti tedy WebM a Ogg Theora, webdesigneři ovšemmusí stále používat minimálně MP4 (MPEG-4 Part 14), Ogg Theora nebo WebM, pokud chtějí, aby jejich multimediální soubory byly dostupné všem uživatelům.

V budoucnu se snad vývojáři jednou dočkají jednotného kodeku pro všechny prohlížeče.

Audio

Audio element slouží k přehrávání zvuku nebo zvukového streamu přímo v internetovém prohlížeči.

V tabulce jsou znázorněny kodeky a jejich podpora v prohlížečích. Jak už bylo řečeno, zatím neexistuje kodek, který by byl podporován všemi prohlížeči, je proto nutné vkládat video i audio soubory na stránky v různých formátech. U audio souborů to budou alespoň soubory MP3 (MPEG-1 nebo MPEG-2 Audio Layer III) a OggVorbis.

13 PFEIFFER, Silvia. HTML5 - audio a video : kompletní průvodce. Jan Pokorný. Brno: Zoner Press, 2011.

ISBN 978-80-7413-147-9.

Tab. 4: Audio kodeky podporované prohlížeči

Zdroj: HTML5 & CSS3 Support. FindmebyIP [online]. 2013 [cit. 2013-10-30]. Dostupné z:

http://fmbip.com/litmus

Vložení audia na stránku s různými zdroji vypadá následovně:

</audio>

Takto vložený zvuk nebude dělat nic, pokud by se měl zvuk hned po načtení stránky například přehrát nebo začít načítat bude ho potřeba doplnit atributy, jako jsou: autoplay, preload, controls a další. Audio má většinu atributů společných s prvkem video. Všechny atributy a hodnoty, které nabývají, jsou přehledně znázorněny v následující tabulce.

Tab. 5: Prvky video a audio s jejich atributy

PRVEK ATRIBUTY NABÝVANÉ HODNOTY POPIS

VIDEO autoplay autoplay, "prázdná hodnota" automatické přehrávání videa

preload none, metadata, auto určení jak se mají začít načítat data ze zdroje

controls controls, "prázdná hodnota" zobrazení ovládacích prvků videa loop loop, "prázdná hodnota" přehrávání do smyčky

poster url adresa odkaz na obrázek videa

height, width délka v px nebo % výška a šířka videa

mediagroup text přiřazení videa do skupiny

muted muted, "prázdná hodnota" ztlumení zvuku u videa

src url adresa odkaz na zdroj videa

track subtitles, captions, descriptions, chapters, metadata

přidání textové nebo zvukové stopy k video

AUDIO autoplay autoplay, "prázdná hodnota" automatické přehrávání audia

preload none, metadata, auto určení jak se mají začít načítat data ze

controls controls, "prázdná hodnota" zobrazení ovládacích prvků audia loop loop, "prázdná hodnota" přehrávání do smyčky

mediagroup text přiřazení audia do skupiny

muted muted, "prázdná hodnota" ztlumení zvuku

src url adresa odkaz na zdroj audia

Zdroj: vlastní zpracování podle HTML: The Markup Language - video. W3C [online]. 2013 [cit.

2014-02-21]. Dostupné z: http://dev.w3.org/html5/markup/video.html a W3C. HTML: The Markup Language - audio [online]. 2013 [cit. 2014-02-21]. Dostupné z:

http://dev.w3.org/html5/markup/audio.html

Video

Element video slouží k přehrávání videí nebo filmů. Stejně jako u audia neexistuje kodek, který by byl podporován všemi nejpoužívanějšími prohlížeči, proto je třeba video vystavovat v různých formátech, nejlépe opět v Ogg Theora a MP4.

Tab. 6: Video kodeky podporované prohlížeči

Kodeky WebM Ogg Theora MP4 H.264

Zdroj: HTML5 & CSS3 Support. FindmebyIP [online]. 2013 [cit. 2013-10-30]. Dostupné z:

http://fmbip.com/litmus

Vložení videa do stránek z různých zdrojů bude vypadat následovně:

Prvek source obsahuje atribut src, který ukazuje cestu k souboru a atribut type, který blíže specifikuje formát kontejneru zdrojového videa.

Atribut controls zobrazí ovládací prvky videa nebo audia. Vzhled ovládacích prvků se liší s každým prohlížečem. Dají se nastylovat pomocí CSS a JavaScriptu například v případě, kdy má být vzhled přehrávače jednotný se vzhledem stránky.

U prvku video se musí také uvádět atributy width a height, které určují výšku a šířku videa a tato čísla jsou pixely. Další atributy jsou už nepovinné.

Atributem poster, jak název napovídá, vloží k videu jeho náhledový obrázek a to takový, jaký určí designer. Hodí se například v případě, že je u videa zakázáno stahování jeho metadat.

Dalším atributem je autoplay. Ten spouští audio nebo video hned po načtení stránky.

I když tento atribut existuje, není z hlediska přístupnosti stránek doporučováno ho používat.

Podobným atributem je loop. Ten způsobuje, že se soubory budou přehrávat stále dokola.

Atribut muted spustí video či audio bez zvuku, kdy uživatel tento zvuk, může opět zapnout.

Atribut preload nahrazuje atribut autobuffer. Na rozdíl od autobufferu může obsahovat více hodnot: auto, none nebo metadata.

Při nastavené hodnotě auto se video či audio začnou načítat do mezipaměti, ještě předtím než bude samotný mediální soubor spuštěn. Zdroj může být načten celý až do konce, ale bez hodnoty autoplay nebude spuštěn. Uživatel tedy bude na přehrání mediálního souboru čekat nejkratší dobu. Bude vědět, jak dlouho bude trvat přehrávání videa nebo audia a uvidí náhledový obrázek i v případě, že není nastavena hodnota poster. Designer by měl hodnotu auto použít v případě, kdy ví, že časté načítání mediálních soborů nebude problém na daném serveru.

Hodnota none naopak dává pokyny prohlížeči, aby se žádná data nenačítala. Buď v případě, že designér předpokládá, že uživatelé nebudou tak často spouštět mediální soubor nebo v případě, že server požaduje minimální načítání dat. Příkladem je stránka s mnoha mediálními prvky, u kterých je malá pravděpodobnost, že je uživatel přehraje.

Pokud přiřadíme hodnotu none k video, je důležité, aby mělo nastavený také poster. Pokud by tomu tak nebylo, video soubor by nezobrazoval náhledový obrázek, který se běžně dekóduje z videa. Místo náhledového obrázku by zde bylo jen černé okno. Hodnota none způsobí i to, že se nebudou stahovat žádná metadata, tím pádem uživatel před zpuštěním videa nebude například vědět, jak dlouho trvá přehrávání videa.

Hodnota metadata bude načítat pouze metadata souboru, ale ne celý zdroj. Je to výchozí hodnota atributu preload. Dává pokyny prohlížeči, aby načetl pouze rozměry videa, seznam skladeb, délku přehrávání a pár prvních snímků videa. Praktické využití je opět například u stránky s mnoha videi. Běžně je doporučováno nastavovat preload na hodnotu metadata. Pokud je stránka ovšem určena především pro mobilní zařízení doporučuje se hodnota none, která nebude zatěžovat datový tok.¹⁴^,¹⁵

Poslední atribut mediagroup umožňuje přehrávat dvě videa, která jsou ze stejného zdroje.

Pokud jsou videa přidána do stejné skupiny, přehrávají se synchronně při pokliku na kterékoli video, pokud jsou v jiné skupině, přehrává se pouze zvolené video. V praxi to může sloužit například v případě, kdy designer chce použít to samé video na stránce několikrát. Mediagroup tedy umožní přehrávání několika videí, ale z jednoho zdroje. Tím se snižuje datová náročnost na rozdíl od případu, kdy by na stránce v minulosti musela být použita videa z různých zdrojů.

Před uzavírací značku videa může být dále přidán prvek track následovně:

</video>

14 HTML. WHATWG [online]. 2014 [cit. 2014-02-24]. Dostupné z: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html

15HOGAN, Brian P. a Jakub URBAN. HTML5 a CSS3 : výukový kurz webového vývojáře. Vyd. 1. Brno:

Computer Press, 2011. ISBN 978-80-251-3576-1.

Track umožňuje zobrazovat například překlad přehrávaného videa. Jeho atribut kind může nabývat hodnot: subtitles, captions, descriptions, chapters a metadata.

Hodnota subtitles se používá pro vložení překladu nebo přepisu dialogu, například pokud zvuk není uživateli zcela srozumitelný. Přepis se zobrazí jako text překrývající video.

Caption slouží pro přepis zvuků nebo hudby v případě, že není zvuk k dispozici, je špatně slyšitelný nebo je uživatel sluchově postižený.

Description se používá jako zvukový popis videa pokud video není viditelné nebo pokud je uživatel slepý.

Chapters slouží pro rozdělení videa na kapitoly, které pak slouží k navigaci v mediálním souboru. Kapitoly se zobrazí jako interaktivní menu.

A metadata slouží pro skladby přehrávané pomocí skriptu. Nejsou zobrazena v prohlížeči.¹⁶

Atribut src, který je dále v zápisu prvku track, ukazuje cestu k souboru například s překladem a atribut srclang určuje jazyk. Atribut label je nadpis stopy.¹⁷ Track jen na rozdíl od ostatních výše zmíněných prvků a atributů podporován zatím pouze v prohlížeči IE10 (Internet Explorer) a Chrome.¹⁸

Vložením videa ve formátu mp4, webm a ogv (Ogg Video) je zajištěno přehrávání ve většině prohlížečů. 19% lidí ale stále používá Internet Explorer a z toho někteří verzi 8, která nepodporuje prvek video. Pokud má být tedy video přístupné i starším prohlížečům vloží se do prvku video i odkaz na flashovou verzi nebo na odkaz s videem pro jeho

16 HTML. WHATWG [online]. 2014 [cit. 2014-02-24]. Dostupné z: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html

17 GOLDSTEINOVÁ, Alexis, Louis LAZARIS a Estelle WEYLOVÁ. HTML5 a CSS3 pro webové designéry. 1. vydání. Jan Pokorný. Brno: Zoner Press, 2011, 286 s. ISBN 978-80-7413-166-0.

18 Getting Started With the Track Element. HTML5 ROCKS [online]. 2013 [cit. 2014-01-29]. Dostupné z:

http://www.html5rocks.com/en/tutorials/track/basics/

stáhnutí. Starší prohlížeč tento odkaz rozpozná a video přehraje ve Flash Playeru.

Kompletní kód bude poté vypadat následovně:

</object>

</video>

In document Studijní program: N6209 – Systémové inženýrství a informatika Studijní obor: 6209T021 – Manažerská informatika Autor práce: Bc. Jana Dlasková Vedoucí práce: Ing. Petr Weinlich, Ph.D. (Page 29-37)