Přeskočit na obsah

HTML/Vkládání audia a videa

Z Wikiknih

Pro přehrání audio nebo video souborů musel mít dosud uživatel nainstalovaný zásuvný modul, který mu jeho přehrání umožnil nebo se musel použít flashový přehrávač. S příchodem HTML5 je teď možné přehrávat audio nebo video soubory a ovládat jejich přehrávání přímo v prohlížeči.

Tag <audio> nebo <video>

[editovat | editovat zdroj]

Audio nebo video přehrávači příslušný tag.

Při použití různých atributů může kód pro přehrávání vaší oblíbené písničky vypadat takto:

<audio src="pisnicka.ogg" controls></audio>

a přehrávač pro spuštění traileru k filmu může vypadat i takto:

<video src="trailer.ogv" controls poster="film.png" width="320" height="240"></video>

Jak jste si jistě všimli, tagy audio i video jsou párové tagy. Mezi ně se vkládá obsah, který se má zobrazit uživateli, jehož prohlížeč HTML5 nepodporuje nebo tag source, který určuje alternativní zdroje pro přehrávání (viz níže).

Atribut src stejně jako u jiných tagů představuje cestu (absolutní i relativní) k audio/video souboru pro přehrání.

<audio src="pisnicka.ogg"></audio>

Atributy width a height určují v pixelech nebo procentech šířku nebo výšku přehrávače.

<video src="trailer.ogv" width="320" height="240"></video>

Pokud se video nespouští okamžitě po načtení stránky, zobrazí se v přehrávači náhled videosouboru. Atributem poster můžete ovlivnit, jaký náhled se uživateli zobrazí. Hodnotou je URL k náhledovému obrázku.

<video src="trailer.ogv" poster="film.png" width="320" height="240"></video>

Aby mohl uživatel ovládat přehrávání audia/videa (nebo aby si ho mohl vůbec pustit), potřebuje kontrolní prvky. Ty mu ale přehrávač neposkytne hned, atributem controls můžete určit, zda se uživateli ovládací prvky zobrazí nebo ne. Tento atribut se používá bez hodnoty.

<video src="trailer.ogv" controls width="320" height="240"></video>

Atribut autoplay se používá stejně jako předchozí controls. Způsobuje to, že se audio/video soubor stpustí po načtení stránky.

<video src="uvitani.ogv" autoplay width="320" height="240"></video>

Také atribut bez hodnoty. Způsobuje přehrávání ve smyčce.

<audio src="backgroundova_hudba.ogg" autoplay loop></audio>

Atribut type je čistě informativního charakteru, který dává prohlížeči informaci o tom, v jakém formátu je cílový soubor. Typ souboru se zapisuje standartem MIME. Používá se hlavně v tazích source.

<video src="trailer.ogv" controls width="320" height="240" type="video/ogg"></video>

Tag <source>

[editovat | editovat zdroj]

Již zmíněný tag <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ý.

<video controls width="320" height="240">
 <source src="trailer.webm" type="video/webm">
 <source src="trailer.ogv" type="video/ogg">
</video>

Podporované formáty

[editovat | editovat zdroj]
IE 9 Firefox Opera Google chrome
Ogg Theora (video/ogg, *.ogv) X X X
H.264 (video/mp4, *.mp4) X X

Externí odkazy

[editovat | editovat zdroj]