Lekce 11 - Multimédia v HTML II. část

V minulé lekci, Multimédia v HTML 5, jsme si ukázali tagy k tvorbě multimédií, mezi které patří <img>, <map>, <area>, <canvas> a další.

HTML 5 mění smysl jazyka HTML jako takového. Web se totiž časem mění a stále častěji obsahuje multimediálně bohatý obsah. Tomu se HTML 5 přizpůsobilo a nabízí tagy pro přehrávání zvuků a videí. Bohužel celé toto téma není tak jednoduché kvůli tzv. kodekům.

<audio>

Tag <audio> je párový a slouží k vložení zvukové stopy do HTML dokumentu. Je podporován všemi moderními prohlížeči a ve starších prohlížečích se zobrazí alternativní text, uvedený mezi tagy <audio> a </audio>.

Atributy

Elementu můžeme přiřadit následující atributy:

• autoplay - Atribut je typu boolean, tzn. že stačí uvést autoplay bez hodnoty. Pokud je uveden, spustí se zvuk automaticky (ihned po načtení).
• controls - Atribut je typu boolean. Pokud je uveden, zobrazí se přehrávač s ovládacími prvky. Pokud ne, není element vůbec zobrazen.
• loop - Atribut je taktéž typu boolean. Pokud je uveden, je zvuková stopa přehrávána s opakováním stále dokola.
• preload - Umožňuje nastavit načítání média do paměti, což urychlí jeho přehrání po kliknutí, ale zpomalí načtení stránky:
  • Při hodnotě auto se po načtení stránky načte do paměti celý audio soubor.
  • Při hodnotě metadata se načte pouze hlavička.
  • A při hodnotě none se soubor do paměti nenačte.
• src - Specifikuje umístění zvukového souboru. Soubor můžeme vložit přímo, pomocí atributu src nebo pomocí tagu <source>, který si ukážeme níže.

Ukázka použití

Jednoduché vložení audio souboru do HTML stránky by mohlo vypadat 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ýsledek:

Zdroj média můžeme také vložit pomocí tagu <source>, tímto způsobem lze specifikovat několik zdrojových souborů a prohlížeč si vybere ten, který se mu zrovna hodí.

Kodeky audia

Pro úplnost si uvedeme podporu formátů pro audio:

Kodek	IE	Edge	Firefox	Chrome	Safari	Opera Mini	Opera
MP3	Ano	Ano	Ano	Ano	Ano	Ne	Ano
OGG	Ne	Ano	Ano	Ano	Ne	Ne	Ano
WAV	Ne	Ano	Ano	Ano	Ano	Ne	Ano

Nároky na datový provoz

Možná vás napadá co se stane, když prohlížeč podporuje více formátů, ze kterých jsme mu dali na výběr. Je to jednoduché, prohlížeč si vybere ten první, který bude fungovat.

Vzhledem k tomu, že mobilní operátoři mají celkem nízký datový limit, tak je vhodné jako první dávat vždy ten formát s vyšší kompresí. U našeho ukázkového audia by to bylo následující: OGG < MP3 < WAV

WAV je mnohem větší než ostatní, a proto je vhodné ho dávat na konec.

<source>

Tag <source> představuje zdroj média pro tagy <audio> a <video>. Do těchto tagů se tedy vkládá a umožňuje specifikovat několik zdrojových souborů, přičemž si prohlížeč vybere ten, který dokáže přehrát.

Pro audio se obvykle používají formáty OGG a MP3, pro video MP4 a OGV (OGG). Pro video se využívá kodeků Ogg Theora, H.264 a VP8. Právě u videa nejčastěji použijeme tag <source>, protože každý prohlížeč podporuje jiné kodeky.

Atributy

Element má následující atributy:

• media - Specifikuje typ zařízení, pro které je médium určeno. Například media="(min-width:650px)" se bude zobrazovat pouze pro displeje větší než 650px. Můžeme pro mobilní zařízení tak určit soubor, který bude například zkrácený či méně kvalitní.
• src - Udává zdrojový soubor média.
• type - MIME typ média. Nejčastěji audio/ogg a audio/mpeg.

Ukázka použití

Vložení zvukového souboru do HTML stránky pomocí tagu <source> by mohlo vypadat např. takto:

<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ální stránce je výsledek stejný:

V minulosti se video do webů dávalo pomocí Flashe. Dnes se však dává přes nové funkce HTML 5. Video byla jedna z prvních funkcí HTML 5, která začala masově z trhu vytlačovat Flash.

<video>

Tag <video> je párový a slouží k vložení videa do HTML dokumentu. Je taktéž podporován všemi moderními prohlížeči a ve starších prohlížečích se zobrazí alternativní text, který je uvedený mezi tagy <video> a </video>, jak je tomu u tagu <audio>.

Atributy

Element má následující atributy:

• autoplay - Atribut typu boolean. Pokud je uveden, spustí se video automaticky, ihned po načtení stejně jako audio. Pokud ne, musíme na video kliknout pravým tlačítkem na video a zvolit Přehrát (pokud nemáme zapnuté controls, viz. dále).
• controls - Atribut je typu boolean. Pokud je uveden, zobrazí se přehrávač s ovládacími prvky. Pokud ne, zobrazí se pouze samotné video a jediná možnost ovládání je přes kontextové menu, což není šťastné řešení (kliknutí pravým tlačítkem na video).
• height - Nastavení výšky přehrávače.
• loop - Atribut je typu boolean. Pokud je uveden, je video přehráváno s opakováním stále dokola.
• muted - Atribut je taktéž typu boolean. Pokud je uveden, je zvuk automaticky při přehrávání vypnutý.
• poster - URL obrázku, který se zobrazí na pozadí přehrávače, dokud uživatel video nespustí (tzv. thumbnail).
• preload - Umožňuje nastavit načítání média do paměti, což urychlí jeho přehrání po kliknutí, ale zpomalí načtení stránky. Stejně jako u tagu <audio>:
  • Při hodnotě auto se po načtení stránky načte do paměti celý video soubor.
  • Při hodnotě metadata se načte pouze hlavička.
  • A při hodnotě none se soubor do paměti nenačte.
• src - Specifikuje umístění zvukového souboru. Soubor můžeme vložit přímo, pomocí atributu src nebo pomocí elementu <source>.
• width - Nastavení šířky přehrávače.

Ukázka použití

Jednoduché vložení video souboru do HTML stránky by mohlo vypadat 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>

Jako výsledek 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ánce si všimněte také vlastních rozměrů:

Kodeky videa

Pro úplnost zde přidám seznam kodeků a prohlížečů, které se navzájem podporují:

Kodek	IE	Edge	Firefox	Chrome	Safari	Opera Mini	Opera
MP4	Ano	Ano	Ano	Ano	Ano	Ne	Ano
OGV	Ano	Ano	Ano	Ano	Ne	Ne	Ano
WebM	Ne	Ano	Ano	Ano	Ano*	Ne	Ano**

^* Pouze částečná podpora

^** Pro mobilní prohlížeč Opera je pouze částečná podpora.

Nároky na datový provoz

Zde platí stejný princip jako u více zdrojů audia. Prohlížeč si vybere první, který dokáže přehrát. Jako první dávat vždy formát s lepší kompresí, abychom taktéž nevyčerpali uživateli datový tarif (a to mnohem více, než u zvuku).

U našeho ukázkového videa by to bylo následující: OGV < MP4 < WebM

<track>

Tag <track> slouží k vložení textové stopy. Používá se k vložení titulků a dalších textových popisků k elementům video a teoreticky i audio. Jeho jediným formátem je WebVTT (.vtt), který se podobá často používaným titulkovým formátem .srt. Jeden z mála rozdílů je ten, že musí být kódován v UTF-8.

Atributy

Má následující atributy:

• default - Atribut je typu boolean. Pokud je uveden a uživatel nepreferuje určitý jazyk, je brána daná textová stopa jako výchozí.
• kind - Specifikuje druh popisků. Můžeme nastavit:
  • captions - Popis dialogů a zvuků ve videu pro neslyšící
  • chapters - Popisky kapitol pro lepší navigaci ve videu
  • descriptions - Textový popis videa
  • metadata - Popis videa pro skripty, uživatelé ho nevidí
  • subtitles - Titulky.
• label - Popisek textové stopy.
• srclang - Specifikuje jazyk titulků (pokud je kind="subtitles").
• src - Cesta ke zdroji titulků či videa, jak už atribut známe z minulých tagů.

Ukázka použití

Ukázka vložení dvou druhů titulků 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 nepatří přímo do sekce multimédií, nicméně se pomocí tohoto elementu můžeme odkázat například na YouTube video. To nám značně usnadní práci a máme k dispozici obrovskou škálu videí. Jedná se o řádkový tag, odtud název iframe (= inline frame, řádkový rámec).

Element je párový a obaluje alternativní obsah, který se zobrazí prohlížečům, které nepodporují rámce.

Atributy

Elementu můžeme uvést následující atributy:

• height - Udává výšku rámu v pixelech.
• width - Udává šířku rámu v pixelech.
• name - Udává název rámu. Pokud na stránce s rámem uvedeme odkaz, můžeme mu nastavit atribut target na jméno rámce a odkaz se poté otevře v daném tagu <iframe>.
• sandbox - Umožňuje zakázat některé akce na stránce v <iframe> z hlediska bezpečnosti. To se hodí zejména tehdy, když v <iframe> zobrazujeme cizí stránku. Pokud neuvedeme hodnotu atributu (sandbox=""), zapnou se všechna bezpečnostní opatření. Opatření můžeme upřesnit uvedením následujících hodnot (můžeme uvést více hodnot oddělených mezerou):
  • allow-same-origin - Povolí stejný původ stránky vloženého a vkládaného dokumentu.
  • allow-top-navigation - Povolí obsahu rámce, aby se navigoval na stránku, ve které je vložen.
  • allow-forms - Povolí odesílaní formulářů.
  • allow-scripts - Povolí spouštění skriptů.
• seamless - Atribut je typu boolean. Pokud je uveden, je dokument v <iframe> zobrazen tak, jako by byl součástí hlavního dokumentu.
• src - URL adresa zobrazovaného dokumentu.
• srcdoc - Umožňuje přímo specifikovat vložený dokument, obsahuje tedy HTML kód.

Ukázka použití

Pokud si chceme usnadnit práci můžeme <iframe> zkopírovat přímo z YouTube. Uděláme to tak, že klikneme pravým tlačítkem myši na video a poté na menu "Zkopírovat kód pro vložení na stránky". Dosáhneme 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>

Nyní si můžeme spustit video přímo na naších stránkách:

Pro dnešní lekci multimédií to už bude vše a snad jste se něco nového naučili

V následujícím kvízu, Kvíz - Textové tagy a multimédia v HTML5, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.