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:

Kodeky videa

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

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é.