video - Český HTML 5 manuál

HTML a CSS Manuál Multimédia video - Český HTML 5 manuál

HTML5 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 HTML5 přizpůsobilo a nabízí tagy pro přehrávání zvuků a videí.

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í HTML5, která začala masově z trhu vytlačovat Flash. Ale už zpět k videu HTML5.

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

Atributy

Element má následující atributy:

  • autoplay - Atribut je typu boolean. Pokud je uveden, spustí se video automaticky, ihned po načtení. Pokud ne, musím na video kliknout pravým tlačítkem 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šeni,.
  • height - Nastavení výšky přehrávače.
  • loop - Atribut je typu boolean. Pokud je uveden, je zvuková stopa přehrávána s opakováním stále dokola.
  • muted - Atribut je typu boolean. Pokud je uveden, je zvuk vypnutý.
  • poster - URL obrázku, který se zobrazí na pozadí přehrávače, dokud uživatel video nespustí.
  • preload - Umožňuje nastavit načítání média do paměti, což urychlí jeho přehrání po kliknutí, ale zpomalí načtení ztránky. 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. 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/video.mp4" width="320" height="240" controls="controls">
  Váš prohlížeč nepodporuje vkládání video souborů, soubor si
  <a href="video/video.mp4">stáhněte</a>.
</video>

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

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

Výsledek:

Ukázka HTML 5 tagu video

Kodeky videa

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

kodek/prohlížeč IE Mozzila Chrome
MP4 Ano Ne Ano
OGV Ne Ano Ano
WEBM Ne Ano Ano

WEBM je volný kodek od Google. Google si myslel že s ním prorazí svět, z části taky na to měl nárok, protože WEBM je volný a Google za něj víceméně nic nechce. No jo, ale Microsoft...

Na závěr videa lze teda říct, že aby fungovalo všude musíte mít video v minimálně dvou formátech.

Nároky na datový provoz

Možná vás napadá co se stane, když prohlížeč podporuje více formátů, ze kterých jste 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ý FUP (datový limit), tak je vhodné jako první dávat vždy ten formát s lepší kompresí.

U našeho ukázkového audia by to bylo následující: OGG < MP3 < WAV

Obvykle bývá že WMV je mnohem větší než ostatní, a proto je vhodné ho dávat na konec. MP4 (MP3) a OGV (OGG) bývají přibližně stejné.


 

Stáhnout

Staženo 367x (4.63 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML

 

  Aktivity (1)

Manuál pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Miniatura
Všechny články v sekci
Multimédia - Český HTML 5 manuál

 

 

Komentáře
Zobrazit starší komentáře (3)

Avatar
Amomym
Člen
Avatar
Amomym:

a jak se udělá to, aby když bych si chtěl dát na web video z YouTube a ukázalo se mi tam okno a abych to mohl přehrát, jak to udělat?

 
Odpovědět 22.3.2013 12:51
Avatar
matesax
Redaktor
Avatar
Odpovídá na Amomym
matesax:

Embed link dává Youtube standardně... (U každého videa.)

 
Odpovědět  +1 22.3.2013 13:15
Avatar
Radim
Člen
Avatar
Radim:

Element audio a asi i video mají vlastnost duration, která ti ukazuje dobu obsahu v secundách.
Takže budeš mít třeba <video id="prehravac"> a v javascriptu si pristoupíš k celkovému času
var prehravac = document.getE­lementById("preh­ravac");
alert(prehravac­.duration);
doba už odehrána prehravac.curren­tTime
pokud budeš chtít zvlášť minuty a secundy, tak secundy dostaneš, že si prehravac.duration podělíš modulo 60
a minuty tak, že duration podělíš 60 a pak modulo 60.
Samozřejmě se zaokrouhlením. Možná je jiný způsob ale mě to takhle fungovalo.

 
Odpovědět  +1 17.6.2013 13:03
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Zdeněk Pavlátka:

K tagu <video> se moc nehodí to porovnání formátů zvuku u nároků na datový provoz.

Odpovědět 3.10.2013 21:34
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
charlesvohlidka:

když na svůj web vložím tento kod: <iframe width="640" height="360" src="//www.youtube-nocookie.com/em­bed/M0y2z4Qbdic?lis­t=PLdb1pJ03OyL0fWwh8REP­xrFBHGLsYPlp6" frameborder="0" allowfullscre­en></iframe>

tak se mi tam to video ani neukáže a je tam prázdno jenom bílo ale když tak vložím tento

<iframe width="480" height="390" style="display: block; margin-left: auto; margin-right: auto;" src="http://w­ww.youtube.com/em­bed/WbDkUt_aC1c" frameborder="0" allowfullscre­en=""></iframe>

tak vše funguje nevíte kde je problém ?

 
Odpovědět 17.5.2014 22:46
Avatar
Odpovídá na charlesvohlidka
charlesvohlidka:

Problém jsem vyřešil :)

iframe width="600" height="335" src="http://www.youtube.com/embed/5b8JYeApQBU" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
 
Odpovědět 18.5.2014 2:36
Avatar
Patrik Neumann:

Ahoj, mám problém s videem, když ho pomocí tohoto kódu vložím na stránku, tak se neukáže video, a když přidám obrázek, je vidět pouze ten obrázek, musí to mít nějakou určitou příponu (.wmv, .avi, apod.) nebo to je něčím jiným? Předem děkuji za odpověď

Odpovědět 29.11.2014 20:28
Nic není nemožné, proto se snažím dál.
Avatar
Odpovídá na Patrik Neumann
Michal Žůrek (misaz):

samozřejmě to video musí být ve formátu, který daný prohlížeč podporuje.

Odpovědět 29.11.2014 20:32
Nesnáším {}, proto se jim vyhýbám.
Avatar
Odpovědět 29.11.2014 20:34
Nic není nemožné, proto se snažím dál.
Avatar
Odpovídá na Patrik Neumann
Michal Žůrek (misaz):

v článku je na to přece tabulka.

Odpovědět 29.11.2014 20:58
Nesnáším {}, proto se jim vyhýbám.
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 10 zpráv z 13. Zobrazit vše