Cookies

Na naší webové stránce používáme soubory cookies pro její správné fungování, přizpůsobení analytických dat a dynamiky obsahu pro uživatele. Více informací o cookies.

Potvrzením zároveň ukládáte souhlas se zpracováním osobních údajů v rámci nařízení GDPR.

HTML video

Videa na webu
Předchozí Následující

#1 Prvek <video>

Na každou webovou stránku lze umístit vizuální obsah pomocí prvku <video>.

<video width="320" height="180">
 <source src="video.mp4" type="video/mp4">
 Váš prohlížeč nepodporuje přehrávání.
</video>

Jak funguje

Do prvku videa se vkládá nepárový prvek <source>, kterým se odkazuje na adresu videa; do atributu src se vkládá daná adresa, atribut type dává prohlížeči informaci o jaký typ souboru se jedná.

Text vně prvku <video> slouží pro prohlížeče, které nepodporují prvek videa – zobrazí se namísto něj. Prvku <video> je také dobré předem stanovit výšku a šířku, protože pokud nejsou rozměry specifikovány, může celý prvek blikat, když se video načítá.

Podporované formáty videa naleznete v tomto článku.

#2 Atributy

Atribut controls

Po vložení atributu controls se uživateli zobrazí při přehrávání videa tlačítka na pozastavení a spuštění, ovládání hlasitosti, sdílení a podobně. Tento atribut je často editory přidáván automaticky, aby si mohli uživatelé video ovládat podle sebe.

<video width="180" height="320" controls>
 <source src="video.mp4" type="video/mp4">
 Váš prohlížeč nepodporuje přehrávání.
</video>

Automatické přehrávání

Pomocí atributu autoplay lze nastavit, aby se video po načtení samo spustilo.

Tento atribut doplňuje druhý atribut muted, který video, jenž je automaticky přehráváno ztlumí a musí si ho uživatel sám zapnout.

<video width="640" height="360" controls autoplay muted>
 <source src="video.mp4" type="video/mp4">
 Váš prohlížeč nepodporuje přehrávání.
</video>
Tip: Některé prohlížeče nepovolují automatické přehrávání, ale ztlumené automatické přehrávání ano. Pro větší podporu je tedy lepší přidávat k atributu autoplay také atribut muted.