HTML5 - multimediálně
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

HTML5 - multimediálněHTML5 - multimediálně

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno

HTML5 - multimediálně

Google       Google       25. 7. 2011       19 866×

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.

Reklama
Reklama

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:

Formát IE Mozilla Firefox Google Chrome Opera Safari
Ogg Vorbis Nepodporuje 3.5 + 3.0 + 10.9 + Nepodporuje
MP3 9.0 + Nepodporuje 3.0 + Nepodporuje 3.0 +
Wav Nepodporuje 3.5 + Nepodporuje 10.9 + 3.0 +

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:

Formát IE Mozilla Firefox Google Chrome Opera Safari
Ogg Nepodporuje 3.5 + 5.0 + 10.5 + Nepodporuje
MPEG-4 9.0 + Nepodporuje 5.0 / ? * Nepodporuje 3.0 +
WebM Nepodporuje 4.0 + 6.0 + 10.6 + Nepodporuje
* Google v lednu tohoto roku oznámil, že Google Chrome přestane během několika měsíců podporovat kodek H.264. Tudíž podpora MPEG-4 videí v Google Chrome bude možná pouze s rozšířením a nebude už přímo v prohlížeči. Přesnou verzi, která by měla ukončit podporu, se mi zatím nepodařilo zjistit.
  • 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.

Ukázka implementace elementů video a audio v různých prohlížečích.

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.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
16 hlasů
Google
(fotka) Jiří ŠťastnýJsem student střední školy v Liberci, občasný programátor, aktivní sportovec, fanatický fanoušek Google a mé pravé jméno je سعيد جورج.
Web     Twitter     Facebook     LinkedIn    

Nové články

Obrázek ke článku Datafesťak 2018 bude o datech, byznyse a ženách v IT

Datafesťak 2018 bude o datech, byznyse a ženách v IT

Na Univerzitě v Hradci Králové se 23. a 24. listopadu potkají všichni, které zajímá práce s daty. 

Reálné zkušenosti se zpracováním dat budou v prostorách univerzity prezentovat zástupci obchodních i výrobních firem. Potkat tak bude možné představitelé například z Kiwi.com, Crocodille, Dáme Jídlo nebo společnosti Adler. 

Reklama
Reklama
Obrázek ke článku 4 tipy, jak financovat rozvoj start-upu

4 tipy, jak financovat rozvoj start-upu

Možná jste právě jedním ze zakladatelů či manažerů nadějného start-upu 
a aktuálně řešíte, kde sehnat finanční prostředky pro další rozvoj. Zde pro vás máme čtyři tipy.

Obrázek ke článku Virtuální zrcadla změní způsob nakupování v e-shopech

Virtuální zrcadla změní způsob nakupování v e-shopech

Díky pluginu Virtooal.com získávají zákazníci e-shopů možnost si vyzkoušet produkty ve virtuálním světě. E-shopy, které si plugin nainstalují, výrazně snižují množství vráceného zboží, dělají nákupy zábavnějšími, a tím budují lepší vztahy se svými zákazníky. V současnosti lze Virtooal.com využít zejména pro kosmetiku, brýle a šperky, do budoucna půjde také o módu.

Obrázek ke článku Kariérní postup & vyšší plat: Titul MBA ve sféře IT

Kariérní postup & vyšší plat: Titul MBA ve sféře IT

Působíte jako specialista v oblasti IT a aspirujete na povýšení, příp. řídící pozici? Pak se jistě potýkáte nejen s vysokými nároky (potenciálních) zaměstnavatelů, ale i se silnou konkurencí ze strany ostatních uchazečů. Pokud chcete zvýšit své šance na kariérní posun a lepší plat, měli byste vedle technických dovedností ovládat i ty manažerské. Pomoci vám v tomto ohledu může studium MBA se specializací na management IT.

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032018 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý