11. diel - Multimédiá v HTML II. časť

HTML 5 mení zmysel jazyka HTML ako takého. Web sa totiž časom mení a stále častejšie obsahuje multimediálne bohatý obsah. Tomu sa HTML 5 prispôsobilo a ponúka tagy pre prehrávanie zvukov a videí. Bohužiaľ celej túto tému nie je tak jednoduché kvôli tzv. Kodekom.

<audio>

Tag <audio> je párový a slúži na vloženie zvukovej stopy do HTML dokumentu. Je podporovaný všetkými modernými prehliadačmi a v starších prehliadačoch sa zobrazí alternatívny text, uvedený medzi tagy <audio> a </audio>.

Atribúty

Elementu môžeme priradiť nasledujúce atribúty:

• autoplay - Atribút je typu boolean, tzn. že stačí uviesť autoplay bez hodnoty. Ak je uvedený, spustí sa zvuk automaticky (ihneď po načítaní).
• controls - Atribút je typu boolean. Ak je uvedený, zobrazí sa prehrávač s ovládacími prvkami. Ak nie, nie je element vôbec zobrazený.
• loop - Atribút je taktiež typu boolean. Ak je uvedený, je zvuková stopa prehrávaná s opakovaním stále dokola.
• preload - Umožňuje nastaviť načítanie média do pamäte, čo urýchli jeho prehratie po kliknutí, ale spomalí načítanie stránky: Pri hodnote auto sa po načítaní stránky načíta do pamäti celý audio súbor.

  Pri hodnote metadata sa načíta len hlavička.

  A pri hodnote none sa súbor do pamäte nenačíta.

• Pri hodnote auto sa po načítaní stránky načíta do pamäti celý audio súbor.
• Pri hodnote metadata sa načíta len hlavička.
• A pri hodnote none sa súbor do pamäte nenačíta.
• src - Špecifikuje umiestnenie zvukového súboru. Súbor môžeme vložiť priamo, pomocou atribútu src alebo pomocou tagu <source>, ktorý si ukážeme nižšie.

Ukážka použitia

Jednoduché vloženie audio súboru do HTML stránky by mohlo vyzerať takto:

<audio src="audio/kalimba.mp3" controls>
    Váš prohlížeč nepodporuje vkládání zvukových souborů, soubor si
    <a href="audio/kalimba.mp3">stáhněte</a>.
</audio>

A výsledok:

Zdroj médiá môžeme tiež vložiť pomocou tagu <source>, týmto spôsobom možno špecifikovať niekoľko zdrojových súborov a prehliadač si vyberie ten, ktorý sa mu práve hodí.

Kodeky audia

Pre úplnosť si uvedieme podporu formátov pre audio:

kodek	IE	Edge	Firefox	chrome	Safari	Opera Mini	Opera
MP3	áno	áno	áno	áno	áno	nie	áno
OGG	nie	áno	áno	áno	nie	nie	áno
WAV	nie	áno	áno	áno	áno	nie	áno

Nároky na dátovú prevádzku

Možno vás napadá čo sa stane, keď prehliadač podporuje viac formátov, z ktorých sme mu dali na výber. Je to jednoduché, prehliadač si vyberie ten prvý, ktorý bude fungovať.

Vzhľadom k tomu, že mobilní operátori majú celkom nízky dátový limit, tak je vhodné ako prvá dávať vždy ten formát s vyššou kompresiou. U nášho ukážkového audia by to bolo nasledovné: OGG <MP3 <WAV

WAV je oveľa väčšia ako ostatné, a preto je vhodné ho dávať na koniec.

<source>

Tag <source> predstavuje zdroj média pre tagy <audio> a <video>. Do týchto tagov sa teda vkladá a umožňuje špecifikovať niekoľko zdrojových súborov, pričom si prehliadač vyberie ten, ktorý dokáže prehrať.

Pre audio sa obvykle používajú formáty OGG a MP3, pre video MP4 a OGV (OGG). Pre video sa využíva kodekov Ogg Theora, H.264 a VP8. Práve pri videu najčastejšie použijeme tag <source>, pretože každý prehliadač podporuje iné kodeky.

Atribúty

Element má nasledovné atribúty:

• media - Špecifikuje typ zariadenia, pre ktoré je médium určené. Napríklad media="(min-width:650px)" sa bude zobrazovať iba pre displeje väčšie ako 650px. Môžeme pre mobilné zariadenia tak určiť súbor, ktorý bude napríklad skrátený či menej kvalitné.
• src - Udáva zdrojový súbor médiá.
• type - MIME typ média. Najčastejšie audio/ogg a audio/mpeg.

Ukážka použitia

Vloženie zvukového súboru do HTML stránky pomocou tagu <source> by mohlo vyzerať napr. Nasledovne:

<audio controls>
  <source src="audio/kalimba.ogg" type="audio/ogg" />
  <source src="audio/kalimba.mp3" type="audio/mpeg" />
  Váš prohlížeč nepodporuje vkládání zvukových souborů, soubor si
  <a href="audio/kalimba.mp3">stáhněte</a>.
</audio>

Po vizuálnej stránke je výsledok rovnaký:

V minulosti sa video do webov dávalo pomocou Flashu. Dnes sa však dáva cez nové funkcie HTML 5. Video bola jedna z prvých funkcií HTML 5, ktorá začala masovo z trhu vytláčať Flash.

<video>

Tag <video> je párový a slúži na vloženie videa do HTML dokumentu. Je taktiež podporovaný všetkými modernými prehliadačmi a v starších prehliadačoch sa zobrazí alternatívny text, ktorý je uvedený medzi tagy <video> a </video>, ako je tomu pri tagu <audio>.

Atribúty

Element má nasledovné atribúty:

• autoplay - Atribút typu boolean. Ak je uvedený, spustí sa video automaticky, ihneď po načítaní rovnako ako audio. Ak nie, musíme na video kliknúť pravým tlačidlom na video a zvoliť Prehrať (ak nemáme zapnuté controls, viď. Ďalej).
• controls - Atribút je typu boolean. Ak je uvedený, zobrazí sa prehrávač s ovládacími prvkami. Ak nie, zobrazí sa len samotné video a jediná možnosť ovládania je cez kontextové menu, čo nie je šťastné riešenie (kliknutie pravým tlačidlom na video).
• height - Nastavenie výšky prehrávača.
• loop - Atribút je typu boolean. Ak je uvedený, je video prehrávané s opakovaním stále dokola.
• Muted - Atribút je taktiež typu boolean. Ak je uvedený, je zvuk automaticky pri prehrávaní vypnutý.
• poster - URL obrázku, ktorý sa zobrazí na pozadí prehrávača, kým používateľ video nespustí (tzv. thumbnail).
• preload - Umožňuje nastaviť načítanie média do pamäte, čo urýchli jeho prehratie po kliknutí, ale spomalí načítanie stránky. Rovnako ako pri tagu <audio>: Pri hodnote auto sa po načítaní stránky načíta do pamäti celý video súbor.

  Pri hodnote metadata sa načíta len hlavička.

  A pri hodnote none sa súbor do pamäte nenačíta.

• Pri hodnote auto sa po načítaní stránky načíta do pamäti celý video súbor.
• Pri hodnote metadata sa načíta len hlavička.
• A pri hodnote none sa súbor do pamäte nenačíta.
• src - Špecifikuje umiestnenie zvukového súboru. Súbor môžeme vložiť priamo, pomocou atribútu src alebo pomocou elementu <source>.
• width - Nastavenie šírky prehrávača.

Ukážka použitia

Jednoduché vloženie video súboru do HTML stránky by mohlo vyzerať takto:

<video src="video/wildlife.mp4" width="320" height="240" controls="controls">
  Váš prohlížeč nepodporuje vkládání video souborů, soubor si
  <a href="video/wildlife.mp4">stáhněte</a>.
</video>

Ako výsledok dostaneme:

A s použitím tagu <source>:

<video width="320" height="240" controls="controls">
  <source src="video/wildlife.ogv" type="video/ogg" />
  <source src="video/wildlife.mp4" type="video/mp4" />
  Váš prohlížeč nepodporuje vkládání video souborů, soubor si
  <a href="video/wildlife.mp4">stáhněte</a>.
</video>

Na stránke si všimnite tiež vlastných rozmerov:

Kodeky videa

Pre úplnosť tu pridám zoznam kodekov a prehliadačov, ktoré sa navzájom podporujú:

kodek	IE	Edge	Firefox	chrome	Safari	Opera Mini	Opera
MP4	áno	áno	áno	áno	áno	nie	áno
OGV	áno	áno	áno	áno	nie	nie	áno
WebM	nie	áno	áno	áno	áno	nie	áno **

Iba čiastočná podpora

^** Pre mobilný prehliadač Opera je len čiastočná podpora.

Nároky na dátovú prevádzku

Tu platí rovnaký princíp ako u viacerých zdrojov audia. Prehliadač si vyberie prvý, ktorý dokáže prehrať. Ako prvý dávať vždy formát s lepšou kompresiou, aby sme taktiež nevyčerpali užívateľovi dátový program (a to oveľa viac, než u zvuku).

U nášho ukážkového videá by to bolo nasledovné: OGV <MP4 <WebM

<track>

Tag <track> slúži na vloženie textovej stopy. Používa sa na vloženie titulkov a ďalších textových popisov k elementom video a teoreticky aj audio. Jeho jediným formátom je WebVTT (.vtt), ktorý sa podobá často používaným titulkovými formátom .srt. Jeden z mála rozdielov je ten, že musí byť kódovaný v UTF-8.

Atribúty

Má nasledujúce atribúty:

• default - Atribút je typu boolean. Ak je uvedený a užívateľ nepreferuje určitý jazyk, je brána daná textová stopa ako predvolené.
• kind - Špecifikuje druh popiskov. Môžeme nastaviť:- captions - Popis dialógov a zvukov vo videu pre nepočujúcich
  • chapters - Popisky kapitol pre lepšiu navigáciu vo videu
  • descriptions - Textový popis videa
  • metadata - Popis videa pre skripty, používatelia ho nevidia
  • subtitles - Titulky.
• label - Popisok textové stopy.
• srclang - Špecifikuje jazyk titulkov (ak je kind="subtitles").
• src - Cesta k zdroju titulkov či videa, ako už atribút poznáme z minulých tagov.

Ukážka použitia

Ukážka vloženie dvoch druhov titulkov k videu:

<video width="320" height="240" controls="controls">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.ogg" type="video/ogg" />
  <track src="subtitles_cs.vtt" kind="subtitles" srclang="cs" label="Česky" default>
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" />
</video>

<iframe>

Tento element nepatrí priamo do sekcie multimédií, avšak sa pomocou tohto elementu môžeme odkázať napríklad na YouTube video. To nám značne uľahčí prácu a máme k dispozícii obrovskú škálu videí. Jedná sa o riadkový tag, odtiaľ názov iframe (= aj nlin frame, riadkový rámec).

Element je párový a obaľuje alternatívny obsah, ktorý sa zobrazí prehliadačom, ktoré nepodporujú rámce.

Atribúty

Elementu môžeme uviesť nasledujúce atribúty:

• height - Udáva výšku rámu v pixeloch.
• width - Udáva šírku rámu v pixeloch.
• name - Udáva názov rámu. Pokiaľ na stránke s rámom uvedieme odkaz, môžeme mu nastaviť atribút target na meno rámca a odkaz sa potom otvorí v danom tagu <iframe>.
• sandbox - Umožňuje zakázať niektoré akcie na stránke v <iframe> z hľadiska bezpečnosti. To sa hodí najmä vtedy, keď v <iframe> zobrazujeme cudzie stránku. Pokiaľ neuvedieme hodnotu atribútu (sandbox=""), zapnú sa všetky bezpečnostné opatrenia. Opatrenia môžeme upresniť uvedením nasledujúcich hodnôt (môžeme uviesť viac hodnôt oddelených medzerou):- allow-same-origin - povolenie rovnaký pôvod stránky vloženého a vkladaného dokumentu.
  • allow-top-navigation - povolenie obsahu rámca, aby sa navigoval na stránku, v ktorej je vložený.
  • allow-forms - Povolí odosielanie formulárov.
  • allow-scripts - Povolí spúšťanie skriptov.
• seamless - Atribút je typu boolean. Ak je uvedený, je dokument v <iframe> zobrazený tak, ako by bol súčasťou hlavného dokumentu.
• src - URL adresa zobrazovaného dokumentu.
• srcdoc - Umožňuje priamo špecifikovať vložený dokument, obsahuje teda HTML kód.

Ukážka použitia

Pokiaľ si chceme uľahčiť prácu môžeme <iframe> skopírovať priamo z YouTube. Urobíme to tak, že klikneme pravým tlačidlom myši na video a potom na menu "Skopírovať kód pre vloženie na stránky". Dosiahneme podobného iframu:

<iframe width="560" height="315" src="https://www.youtube.com/embed/5-MT5zeY6CU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>

Teraz si môžeme spustiť video priamo na našich stránkach:

Pre dnešný lekcii multimédií to už bude všetko a snáď ste sa niečo nové naučili:)

V ďalšej lekcii, Formuláre v HTML II. časť , sa naučíme nové zaujímavé typy inputov. Typ bude na čas, heslo, text, reset a aj rôzne tlačidlá pre odoslanie formulára.