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ů.

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 Autor si myslí, že by prohlížeč 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 Autor si myslí, že by si prohlížeč 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>.

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
type mime typ zdroje viz tabulku níže
media omezení na šířku prohlížeče nebo druh média CSS media query

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>

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.

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  

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:

<video>
    <source src="studentka-ve-vane-small.mp4" media="max-width: 400px">
    <source src="studentka-ve-vane-big.mp4">
</video>

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).

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:

<video controls poster="obrazek.jpg">
    <source src="film.mp4" type="video/mp4">
    <track kind="subtitles" src="film-cse-titulky.vtt" srclang="cs" default>
    <track kind="subtitles" src="film-en-subtitles.vtt" srclang="en">
</video>

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, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

HTML tagy Abecedně Příklady HTML tahák

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.