Ukázka podpory videa ve Firefoxu 3.1

Vývojová verze Firefoxu 3.1 Alfa 2 podporuje značky video a audio z HTML5. Já se jí podívám trochu na kobylku podobně jako jsem to před půl rokem udělal se Safari. Implementace sice není kompletní a obsahuje chyby (jednou se mi podařilo prohlížeče dokonce shodit), ale pro základní popis obou značek prozatím postačí.

Pokud chcete vidět rovnou celý výsledek, zobrazte si testovací stránku, já zde jednotlivé možnosti značek <video> a <audio> rozeberu podrobněji.

Video

Začneme videem, protože je zajímavější. Firefox v tuto chvíli podporuje pouze formát OGG Theora, v budoucnu by se mohlo spektrum rozšířit, ale to není zajím ještě jasné. Diskusi o formátech nechám na jindy, dnes se soustředím na kód HTML a JavaScriptu, kterým se video vkládá a ovládá.

Vzal jsem HTML5 trailer (krátké video, které jsem loni vyrobil) a převedl jej pro účely výkladu do OGG formátu. Má asi 5MB, proto pokud máte pomalé spojení, vydržte, až budete zkoušet příklady níže, než se poprvé načte. Pro další zobrazení by už měla zafungovat cache.

A můžeme udělat první pokus: zobrazit video v prohlížeči. Tady Firefox trochu zklamal, pokud mu video předložím přímo, nabídne mi stažení, ale netváří se, že by je uměl zobrazit (na to jsem se těšil). Škoda, takže pro zobrazení videa musíme vytvořit webovou stránku, do které video vložíme. (Pro srovnání u obrázků to není nutné, ty prohlížeč dokáže zobrazit i přímo, nepotřebuje k tomu webovou stránku).

• Nejjednodušší příklad vložení - k vložením nám stačí značka video s nastaveným atributem src. Musíme pamatovat na přístupnost a pro prohlížeče, které značku video nepodporují, vložíme tzv. fallback obsah, který zobrazí místo videa. V našem případě postačí, když dovnitř značky video vložíme odkaz ke stažení. JENŽE video nám jaksi nefunguje že? Po načtení ze zobrazil první snímek, ale ne a ne se spustit. Inu zatím jste ho zobrazili, ale ještě nespustili.
• Vložení s ovládacími prvky - přidáme atribut controls. Prohlížeč nám má nyní nabídnout ovládací prvky. A můžeme si video spustit. Video nám krásně běží a můžeme si je i zastavit. Všimněte si, že ovládací prvky jsou vykresleny plně v zobrazované oblasti videa, nijak nezasahují do okolní stránky (webdesigner tedy nemusí řešit který problížeč jak prvky vykreslí, nezajímají ho). BTW doufám, že je stávající podoba jen dočasná, protože se Safari, které zobrazí kompletní ovládací prvky včetně pozastavení videa, timeline, rychlého převinu a vypnutí zvuku, se nedá srovnat. Aktualizováno: Pracuje se na zlepšení.
  
• Malá varianta s autoplay - předchozí příklad, ale s přidaným atributem autplay, jehož význam jste jistě odhadli.
• Ovládáme video sami - pokud nechceme, aby ovládání zajišťoval prohlížeč, žádný problém. Když ale nevložíme atribut controls, musíme ovládací prvky nabídnout uživateli sami (jinak video nedokáže ani spustit, natož již spuštěné video zastavit). V tomto příkladu uvádím tu nejjednodušší možnost (kliknutím na video je spustíte nebo naopak zastavíte), v reálu bychom zvolili nějakou intuitivnější metodu, např. umístění pěkných tlačítek pod videem.
• Nastavení rozměrů - video je klasický blok, můžeme mu vnutit jakékoliv rozměry (a za pomoci SVG nebo CSS transform jím dokonce otáčet).

Značka video toho umí víc, ale jedná se buď o pokročilé vlastnosti nebo o vlastnosti, které Firefox zatím neimplementoval (zobrazení posteru, obsluha událostí atd.). Necháme si je proto na jindy. Pokud jste z Brna a okolí, můžete si přijít poslechnout mou přednášku na konferenci LinuxAlt 2008, kde se toho dozvíte víc a nejen o videu.

Audio

Firefox podporuje opět jediný kodek a to OGG Vorbis. Podobně jako u značky video není zatím ani podpora značky audio kompletní. Postačí nám proto jen jedna ukázka

• Ukázka audia - na zobrazené stránce sice nic neuvidíte, zato uslyšíte hudbu na pozadí. To proto, že jsem přidal atribut autoplay. Bez něj byste mohli hudbu spustit (a opět zastavit) JavaScriptem. Dalším řešením by bylo přidat atribut controls, který by měl podobně jako u videa uživateli zobrazit ovládací prvky. Ten ovšem ve Firefoxu zatím nefunguje.

Když prohlížeč nejde ztišit

Malé zamyšlení. Jak se poslední příklad zachová, pokud budete mít vypnutý JavaScript?

Podobně jako v Safari se obsah značky audio spustí, i když je vypnutý JavaScript (to je správně) a toto chování nejde změnit (to je špatně).

Doufejme, že než se podpora audia dostane do ostré verze, tak se nějaké nastavení objeví. Jinak by to totiž znamenalo konec poslední tiché bašty. Dosud jste měli možnost, pokud jste chtěli prohlížet web v tichosti, vypnout JavaScript, pluginy a měli jste celkem jistotu, že vás prohlížeč nevyruší. S příchodem značky audio tato jistota padá. Doufejme, že se v prohlížečích objeví aspoň možnost i tento mediální obsah vypnout.

A tím končí dnešní stručné představení značek <video> a <audio>. Více najdete v HTML5 specifikaci v sekcích Video Element, Audio Element, Media Elements a Source Element.

Jak vytvářet OGG Theora

Dotatek pro ty, kdo chtějí vytvořit video s kodekem OGG Theora a neví jak. Stačí když:

• stáhnete ffmpeg2theora
• zkonvertujete jím existující video (z příkazové řádky takto: ffmpeg2theora video.avi)
• výsledek můžete přehrát třeba ve Firefoxu 8-) nebo si stáhněte přehrávač VLC, případně samotný kodek