HTML5 - multimediálně

Mezi hlavní novinky v HTML5 patří elementy video a audio, které umožňují vkládání multimediálního obsahu na stránku, a to bez využití různých rozšíření a ovladačů, jako je dnes široce rozšířený Flash.

Implementace HTML5 v dnešních prohlížečích je již rozsáhlá, a to i v Internet Exploreru. Platí to naštěstí i pro nové elementy video a audio, rozdílné a chaotické jsou ale samotné kodeky pro přehrávání audia i videa. Tomu se tu budu samozřejmě taky věnovat.

Jako zdroje informací jsem použil připravovaný návrh konsorcia W3C pro HTML5 a w3schools.com.

Audio

Element audio je nový standard HTML5 pro přehrávání zvukových stop, jednoduše řečeno vám nabízí snadný způsob, jak umístit zvukovou stopu na web, a to bez závislosti na přídavném pluginu na straně uživatele, jakým je například Flash. Prvek audio je jednoduchý a přímočarý, ale má problémy s různou podporou kodeků pro přehrávání v prohlížečích. Jak už tomu tak bývá, každý prohlížeč prosazuje tu svoji, což přidělává vrásky samotným webdesingerům, kterým nestačí audio, ale i video, pouze v jednom formátu, ale musejí ho nabídnout alespoň ve dvou formátech, aby pokryli dostupnost v pěti nejrozšířenějších prohlížečích.

V současné době jsou pro element audio tři široce podporované zvukové formáty:

Možné atributy:

• autoplay = nastavení automatického přehrávání zvukové stopy ihned po načtení; atribut nemá hodnotu
• controls = zobrazuje ovládací prvky prohlížeče pro přehrání zvukové stopy; atribut nemá hodnotu
• loop = nastavuje přehrávání zvukové stopy pořád dokola; atribut nemá hodnotu
• preload = nastavuje automatické načítání zvukové stopy ještě před spuštěním; atribut nemá hodnotu
• src = adresa audio souboru; hodnotou je adresa URL

Ukázka zdrojového kódu:

<audio controls="controls">
  <source src="url_adresa.ogg" type="audio/ogg">
  <source src="url_adresa.mp3" type="audio/mpeg">
  <source src="url_adresa.wav" type="audio/wav">
  Váš prohlížeč nepodporuje element audio.
</audio>

Živá ukázka:

Více informací o elementu audio naleznete na W3C a W3C schools.

Video

Element video je také úplně nový, nahrazuje starý a složitý element object a umožňuje vám jednoduché vložení videa přímo na stránku. Element má několik atributů, kterými můžete provádět základní nastavení. I zde tvoří tu největší překážku kodeky pro přehrání audia a videa, elementy audio a video jsou si v tomto ohledu velice podobné.

V současné době existují pro element tři široce podporované video formáty:

• Ogg - Theora video kodek (Vorbis audio kodek) je otevřený kodek ale není tak kvalitní jako H.264
• MPEG-4 - H.264 video kodek (AAC audio kodek) je patentově chráněný, ale zároveň velice rozšířený a podporovaný na většině platforem
• WebM - VP8 video kodek (Vorbis audio kodek) je open-source kodek od Google, je rozšířený především na webu

Možné atributy:

• audio = výchozí stav zvuku; jedinou hodnotou je muted = ztlumený
• autoplay = nastavení automatického přehrávání videa ihned po načtení; atribut nemá hodnotu
• controls = zobrazuje ovládací prvky prohlížeče pro přehrání videa; atribut nemá hodnotu
• height = výška video přehrávače; pokud není hodnota zadána, prohlížeč si ji sám doplní, hodnotou jsou pixely
• loop = nastavuje přehrávání videa pořád dokola; atribut nemá hodnotu
• poster = adresa obrázku reprezentujícího video; hodnotou je URL adresa
• preload = nastavuje automatické načítání videa ještě před spuštěním; atribut nemá hodnotu
• src = adresa audiovizuálního souboru; hodnotou je URL adresa
• width = šířka video přehrávače, pokud není hodnota zadána, prohlížeč si ji sám doplní; hodnotou jsou pixely

Ukázka zdrojového kódu:

<video width="320" height="240" controls="controls" poster="obrazek.png">
  <source src="url_adresa.ogg" type="video/ogg">
  <source src="url_adresa.mp4" type="video/mp4">
  <source src="url_adresa.webm" type="video/webm">
  Váš prohlížeč nepodporuje element video.
</video>

Živá ukázka:

Více informací o elementu video naleznete na W3C a W3C schools.

Source

Trochu pozdě, ale přece jen. Element source nastavuje několik alternativních formátů mediálních prvků. Tento element by nebyl zapotřebí, kdyby existoval jediný dohodnutý formát. Jak jsem již zmiňoval výše, není tomu tak, a proto tu je element source, kterým se přiřadí například k elementu video různé formáty videí a prohlížeč si pak vybere ten, který podporuje. Element source je sám o sobě nepoužitelný, měl by být potomkem prvků audio nebo video, jak je patrné z výše uvedených ukázek.

Možné atributy:

• media = určuje typ zařízení, pro který je médium optimalizované; hodnotou je media query, výchozí je all
• src = adresa určitého média; hodnotou je URL adresa
• type = určuje typ média; hodnotou je MIME_type

Více informací o elementu source naleznete na W3C a W3C schools.

Závěr

Nová implementace multimediálního obsahu v HTML5 nabízí alternativu pro vkládání videí a zvuku na web. Samotné použití nových elementů je velmi jednoduché, jediným problémem můžou být potíže s kodeky a s uživateli starších prohlížečů, které neimplementují nové HTML5. To samozřejmě brání rychlému rozšíření, ale například YouTube už přechází z Flashe na HTML5, což dává tušit, že nejde jen o experiment, ale o kvalitní a dnes již použitelné řešení. Nové "multimediální" elementy mohu jen doporučit.

To je prozatím vše, v příštím článku se snad už dostanu k vytvoření jednoduchého HTML5 a CSS3 layoutu.