Zkoušíme audio a video v Safari - několik ukázek

Safari 3.1 je první prohlížeč, který podporuje HTML5 značky <audio> a <video> v ostré uživatelské verzi. Trochu mne to překvapilo, popravdě nejsem si jist, zda je to již dostatečně otestovaná vlastnost, ale nevadí, vyzkoušíme.

Experimentoval jsem a vytvořil pár jednoduchých příkladů. K základnímu zkoumání se vám můžou hodit. (V příkladech vždy nahoře vidíte zdrojový kód, který můžete upravovat, a dole výslednou stránku.)

Poznámka: Ukázky vám budou správně fungovat pouze, máte-li nainstalováno Safari 3.1 nebo novější spolu s Quick Time.

Značka video

• Video, jehož ovládání skriptuje autor stránky. V mém případě jsem pro ovládání videa zvolil triviální řešení, a to obsluhu click události, kterou uživatel video spustí nebo zastaví. Uživatelsky přívětivější výsledek najdete na webkit.org.
  
• Podobný příklad, ale atribut autoplay zajistí automatické spuštění videa po načtení stránky. Zastavení a následné znovuspuštění videa je opět řešeno pomocí click události.

Zatím jsme si ovládání videa programovali sami. A to může být mnohem složitější - včetně ovládání hlasitosti, velikosti přehrávaného videa, zobrazení posuvníku právě přehrávané scény atd. Fantazii se meze nekladou, ovšem co když chcete video prostě vložit a o nic víc se nestarat?

• Ovládací prvky videa můžete nechat zcela na prohlížeči atributem controls. Tak bude asi vypadat nejčastější použití značky video. Není specifikováno, jak má uživatelské rozhraní vypadat, každý prohlížeč může nabídnout rozhraní trochu jiné, které se může lišit i v závislosti na platformě. Ovšem nikdy by nemělo zasahovat do okolní stránky (pak byste totiž nikdy nevěděli, jak bude video box vlastně veliký). Prohlížeč Safari vkládá ovládací prvky dovnitř boxu s videem (během přehrávání se skryjí, takže nevadí). Dalším řešením je umístit je do kontextového menu (to Safari zatím nepoužívá).
  
• Přehrávání je spojeno s řadou událostí (napočítal jsem jich jeden a dvacet), na které může kód stránky reagovat. Ukažme si jen jednu z nich - událost ended, která je vyvolána při skončení videa.
  
• Pro určení zdroje videa lze použít i značku source. Tento zápis použijeme asi jen, pokud chceme přesně určit kodek videa (nebo audia), protože pro ně nabízí upřesňující atributy. Update: Další zajímavé použití značky source je, pokud máme video v několika formátech. Pak přidáme několik značek source (pro každý formát jednu) a prohlížeč použije první formát, který dokáže zpracovat. Prohlížeč se rozhodne podle analýzy atributu značky source a stáhne jen jeden vybraný formát (nemusí tedy všechny stahovat a analyzovat) .
  

Značka audio

Pro značku audio platí téměř vše, co platí pro video.

• Pokud u značky audio použijeme atribut controls, zobrazí se ovládací prvky pro přehrávání, což je na rozdíl od videa to jediné, co ze značky vizuálně vidíme. Zde přesně nevíte, jak budou ovládací prvky veliké, reagují sice na CSS vlastnosti width a height, ale mají svou minimální velikost (ta není definována a bude záviset na prohlížeči), pod kterou je nezmenšíte.
  
• Pokud nepoužijeme atribut controls, pak je značka audio neviditelná, přidáme-li navíc atributy autoplay a playcount , vytvoříme neviditelné přehrávací zařízení, které lze vypnout jen opuštěním stránky. Přirozeně se předpokládá, že autor stránky v takovém případě nabídne uživateli své vlastní ovládací prvky (hezčí než ty, co nabízí prohlížeč) pro ovládání hudby, resp. zastavení nežádoucího hluku.
• Značce audio se můžete zcela vyhnout a přehrávat zvuk za pomoci JavaScriptu a objektu Audio.

Poznámky

Myslím si, že oproti různým obskurnostem, které dnes musíme při vkládání videa do HTML protrpět (včetně řešení různých prohlížečů a už vůbec nemluvím o odlišných řešeních pro různé druhy videa) jsou nové HTML5 značky celkem intuitivní a příjemné.

Popsal jsem jen základní vlastnosti, více najdete v HTML5 specifikaci v částech Video Element, Audio Element, Media Elements a Source Element.

Možná jste si v příkladech všimli, že s novými značkami jsme schopni uživateli bez jeho vědomí spustit video nebo hřmot i v případě, že má vypnuté pluginy (hlavně Flash) a JavaScript. Dosud bylo takové prostředí považováno za nedotknutelné.

Jsem přesvědčen, že prohlížeče přijdou s jednoduchou předvolbou, jak takové chování zakázat (něco jako Nechci být rušen ON), v případě Safari se tomu tak ovšem nestalo a uživatele před ozvučenými stránkami zatím nic neochrání.

V implementaci v Safari jsem objevil i malou chybu, resp. odchylku od specifikace. Pokud uživatel nemá povolený JavaScript, nemůže vložené video nebo audio ovládat (ani ho spustit), pokud nejsou atributem controls zapnuty ovládací prvky prohlížeče. V takovém případě má prohlížeč tyto ovládací prvky zobrazit, i když atribut controls nebyl definován. To Safari zatím neřeší.

Zajímalo by mne, kdy se podobná verze Safari dostane i do iPhone (nemám, nemohu ověřit), přeci jen některým čistě iPhone specializovaným webům by tahle zjednodušená syntaxe mohla přijít vhod.