HTML/Vkládání audia a videa

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>

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

Atributy

src

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>

Rozměry

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>

poster

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>

controls

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>

autoplay

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>

loop

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

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

type

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>

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

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

Externí odkazy

• Encyklopedický článek HTML5 video ve Wikipedii