1. Úvod↑ Hore

    V posledných rokoch začali weboví vývojári vyjadrovať určité obavy týkajúce sa podoby jazyka HTML a XHTML, pretože tieto štandardy sa im zdali už zastarané a nevyhovujúce súčasným požiadavkám moderných webových aplikácií. Cieľom HTML 5 má byť úplne zmeniť tento stav a bude obsahovať tagy a API na zlepšenie interaktivity, multimédiá a lokalizáciu, pričom sa o tejto revízii často hovorí aj ako o náhrade za Silverlight, QuickTime či Flash. Experimentálne sa už objavujú fragmenty nových vlastností HTML 5 v aktualizovaných verziách webových prehliadačov (viac ďalej) a niektorí vývojári už začínajú vyjadrovať svoj optimizmus, že modernizovaná verzia HTML ich zbaví závislosti od spomínaných proprietárnych doplnkov. Niektorí veľkí hráči na poli webových technológií, ako napríklad Apple, Google, Mozilla alebo Vimeo, však poukazujú na to, že cesta vývoja HTML 5 bude ešte tŕnistá, a niektoré časti špecifikácie považujú za kontroverzné, aj keď iné sú už prakticky dokončené. Táto situácia však stavia webových vývojárov pred neľahkú otázku – ako vytvárať bohaté internetové aplikácie s dnešnými technológiami tak, aby si udržali otvorenú cestu k plynulému prechodu na HMTL 5.

    V tomto dokumente by som chcel predstaviť vybrané prvky predstavené v špecifikácii HTML 5 vytváranej konzorciom W3C. Bude sa jednať konkrétne o prvky audio, video a embed.

    Všetky menované prvky sú prvýkrát predstavené v HTML 5 a mali by zabezpečiť jednoduchšie a jednotnejšie vkladanie mediálneho obsahu do webových stránok. Mali by taktiež zabezpečiť nezávislosť od softvéru alebo rozšírení tretích stán. Tieto prvky poskytujú API, čiže autori si môžu vytvoriť svoje vlastné rozhrania. V prípade prevzatia tohoto rozhrania sa použije element source, ktorý sa používa spolu s týmito novými elementami.

    S prvkami audio a video sa experimentuje už dnes. HTML 5 video možnosť prinášajú oba najväčšie portály na zdieľanie videí – YouTube aj Vimeo. Pri oboch je to však len doplnková funkcia, ktorú si môžete zvoliť. Či je tento spôsob správny je otázne. Ako si neskôr ukážeme, video aj audio prvok dokážu v prípade, že nie sú prehliadačom podporované, zavolať externý flash prehrávač, ktorý sa používa aj dnes. Stránky by tak boli prístupné pre každého bez akýchkoľvek obmedzení, ktoré môžu zažiť používatelia iPhone alebo iPad, či iných mobilných zariadení nepodporujúcich flash. Nie je to však prípad len vyššie menovaných mobilných zariadení, takisto počítače vo firemnje sfére nemusia podporovať flash a ich užívatelia si ho nebudú môcť doinštalovať kvôli bezpečnostnej politike firmy. Možno si poviete, že video alebo audio prvky nemajú vo firemnej sfére čo robiť, ale je to presne naopak. Mnohé firmy využívajú, alebo by mohli využívať, video prípadne audio výučbu svojich zamestnancov, vnútrofiremnú prezentáciu výrobkov alebo služieb a mnoho iného.

    Ďalšou a zároveň možno najväčšou výhodou, ale aj nevýhodou, je už skôr spomínaná nezávislosť od externého prehrávača, pluginu. Všetky tri už spomínané prvky si vybrali práve toto za základ svojej existencie. Všetky vložené objekty by mal webový prehliadač zvládnuť zobraziť sám. Možno ste už niekde počuli „No Flash – no crash“, čiže žiadny flash – žiadny pád. Prehliadače, prípadne celé systémy, by tak mali byť odolnejšie voči pádom spôsobenými pluginmi tretích strán. Takisto by sa mala zvýšiť bezpečnosť nakoľko nebude prebiehať nezabezpečená komunikácia medzi pluginom a prehliadačom. Ako som však spomínal, schopnosť zobrazovať vložený obsah vlastnými silami prehliadača môže byť aj nevýhoda. Na internete sa už objavili porovnania vyťaženosti procesora pri využívaní HTML 5 prvkov a ich flash ekvivalentom. Výsledky sa rôznia nakoľko podpora v jednotlivých prehliadačoch a systémoch je rôzna, či už pre HTML 5 alebo pre flash.

    Pri podpore HTML 5 prvkov, najmä čo sa video prvku týka, vzniká ďalšia nepríjemnosť a tou je potreba kódovať videá do dvoch rôznych formátov – H.264 a Ogg Theora. Formát H.264 momentálne podporuje len Safari 4. Ostatné prehliadače zatiaľ neplánujú jeho podporu nakoľko tento formát je licencovaný a hoci vlastník patentu prisľúbil, že formát nebude spoplatňovať do roku 2016, nie je jasné čo sa stane potom.

    Osobne si myslím, že HTML 5 prvky tak skoro flash z webových aplikácií nevytlačia, či už kvôli podielu prehliadačov podporujúcich HTML 5 prvky na trhu alebo rozlišnostiam v implementácií jednotlivých prvkov (podporda rôznych formátov). Pevne však verím a dúfam, že trend HTML 5 + CSS 3 + JavaScript bude rásť a webové aplikácie sa tak stanú rovnako prístupné pre všetkých užívateľov bez rozdielu na zobrazovacie zariadenie a systémovú podporu prvkov tretích strán.

    Poďme si však teraz predstaviť prvky embed, audio a video bližšie aj z toho technického hľadiska.

    Ako prvý si predstavíme prvok embed.

  2. Embed↑ Hore

    Je možné, že tento prvok sme videli použiť už pri HTML 4.01 pri vkladaní flash objektu do stránky. Bol však vsadený medzi element object a nie ako samostatný prvok. V HTML 5 je prvok embed samostatný a nahrádza zložitú syntax prvku object. Jeho využitie je však rovnaké a slúži na vkladanie externého obsahu do webovej stránky, napríklad flash objektu.

    Použitie

    <embed src="helloworld.swf" />

    Prvok embed je nepárový, znamená to, že nemá ukončovaci tag </embed> a nie je tak možné vložiť doplňujúci text, ktorý by sa zobrazil prehliadačom nepodporujúcim tento prvok.

    Atribúty

    AtribútPopis
    srcUrčuje adresu objektu, ktorý sa má vložiť. Adresa musí byť v URI formáte.
    typeUrčuje typ vkladaného objektu. Ak je vyplnené, musí byť v MIME formáte.
    widthUrčuje šírku vkladaného objektu v pixeloch. Nesmie byť záporná hodnota.
    heightUrčuje výšku vkladaného objektu v pixeloch. Nesmie byť záporná hodnota.

    Atribúty prvku embed.

    Obmedzenia a odporúčania

    • Prvok embed nesmie byť použitý ako potomok prvku a.
    • Prvok embed nesmie byť použitý ako potomok prvku button.
    • Atribút name je nevhodný a odporúča sa použiť atribút id.
    • Atribút align je nevhodný a odporúča sa použiť CSS.

    Podpora prehliadačov

    Podpora prvku embed je zabezpečená vo všetkých majoritných prehliadačoch okrem Internet Exploreru.

    Chrome 4Firefox 3Firefox 3.6IE 6IE 7IE 8Opera 10.5Safari 4
    ánonieánonienienieánoáno

    Podpora prvku embed v prehliadačoch.

  3. Audio↑ Hore

    Ďalším prvkom, ktorý si predstavíme je audio. Tento prvok vychádza z prvku embed, nakoľko tiež umožňuje vkladanie externého obsahu do webovej stránky. Ako samotný názov prvku napovedá, vkladaný obsah je audio súbor. Pri používaní HTML 4.01 alebo XHTML sme pre vloženie audio súboru do stránky museli použiť externý flash prehrávač.

    Použitie

    <audio src="elvis.ogg" controls autobuffer></audio>

    Prvok audio je párový, je tak možné vložiť doplňujúci text, ktorý by sa zobrazil prehliadačom nepodporujúcim tento prvok, prípadne zavolať externý prehrávač na prehratie daného súboru.

    Atribúty

    AtribútPopis
    srcUrčuje adresu súboru, ktorý sa má vložiť. Adresa musí byť v URI formáte.
    preloadBoolean hodnota určujúca, či sa má súbor automaticky načítať do pamäte.
    autoplayBoolean hodnota určujúca, či sa má súbor automatcky prehrať hneď ako je to možné.
    loopBoolean hodnota určujúca, či sa má súbor opakovane prehrávať.
    controlsBoolean hodnota určujúca, či sa majú zobraziť ovládacie prvky.

    Atribúty prvku audio.

    Obmedzenia a odporúčania

    • Prvok audio s ovládacími prvkami (controls) nesmie byť použitý ako potomok prvku a.
    • Prvok audio s ovládacími prvkami (controls) nesmie byť použitý ako potomok prvku button.

    Podpora prehliadačov

    Podpora prvku audio je zabezpečená vo všetkých majoritných prehliadačoch okrem Internet Exploreru.

    Chrome 4Firefox 3Firefox 3.6IE 6IE 7IE 8Opera 10.5Safari 4
    ánonieánonienienieánoáno

    Podpora prvku audio v prehliadačoch.

    Prvok audio podporuje niekoľko audio formátov ako sú ogg, mp3 a wav. Podpora týchto formátov je však zatiaľ v prehliadačoch rôzna a preto je vhodné rozšíriť prvok audio o element source, pomocou ktorého môžeme definovať viacero audio súborov v rôznych formátoch, pričom prehliadač prehrá prvý formát, ktorý bude podporovať. Ak prehliadač nepodporuje ani jeden formát, prípadne vôbec prvok audio, zavoláme externý (flash) prehrávač.

    <audio controls>
    	<source src="elvis.ogg" type="audio/ogg" />
    	<source src="elvis.mp3" type="audio/mp3" />
    	<!—kód pre zavolanie externého (flash) prehrávača -->
    <audio>

    Použitie prvku audio s atribútom source.

    Chrome 4Firefox 3Firefox 3.6IE 6IE 7IE 8Opera 10.5Safari 4
    Ogg Vorbisánonieánonienienieánonie
    MP3nienienienienienieánoáno
    WAVnienieánonienienieánoáno
    AACánonienienienienieánonie

    Podpora formátov v prehliadačoch.

    Prvok audio taktiež poskytuje API, pomocou ktorého je možné pristupovať k jeho ovládacím prvkom.

    • play() – spustí prehrávanie súboru
    • pause() – pozastaví prehrávanie súboru
    • canPlayType() – zistí, či prehliadač podporuje daný MIME typ súboru
    • buffered() – atribút určujúci počiatočný a konečný čas súboru v pamäti

    Implementácia v prehliadačoch

    Pokryť všetky prehliadače je v momentálnom stave podpory audio formátov stále obtiažne. Vo všeobecnosti sa odporúča využiť prvok audio v spojení so source, ktorý odkazuje na súbor vo formáte mp3 a ogg. Stále sa taktiež odporúča poskytnúť flash prehrávač pre Internet Explorer alebo staršie verzie prehliadačov.

    Podporu prvku audio v prehliadači je možné overiť niekoľkými spôsobmi pomocou Java Script-u.

    Priame otestovanie audio prvku:

    var audioTagSupport = !!(document.createElement('audio').canPlayType);

    Otestovanie Audio() objektu:

    try {
    	myAudioObj = new Audio("");
    	audioObjSupport = !!(myAudioObj.canPlayType);
    	basicAudioSupport = !!(!audioObjSupport ? myAudioObj.play : false);
    } catch (e) {
    	audioObjSupport = false;
    	basicAudioSupport = false;
    }

    Otestovanie podpory audio formátov:

    Návratové hodnoty funkcie canPlayType() sú momentálne „no“, „maybe“ alebo „probably“.

    if (myAudio.canPlayType) {
    	canPlayOgg = ("no" != myAudio.canPlayType("audio/ogg")) && ("" != myAudio.canPlayType("audio/ogg"));
    	canPlayMp3 = ("no" != myAudio.canPlayType("audio/mpeg")) && ("" != myAudio.canPlayType("audio/mpeg"));
    }

    Praktická ukážka

    V ukážke je použité demo pesničky "Abstinent" od skupiny Para.

    Veľmi peknou implementáciou prvku audio je jQuery plugin jPlayer (http://www.happyworm.com/jquery/jplayer/), ktorý obsahuje ako kontrolu podporovaných formátov, tak fall back flash prehrávač a má jednoduché použitie.

  4. Video↑ Hore

    Posledným prvkom, ktorý rozoberieme je video. Tento prvok taktiež vychádza z prvku embed, nakoľko tiež umožňuje vkladanie externého obsahu do webovej stránky. Ako samotný názov prvku napovedá, vkladaný obsah je video súbor. Pri používaní HTML 4.01 alebo XHTML sme pre vloženie video súboru do stránky museli použiť externý flash prehrávač.

    Použitie

    <video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls autobuffer>
    	<p>You can <a href="http://www.youtube.com/demo/google_main.mp4">download the video</a> instead.</p>
    </video>

    Prvok video je párový, je tak možné vložiť doplňujúci text, ktorý by sa zobrazil prehliadačom nepodporujúcim tento prvok, prípadne zavolať externý prehrávač na prehratie daného súboru.

    Prvok video podporuje aj atribút autoplay, ktorý spustí prehrávanie video súboru hneď ako je to možné. Vo všeobecnosti sa však tento atribút príliš neodporúča používať.

    Atribúty

    AtribútPopis
    srcUrčuje adresu súboru, ktorý sa má vložiť. Adresa musí byť v URI formáte.
    preloadBoolean hodnota určujúca, či sa má súbor automaticky načítať do pamäte.
    autoplayBoolean hodnota určujúca, či sa má súbor automatcky prehrať hneď ako je to možné.
    loopBoolean hodnota určujúca, či sa má súbor opakovane prehrávať.
    controlsBoolean hodnota určujúca, či sa majú zobraziť ovládacie prvky.
    posterUrčuje adresu obrázku, ktorý sa zobrazí pri nedostupnosti/načítaní videa.
    widthUrčuje šírku vkladaného objektu v pixeloch. Nesmie byť záporná hodnota.
    heightUrčuje výšku vkladaného objektu v pixeloch. Nesmie byť záporná hodnota.

    Atribúty prvku video

    Obmedzenia a odporúčania

    • Prvok video s ovládacími prvkami (controls) nesmie byť použitý ako potomok prvku a.
    • Prvok video s ovládacími prvkami (controls) nesmie byť použitý ako potomok prvku button.

    Podpora prehliadačov

    Podpora prvku video je zabezpečená vo všetkých majoritných prehliadačoch okrem Internet Exploreru.

    Chrome 4Firefox 3Firefox 3.6IE 6IE 7IE 8Opera 10.5Safari 4
    ánonieánonienienieánoáno

    Podpora prvku video v prehliadačoch.

    Prvok video podporuje niekoľko video formátov ako sú ogg a H.264. Je vhodné rozšíriť prvok video o element source, pomocou ktorého môžeme definovať viacero video súborov v rôznych formátoch, pričom prehliadač prehrá prvý formát, ktorý bude podporovať. Ak prehliadač nepodporuje ani jeden formát, prípadne vôbec prvok video, zavoláme externý (flash) prehrávač.

    <video controls width=”500”>
    	<source src="elvis.ogg" type="video/ogg" />
    	<source src="elvis.mp4" type="video/mp4" />
    	<!—kód pre zavolanie externého (flash) prehrávaca -->
    </audio>

    Použitie prvku video s atribútom source.

    Chrome 4Firefox 3Firefox 3.6IE 6IE 7IE 8Opera 10.5Safari 4
    Ogg Vorbisánonieánonienienieánonie
    H.264nienienienienienienieáno

    Podpora formátov v prehliadačoch.

    Prvok video taktiež poskytuje API, pomocou ktorého je možné pristupovať k jeho ovládacím prvkom.

    • play() – spustí prehrávanie súboru
    • pause() – pozastaví prehrávanie súboru
    • ended() – vráti boolean hodnotu či prehrávanie videa skončilo alebo nie
    • volume() – umožňuje nastaviť hlasitosť, taktiež vráti aktuálnu hodnotu
    • canPlayType() – zist,í či prehliadač podporuje daný MIME typ súboru
    • buffered() – atribút určujúci počiatočný a konečný čas súboru v pamäti

    Implementácia v prehliadačoch

    Pokryť všetky prehliadače je v momentálnom stave podpory video formátov stále obtiažne. Vo všeobecnosti sa odporúča využiť prvok video v spojení so source, ktorý odkazuje na súbor vo formáte mp4 a ogg. Stále sa taktiež odporúča poskytnúť flash prehrávač pre Internet Explorer alebo staršie verzie prehliadačov.

    Jednou z možností ako zabezpečiť zobrazenie video pre každý prehliadač je nasledujúce riešenie pochádzajúce zo stránky http://camendesign.com/code/video_for_everybody:

    <video width="640" height="360" poster="__POSTER__.JPG" controls>
    	<source src="__VIDEO__.OGV" type="video/ogg"></source>
    	<source src="__VIDEO__.MP4" type="video/mp4"></source><!--[if gt IE 6]>
    	<object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
    	<![endif]--><!--[if !IE]><!-->
    		<object width="640" height="375" type="video/quicktime" data="__VIDEO__.MP4">
    	<!--<![endif]-->
    		<param name="src" value="__VIDEO__.MP4" />
    		<param name="showlogo" value="false" />
    		<param name="autoplay" value="false" />
    		<object width="640" height="384" type="application/x-shockwave-flash"
    		data="__FLASH__.SWF?image=__POSTER__.JPG&amp;file=__VIDEO__.MP4">
    		<param name="movie" value="__FLASH__.SWF?image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
    		<img src="__POSTER__.JPG" width="640" height="360" alt="__Title of video__"
    		title="No video playback capabilities, please download the video below" />
    		</object>
    	<!--[if gt IE 6]><!-->
    		</object>
    	<!--<![endif]-->
    </video>
    <p>Download Video: <a href="__VIDEO__.MP4">Apple iTunes "MP4"</a> | <a href="__VIDEO__.OGV">Open Format "OGG"</a></p>
    

    Kód pre zabezpečenie zobrazenia videa vo všetkých prehliadačoch.

    Dané riešenie je nezávislé od akéhokoľvek Java Scriptu a spoľahlivo detekuje verziu videa, ktoré dokáže webový prehliadač zobraziť.

    Praktická ukážka vytvorená pomocou vyššie spomínanej techniky

    Download Video: Apple iTunes “MP4”Open Format “OGG”

    Veľmi peknou implementáciou prvku video je Sublime Video (http://jilion.com/sublime/video), ktorý obsahuje ako kontrolu podporovaných formátov, tak fall back flash prehrávač. Zatiaľ však nie je verejne dostupný.

  5. Zhrnutie↑ Hore

    Prvky, ktoré sme si predstavili, sa stále vyvíjajú a podpora prehliadačmi sa neustále zlepšuje, bude to však ešte dlhá cesta. Objavujú sa už aj testy a porovnávania s klasickou metódou použitia flash prehrávača. Najčastejšie sa porovnáva zaťaženie PC pri prehrávaní videa. Nakoľko podpora neustále napreduje, nie je možné vyniesť jednoznačný výsledok, pretože na niektorých platformách výkonnostne vyhráva flash, na iných naopak HTML 5 video.

    Tieto nové prvky určite prinesú nespočetné výhody spolu v spojení s ostatnými novinkami, ktoré prináša HTML 5.

  6. Zdroje↑ Hore

    HTML5 + CSS3 Powered

    HTML5 Powered with CSS3 / Styling, Multimedia, and Semantics