HTML5 video

HTML5 video je nový HTML prvek zahrnutý ve specifikaci návrhu HTML5. Slouží k přehrávání videa či filmů.

Ve své funkci částečně nahradí prvek object. Až dosud bylo nutné mít k přehrávání videí na internetu nainstalovaný zásuvný modul. To se má nyní ale změnit. Videa a filmy na webu by měly přehrávat samotné prohlížeče.

Příklad

Následující úryvek HTML5 kódu vloží do webové stránky přehrávat videa ve formátu WebM s odkazem na stažení souboru pro starší prohlížeče.

<video src="video.webm" controls>
 <p>Video si lze <a href="video.webm">stáhnout</a>.</p>
</video>

Struktura

Prvek video je párový, má tedy koncovou značku. Vše, co je uvnitř tohoto prvku, až na tag <source>, je považováno za alternativní obsah pro prohlížeče, které prvek video nepodporují. Tam se tedy ukáže jen text a odkaz na stažení videa, obsah prvku video. Tento prvek má následující atributy:

src - URL souboru videa, např. video.webm nebo http://www.example.cz/video.webm
width - šířka videa, stejně jako u obrázků
height - výška videa, stejně jako u obrázků
poster - URL náhledu videa, který se zobrazí, dokud video není spuštěné; v případě, pokud se náhled neuvede, prohlížeč zobrazí první snímek videa, např. nahled.png nebo http://www.example.cz/nahled.png
controls - pokud se uvede, prohlížeč zobrazí kontrolní prvky k ovládání videa
autoplay - pokud se uvede, video se začne přehrávat ihned po načtení
loop - pokud se uvede, video se bude přehrávat stále dokola
type - MIME typ souboru videa, např. video/webm

Již zmíněný prvek <source> slouží k uvedení alternativních formátů videa. Pokud prohlížeč nedokáže přehrát první, jednoduše zkusí přehrát druhý. Příklad:

<video width="300" height="300" poster="nahled.png" controls>
 <source src="video.webm" type="video/webm" />
 <source src="video.ogv" type="video/ogg" />
 <p>Video si můžete <a href="video.ogv">stáhnout</a>.</p>
</video>

Pokud je více alternativních zdrojů videa, URL souboru videa se neuvádí přímo v prvku video, nýbrž v elementu source. Ten má povinné vlastnosti src a type, stejné jako u elementu video.

Podporované video formáty

Podpora video formátů v prohlížečích pro prvek video se hodně liší; formát totiž žádná specifikace nezahrnuje a je jen na výrobcích prohlížečů a tvůrcích webových stránek, jaký formát si zvolí.

V prohlížečích zatím nejpodporovanější formát je Ogg Theora (video/ogg, *.ogv), který podporuje Firefox, Opera a Google Chrome. Další známý formát je H.264 (video/mp4, *.mp4), který podporuje Internet Explorer 9, Safari a Google Chrome. Google taktéž vyvinul nový formát pro prezentaci hudby a videí na internetu, WebM (video/webm, audio/webm; *.webm), jehož základem je Matroska - VP8 pro video a Vorbis pro audio. Ten má být brzo podporován ve všech hlavních prohlížečích.

Externí odkazy

(anglicky) HTML5 - video prvek, W3C
(anglicky) Úvod do HTML5 videa, Opera
(anglicky) WebM Project