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>
editovatAudio 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
editovatsrc
editovatAtribut 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
editovatAtributy 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
editovatPokud 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
editovatAby 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
editovatAtribut 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
editovatTaké atribut bez hodnoty. Způsobuje přehrávání ve smyčce.
<audio src="backgroundova_hudba.ogg" autoplay loop></audio>
type
editovatAtribut 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>
editovatJiž 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
editovatIE 9 | Firefox | Opera | Google chrome | |
---|---|---|---|---|
Ogg Theora (video/ogg, *.ogv) | X | X | X | |
H.264 (video/mp4, *.mp4) | X | X |
Externí odkazy
editovat- Encyklopedický článek HTML5 video ve Wikipedii