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

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

 

HTML5 - multimediálně

Google       Google       25. 7. 2011       18 082×

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

Reklama
Reklama
Obrázek ke článku Blockchain & Bitcoin konference

Blockchain & Bitcoin konference

V pátek 19. 5. 2017 se v pražském konferenčním centru Andel’s konala Blockchain & Bitcoin konference. Řada odborníků a podnikatelů v oboru blockchainu a kryptoměn představila možnosti budoucího směřování tohoto oboru. Speakeři většinou rusky mluvící provenience prezentovali řešení svých firem založená na technologii blockchainu.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032017 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý