Mediální element

<video>

Video. Přehrávač přímo ve stránce, bez YouTube a bez pluginů.

V náhledu vidíte, kam se dostaneme. Skrolujte dolů a postavíme to krok za krokem.

Zápis

Video s ovládáním

video je párový tag. src ukazuje na soubor a controls přidá ovládání: přehrát, hlasitost, celá obrazovka.

Bez controls by video nešlo spustit. Zkuste ho v náhledu přehrát.

Atributy

Náhled a rozměry

poster je obrázek, který se ukáže před spuštěním. width a height vyhradí místo jako u obrázku. preload="metadata" stáhne jen délku a rozměry, ne celé video.

Bez poster prohlížeč ukáže první snímek, a ten bývá černý.

Formáty

Víc souborů na výběr

Místo src můžeme nabídnout víc formátů v prvcích source. Prohlížeč použije první, který umí přehrát. Text na konci uvidí jen ten, kdo neumí žádný.

mp4 přehraje skoro všechno. webm bývá menší. Když chcete jen jeden soubor, vezměte mp4.

Přístupnost

Titulky

track připojí titulky ze souboru .vtt. Pomůžou neslyšícím i každému, kdo se dívá ve vlaku bez sluchátek.

Soubor .vtt je obyčejný text: čas od, čas do a věta, která se v tu chvíli ukáže. default titulky rovnou zapne.

Atributy

Video na pozadí

Pro tiché smyčky na pozadí hero sekce existují autoplay, muted, loop a playsinline.

Prohlížeče samy spustí jen ztlumené video. playsinline zabrání tomu, aby iPhone video otevřel přes celou obrazovku.

Styl

Video, které se vejde

Video se chová jako obrázek: width z HTML by na úzkém displeji přetekl. Stejné pravidlo to spraví.

Styl

Video a popis vedle sebe

Typická stránka s lekcí: video vlevo, nadpis a popis vpravo. Grid dá videu víc místa než textu.

Responzivita

Na telefonu text pod videem

Vedle sebe by na telefonu bylo video malé jako známka. Grid složíme do jednoho sloupce: video přes celou šířku, popis pod ním.

Na celou obrazovku si video na telefonu stejně každý přepne tlačítkem v ovládání.

Shrnutí

Jak vkládat video

Ano

controls, poster a rozměry
preload="metadata", ať se nestahuje zbytečně
titulky přes track
width: 100% a height: auto

Ne

automatické přehrávání se zvukem
video bez ovládání, které nejde zastavit

Další: <audio> →