Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 30% výuky zdarma!
Discount week - Prosinec

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:

Jednoduché audio
localhost

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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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ý:

Tag source
localhost

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:

Tag video
localhost

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ů:

Tag video 2
localhost

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:

iframe
index.html

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

V další lekci, Formuláře v HTML, si ukážeme tagy k tvorbě formulářů, mezi které patří určitě tag <form> a v něm <label> a <input>, u kterého máme několik typů.


 

Předchozí článek
Multimédia v HTML 5
Všechny články v sekci
HTML5
Článek pro vás napsal Tomáš Muzikant
Avatar
Jak se ti líbí článek?
1 hlasů
Autor se věnuje vývoji automatizačních linek do výrobního průmyslu. Ve volném čase se věnuje JavaScriptu a vývoji webových stránek.
Aktivity (2)

 

 

Komentáře

Avatar
Marek Matloch:1. listopadu 13:21

Chtěl bych se zeptat, jak to mám udělat, když si do hlavní stránky (indexu) nahraji hudbu a chci aby hrála po celou dobu i při listování podstránek? Jde to vůbec? Děkuji.

 
Odpovědět
1. listopadu 13:21
Avatar
Jan Poláček
Redaktor
Avatar
Odpovídá na Marek Matloch
Jan Poláček:1. listopadu 14:12

Ahoj, jde to, ale musel bys udělat stránky, které budou obsah načítat například přes AJAX, aby se nenačítala celá stránka, jinak by po načtení začala hrát hudba znovu od začátku a nehrála by po kliknutí do doby, než se načte nová stránka.

Odpovědět
1. listopadu 14:12
Instrukce na adrese 0x77104f29 odkazovala na adresu paměti 0x00000014. S pamětí nelze provést operaci: written.
Avatar
Marek Matloch:1. listopadu 14:18

Zacnu googlit co je Ajax :-S ... Kazdopadne dik za odpoved!

 
Odpovědět
1. listopadu 14:18
Avatar
Jan Poláček
Redaktor
Avatar
Odpovídá na Marek Matloch
Jan Poláček:1. listopadu 14:50

Pokud to je jednoduchý web, měl by sis vystačit třeba s jQuery, kde bys měl akci na click, na začátku bys bloknul standartní akci přes preventDefault() a poté právě načetl GETem správnou stránku do nějakého připraveného divu, tady jen rychlý náčrt, nevím tvé potřeby...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {

$(".odkaz").on("click",function(event){// pokud někdo klikne na něco co ma class odkaz, udělej, co je uvnitř
        event.preventDefault();//bloknu načtení přes http
        let stranka = $(this).attr('href');//zjistím obsah href v odkazu
        $("#obsah").load(stranka);//načtu danou stránku a vložím ji do id="obsah"
})

})
</script>

<a href='str1.html' class="odkaz">Str1</a><br/>
<a href='str2.html' class="odkaz">Str2</a>

<div id="obsah"></div>
Editováno 1. listopadu 14:52
Odpovědět
1. listopadu 14:50
Instrukce na adrese 0x77104f29 odkazovala na adresu paměti 0x00000014. S pamětí nelze provést operaci: written.
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na Jan Poláček
Marek Matloch:1. listopadu 14:57

K tomu teprv budu muset "dospět". Díky moc za snahu každopádně!

 
Odpovědět
1. listopadu 14:57
Avatar
Miroslav Holubek
Super redaktor
Avatar
Miroslav Holubek:18. listopadu 20:27

ak by som vkladal video, čo nechcem aby používateľ stiahol, je možné nejako zakázať download toho videa?

 
Odpovědět
18. listopadu 20:27
Avatar
Tomáš Muzikant
Super redaktor
Avatar
Tomáš Muzikant:19. listopadu 7:58

Ano do jisté míry to možné je. Nicméně většina metod je založená na JS, který se dá v prohlížeči vypnout. Jsou zde i jiné metody, které se dají také obejít například <video> vložíš do elementu <canvas>, poté se video bude tvářit jako <img>, uživateli se stáhne tedy obrázek. Pomocí JavaScriptu např. tohoto kódu:

$(document).ready(function(){
   $('#videoElementID').bind('contextmenu',function() { return false; });
});
Odpovědět
19. listopadu 7:58
Jaký si to uděláš
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 7 zpráv z 7.