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 WebM video.

<video src="video.webm" controls>
Video si můžete <a href="video.webm">stáhnout</a>.
</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">
Video si můžete <a href="video.ogv">stáhnout</a>.
</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.

Externí odkazy