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

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

 

HTML5 - multimediálně

Google       Google       25. 7. 2011       16 516×

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 NEWTON Media prohledá 200  milionů mediálních zpráv během sekund díky Cisco UCS

NEWTON Media prohledá 200 milionů mediálních zpráv během sekund díky Cisco UCS

Česká společnost NEWTON Media provozuje největší archiv mediálních zpráv ve střední a východní Evropě. Mezi její zákazníky patří například ministerstva, evropské instituce nebo komerční firmy z nejrůznějších oborů. NEWTON Media rozesílá svým zákazníkům každý den monitoring médií podle nastavených klíčových slov a nabízí online službu, kde lze vyhledat mediální výstupy v plném znění od roku 1996.

Reklama
Reklama
Obrázek ke článku Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Touto roční dobou, kdy je zem pokrytá barevným listím a prsty křehnou v mrazivých ránech, se obvykle těšíme na zbrusu novou verzi RAD Studia. Letos si však ale budeme muset počkat na Godzillu a Linux až do jara. Vezměme tedy za vděk alespoň updatem 2 a jelikož dle vyjádření pánů z Embarcadero se budou nové věci objevovat průběžně, pojďme se na to tedy podívat.

Obrázek ke článku Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Stále rostoucí zájem o cloudové služby i maximální důraz na pružnost, spolehlivost a bezpečnost IT vedou k výrazným inovacím v datových centrech. V infrastruktuře datových center hraje stále významnější roli software a stále častěji se lze setkat s hybridními přístupy k jejich budování i provozu.

Obrázek ke článku Konference: Mobilní technologie mají velký potenciál pro byznys

Konference: Mobilní technologie mají velký potenciál pro byznys

Firmy by se podle analytiků společnosti Gartner měly  rychle přizpůsobit skutečnosti, že mobilní technologie už zdaleka nejsou horkou novinkou, ale standardní součástí byznysu. I přesto - nebo možná právě proto - tu nabízejí velký potenciál. Kde tedy jsou ty největší příležitosti? I tomu se bude věnovat již čtvrtý ročník úspěšné konference Mobilní řešení pro business.

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 © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý