Multimédia - audio a video

Tag	Význam	Párový
video	obálka navzájem alternativních video souborů	ano
audio	obálka navzájem alternativních audio souborů	ano
source	možný zdroj audia, videa nebo obrázku	ne
track	další stopy, typicky titulky	ne

Video

Tag pro vkládání videa. Vyhradí ve stránce obdélníkový prostor, ve kterém se zobrazí video, které si uživatel může spustit.

Atributy tagu video
Atribut	Význam	Hodnoty
width	šířka prostoru ve stránce určeného pro video	pixely \| procenta
height	výška prostoru pro video	pixely \| procenta
src	zdroj videa, doporučuji ale používat spíše vnořený tag source	URL videa
controls	zobrazí ovládací prvky videa	bez hodnoty nebo cokoliv
autoplay	video se spustí okamžitě po načtení	bez hodnoty nebo cokoliv
poster	obrázek, který se zobrazí, než uživatel spustí přehrávání	URL obrázku
muted	video má vypnutý zvuk. Uživatel ho může zapnout.	bez hodnoty
loop	na konci se video vždy opět pustí od začátku	bez hodnoty
preload	pokyn prohlížeči, jestli má video stahovat hned při načtení stránky	auto \| none \| metadata

Jaké video se bude přehrávat, se určuje následujícím tagem source. V praxi se vnořených tagů source zadává více. Video se použije z prvního source, které prohlížeč podporuje. Podle mých pokusů nepodporu zjistí prohlížeč jednak podle atributů media a type u tagu source, jednak načtením začátku videa. Pokud zjistí, že video neumí přehrát, i když type sedí, bere to jako nepodporu a jde na další source. Kdyby se stalo, že prohlížeč nepodporuje tag <video> vůbec (nějaké staré prohlížeče), zobrazí alternativní obsah. Alternativní obsah se nezobrazí, pokud pouze nesedí typy nebo podpora formátů. Může se tedy stát, že nebude nic hrát, i když máte v alternativním obsahu funkční alternativu.

Příklad:

<video width="400" height="300" poster="kocicka.jpg" controls > <source src="kocicka.mov" type="video/mp4"> <source src="kocicka.ogv" type="video/ogg"> Obsah pro prohlížeče nepodporující tag video. </video>

Příklad zobrazí video v rozměrech 400x300 s ovládáním. Pokud by prohlížeč neuměl zpracovávat první video/mp4, tak sáhne po druhém zdroji, který má uveden u video/ogg.

Width a height

Šířka a výška. Do obdélníku vymezeného šířkou a výškou se video zvětší nebo zmenší tak, aby při zachování poměru své výšky a šířky vyplnilo co největší část obdélníku. Na rozdíl od stejných atributů width a height u obrázku se video nebude podle těchto rozměrů deformovat. Jestliže se jeden z rozměrů neuvede (což se občas dělá u responzivního designu), dopočítá se druhý rozměr tak, aby video mělo zachovaný poměr stran.

V praxi může být lepší k zadání rozměrů videa používat CSS styly. Toužíte-li po detailní kontrole toho, jak přesně se video zvětší nebo zmenší, bude se kromě width a height hodit CSS vlastnost object-fit.

Src

Atribut src funguje jako informace, z jaké adresy se má načíst obsah videa. Tento atribut je poněkud duplicitní s tagem <source>. Src používejte jen v případě, kdy jste si zcela jisti, že soubor půjde přehrát.

Autoplay

V případě použití atributu autoplay se video spustí ihned po načtení stránky (přesněji po načtení videa). Když se autoplay neuvede, video poslušně čeká, až si ho uživatel pustí.

Controls

Zobrazí uživateli proužek s ovládáním. Každý prohlížeč může zobrazovat ovládání po svém, ale typicky je to minimálně tlačítko spustit/stop, možnost roztažení na celou obrazovku, úprava hlasitosti a ukazatel progresu.

V některých prohlížečích může poloprůhledný proužek s ovládáním překrýt spodní část videa. Aby bylo vidět, co je pod proužkem, je nutno nastavit videu větší výšku atributem height, než odpovídá skutečné výšce videa.

Podle mých pozorování nejde video, které nemá controls, nijak snadno uživatelsky pustit. V praxi je tedy video bez controls určeno zejména pro videa s atributem autoplay, i když si uživatel může nad videem kliknout pravým tlačítkem a ovládání zapnout nebo vypnout. To ale málokdo ví.

Poster

Atribut poster umožňuje nastavit obrázek, který se bude ukazovat předtím, než uživatel spustí video. Hodnotou je klasicky adresa obrázku, absolutní nebo relativní. Pokud se poster nenastaví, prohlížeče se chovají různě. Desktopové prohlížeče zobrazují první snímek videa, ale až potom, co načte aspoň začátek videa. To může trvat. Mobilní prohlížeče bez posteru zobrazují jenom šedivý obdélník se symbolem videa, metadata s prvním snímkem (která používají desktopové prohlížeče) si nenačítají.

Prohlížeče přes poster můžou a nemusí zobrazit symbol videa (černý trojúhelník v bílém kruhu). Firefox mi to zobrazil, ostatní prohlížeče ne.

Preload

Dojem autora stránky o tom, kdy a jak by se mělo video začít načítat. Prohlížeče prý atribut preload často ignorují a mají k tomu důvody. Atribut preload je také samozřejmě ignorován vždy, pokud je nastaveno autoplay. Internet Explorer prelovad vůbec nezná, chová se vždy jako preload="auto". Mobilní prohlížeče se zase snaží minimalizovat přenos dat, takže jako výchozí stav mají preload="none".

tag video, atribut preload
preload=	význam
auto	Prohlížeč si obvykle po načtení stránky načte metadata videa a jeho začátek. Záleží ale na prohlížeči a zařízení. Například mobilní prohlížeče načtou jenom metadata nebo nic.
none	Prohlížeč by neměl video sám od sebe načítat a měl by počkat, až uživatel sám video spustí. Vhodné zejména na stránkách s mnoha videi. Pokud se nezadá poster, videa s preload="none" nezobrazí ani jeden snímek, takže můžou být pro uživatele neatraktivními šedými obdélníky.
metadata	Prohlížeč by měl stáhnout jenom metadata videa. To znamená formát, šířku výšku, informaci o stopách a první snímek. Metadata jsou nutná k rozhodnutí, jestli prohlížeč bude umět video přehrát, a tak případně načíst jiný zdroj.

Ještě vysvětlím, proč jsou důležitá ta metadata: z nich prohlížeč pozná, jestli video bude umět přehrát. Kdyby neuměl, může se posunout k dalšímu případnému zdroji (tag source). Pokud toto všechno začne dělat až ve chvíli, kdy uživatel dá pokyn k přehrávání, může na začátku to přehrávání docela trvat. Z metadat se také určí první snímek videa, který se zobrazí uživateli před puštěním (na desktopovém prohlížeči a samozřejmě jen, pokud se nezadá jiný obrázkový poster).

Kromě tagu <video> lze video soubor přehrávat i pomocí starších tagů <object> nebo <embed>. Ty ale nedovolují takovou míru přizpůsobení pro cílový prohlížeč, proto doporučuji používat <video>.

Další zásadní informace k videu jsou níže u tagu <source>

Audio

Tag pro vkládání audia, tedy zvukového souboru. Tag audio zobrazí ve stránce malý obdélníkový prostor, ve kterém se zobrazí ovládací prvky zvukového souboru, který si uživatel může přehrát, zastavit apod.

Atributy tagu audio
Atribut	Význam	Hodnoty
src	zdroj zvuku, doporučuji ale používat spíše vnořený tag source	URL audia
controls	zobrazí ovládací prvky audia	bez hodnoty nebo cokoliv
autoplay	audio se spustí okamžitě po načtení stránky	bez hodnoty nebo cokoliv
muted	audio má ztlumený zvuk. Uživatel ho může zapnout.	bez hodnoty
loop	na konci se audio vždy opět pustí od začátku	bez hodnoty
preload	pokyn prohlížeči, jestli má audio stahovat hned při načtení stránky	auto \| none \| metadata

Jaké audio se bude přehrávat, se určí následujícím tagem source. Tagů source může být i víc, aby si z nich prohlížeče mohly vybrat. Příklad:

<audio controls> <source src="toulky-ceskou-minulosti-091.mp3" type="audio/mpeg"> <source src="toulky-ceskou-minulosti-091.ogg" type="audio/ogg"> alternativní text pro starší prohlížeče </audio>

Většina atributů je funkčně shodná s tagem video, takže je doufám znovu popisovat nemusím.

Zvukový soubor lze kromě tagu <audio> přehrát také staršími tagy <object> a <embed> či dokonce překvapivě lze použít i tag <video>.

Source

Source znamená zdroj. Tagem source se udává, z jaké adresy či souboru se má načíst audio nebo video. Source se používá uvnitř tagů <video> a <audio> (a v budoucnu možná u <picture>). Vtip je v tom, že se tagů <source> za sebe dává víc, aby si prohlížeč mohl vybrat zdrojový soubor podle toho, co umí přehrát. Záleží přitom na pořadí: první vhodný se přehraje.

Atributy tagu source
Atribut	Význam	Hodnoty
src	video nebo audio soubor	adresa souboru
srcset	více možných souborů podle vlastností média	zápis srcset
type	mime typ zdroje	viz tabulku níže
media	omezení na šířku prohlížeče nebo druh média	CSS media query
width	šířka zdroje pro výpočet smrskávání	pixely
height	výška zdroje pro výpočet smrskávání	pixely

Příklad videa:

<video> <source src="studentka-ve-vane.ogv" type="video/ogg"> <source src="studentka-ve-vane-small.mp4" media="max-width: 400px" type="video/mp4"> <source src="studentka-ve-vane-big.mp4" type="video/mp4"> alternativa pro prohlížeče bez podpory tagu video </video>

Příklad audia:

<audio> <source src="nahravka.ogg" type="audio/ogg"> <source src="nahravka.mp3" type="audio/mpeg"> alternativa pro prastaré browsery: <a href="nahravka.mp3">stáhnout nahrávku</a> </audio>

Příklad obrázku:

<picture> <source srcset="velky-obrazek.webp" media="(min-width: 600px)" type="image/webp"> <source srcset="maly-obrazek.webp" type="image/webp"> alternativa: <img src="nahradni-obrazek.jpg"> </picture>

Atribut type

Atribut type by měl udávat mime typ souboru. Například pro videa by měl začínat řetězcem video/ a následovat podrobný popis mime typu. Prohlížeč podle atributu type dělá část rozhodnutí, který source použije. Pokud vidí v atributu type hodnotu, kterou nezná, tak to rovnou vzdá a jde na další source. Ve skutečnosti ale pak vůbec netrvá na tom, aby soubor byl skutečně v uvedeném mime typu. Prostě je to jenom první rozhodovací filtr.

tag source, atribut type pro video
type=	význam	podpora
video/mp4 *	prohlížeč, který neumí přehrávat mp4 (tedy video H.264), to rovnou vzdá a jde na další source	všechny prohlížeče v roce 2017
video/ogg *	prohlížeč, který neumí přehrávat Theora, to vzdá a jde dál	Chrome, Firefox
video/webm *	prohlížeč, který neumí přehrávat VP8, to vzdá a jde dál	Chrome, Firefox

Hvězdičku * za uvedenými hodnotami uvádím, protože jsem si všimnul, že někteří autoři za mime typ zapisují ještě podtyp kodeku. Prohlížeče by to měly zvládat (netestováno). Pokud ale zapíšete type="video/nesmysl", je jasné, že to prohlížeč vzdá a půjde dál. Jestliže se type nezadá vůbec, prohlížeč prostě zkusí video načíst a testuje, jestli rozumí formátu souboru.

Nepodporovaný atribut type není jediný důvod, proč prohlížeč může vzdát přehrávání nějakého source a přechod k dalšímu uvedenému source. Tím druhým možným důvodem je, že zjistí, že video ve skutečnosti neumí přehrát, protože je ve skutečnosti v nějakém jiném typu nebo subtypu. V takovém případě se pokusí o stažení dalšího source.

Jestliže prohlížeč nedokáže přehrát žádný uvedený source (ať už kvůli nepodporovanému atributu type nebo kvůli skutečnému kódování souboru), zobrazí se nakonec šedý obdélník bez načteného videa nebo audia. Aby uživatel dostal video, je důležité zkonvertovat ho do různých formátů a dát jich na web víc.

tag source, atribut type pro audio
type=	význam	podpora
audio/mpeg	prohlížeč, který neumí přehrávat mpeg (tedy audio mp3), to rovnou vzdá a jde na další source	všechny prohlížeče v roce 2017
audio/ogg	prohlížeč, který neumí přehrávat ogg audio, to vzdá a jde na další source	Chrome, Firefox
audio/další formáty	je jich víc a přibývají, nestíhám sledovat, např. aac, wav, ogg, av1

Source, atribut media

Media bych používal v případě, že bych různým zařízením chtěl posílat různá videa. Smysl to má v případě mobilů, kterým by mělo stačit video v menším rozlišení. Media dovoluje vybírat z různých souborů s různým rozlišením. Jako podmínka se uvádějí klasická media queries. Příklad už jsem naznačil výše, ještě jednou:

V tomto případě by jako media query bylo lepší použít něco, co kontroluje zároveň šířku a zároveň orientaci (ideální by bylo mít media query pro delší rozměr prohlížeče, ale nevím, že by něco takového existovalo).

Source, atributy width a height

Pokud je teoreticky možné, že se bude zdroj pro různá zařízení zmenšovat nebo zvětšovat, je vhodné uvést do atributů width a height skutečné velikosti zdroje v pixelech. Z nich si prohlížeč dokáže spočítat poměr stran (aspect ratio) a správně upravovat zobrazenou výšku a šířku ještě před stažením zdroje.

Track

Track slouží pro vložení titulků do videa.

Obecněji vzato se má track používat na přidání alternativních stop do videa (teoreticky i do audia). Funguje podobně jako <source>, ale častěji než na alternativní video se používá právě na titulky. Uživatel si může zvolit, že chce daný track zapnout, případně i v jakém jazyce. Podpora pro titulky ve formátu WebVTT je výborná (2017). Podpora pro alternativní video je špatná, protože to neumí Webkit (Chrome apod.).

Atributy tagu track
Atribut	Význam	Hodnoty
src	soubor s alternativním obsahem, typicky titulky	adresa souboru
kind	druh obsahu	subtitles captions descriptions chapters
label	srozumitelné označení obsahu pro uživatele	text
srclang	jazyk obsahu	platný kód jazyka podle BCP 47
default	označuje předem zvolenou a zapnutou stopu	bez hodnoty

Příklad videa s přidanými titulky:

Formát WebVTT, který je jediným podporovaným formátem titulků, se na první pohled docela podobá běžnému titulkovému formátu .srt, ale má několik odlišností. Například musí být kódován v UTF-8.

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně