HTML5 video

Technology
12 hours ago
8
4
2
Avatar
Author
Albert Flores

HTML5 video je HTML prvek zahrnutý ve specifikaci HTML5. Slouží k přehrávání videa či filmů.

Struktura

Prvek video je párový, má tedy koncovou značku. Vše, co je uvnitř tohoto prvku, až na prvky <source>, je považováno za alternativní obsah pro prohlížeče, které prvek video nepodporují. +more Již zmíněný prvek source pak slouží k uvedení alternativních formátů videa. Pokud prohlížeč nedokáže přehrát první, jednoduše zkusí přehrát druhý. Prvek source má povinné vlastnosti src a type, stejné jako u elementu video.

Atributy

AtributMožné hodnotyPopis
autoplayautoplayUrčí, že se má záznam ihned po načtení začít přehrávat
controlscontrolsUrčí, že má prohlížeč zobrazit ovládací tlačítka
heightvelikostSpecifikuje výšku videa
looploopSlouží k automatickému přehrávání od začátku ihned po skončení
posterURLSpecifikuje URL náhledového obrázku videa
srcURLSpecifikuje URL video souboru
typeMIME typeSpecifikuje MIME type souboru videa
widthvelikostSpecifikuje šířku videa

Podporované formáty

Podpora video formátů v prohlížečích pro prvek video se hodně liší; formát totiž žádná specifikace nezahrnuje a je jen na výrobcích prohlížečů a tvůrcích webových stránek, jaký formát si zvolí.

V prohlížečích zatím nejpodporovanější formát je Ogg Theora (video/ogg, *. ogv), který podporuje Firefox, Opera a Google Chrome. +more Další známý formát je H. 264 (video/mp4, *. mp4), který podporuje Internet Explorer 9, Safari a Google Chrome. Google taktéž vyvinul nový formát pro prezentaci hudby a videí na internetu, WebM (video/webm, audio/webm; *. webm), jehož základem je Matroska - VP8 pro video a Vorbis pro audio. Ten má být brzo podporován ve všech hlavních prohlížečích.

Příklad

Následující úryvek HTML5 kódu vloží do webové stránky přehrávač video s dalšími možnostmi pro prohlížeče nepodporující daný formát a s odkazem na stažení souboru pro starší prohlížeče.

Video si lze stáhnout.

Poznámky

Související články

HTML5 * HTML5 audio

Externí odkazy

[url=https://web. archive. +moreorg/web/20120206232554/http://www. whatwg. org/specs/web-apps/current-work/multipage/the-video-element. html#the-video-element]Specifikace WHATWG[/url] * [url=http://dev. opera. com/articles/view/introduction-html5-video/]Úvod do HTML5 videa[/url], Opera * [url=http://www. webmproject. org/]WebM Project[/url].

video

5 min read
Share this post:
Like it 8

Leave a Comment

Please, enter your name.
Please, provide a valid email address.
Please, enter your comment.
Enjoy this post? Join Cesko.wiki
Don’t forget to share it
Top