Předvolba pro vypnutí autoplay videa

Když jsem nedávno předváděl podporu videa ve Firefoxu a o něco dříve podporu videa v Safari, stěžoval jsem si, že oba prohlížeče umožňují spustit video i s vypnutým JavaScriptem (to specifikace nařizuje - jedná se o autribut autoplay), ale neumožňují uživateli tuhle funkci vypnout (o tom se specifikace nijak nezmiňovala).

Velmi mě potěšilo, když včera do HTML5 specifikace přibyl odstavec, který doporučuje prohlížečům nechat uživatele tuhle funkci vypnout. Podobně autorům stránek je doporučováno automatické spouštění řešit atributem autoplay a nikoliv skriptováním:

User agents are not required to autoplay, and it is suggested that user agents honor user preferences on the matter. Authors are urged to use the autoplay attribute rather than using script to force the video to play, so as to allow the user to override the behavior if so desired.

Už se těším, až se v prohlížečích takové funkce objeví. Přeci jen uživatel má být vždy tím, kdo má svrchované právo rozhodnout, jak se prohlížeč bude chovat.

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.

Safari 3.1 s HTML5

Vyšla stabilní verze Safari 3.1 (pro Mac i pro Windows) a obsahuje dvě zajímavé novinky z HTML5. Detailně jsem o nich psal dříve, dnes jen stručně:

Značky <video> a <audio>

Safari je první, který jejich podporu dotáhl až do stabilní verze prohlížeče (Opera a Firefox je mají zatím jen v experimentálním stádiu). Vyzkoušet si je můžete na HTML5 Media Support.

SQL storage

Safari podporuje databázové úložiště (offline storage) včetně nástrojů pro jeho správu. Vyzkoušet si ho můžete na demo ukázce z poznámkami. Pokud si chcete vyzkoušet i slibované nástroje, zapněte si v předvolbách Advanced - Show Develop menu. Jakmile si na zmíněném demu zapnete Web Inspector a v něm rozbalíte vlevo položku Databases, můžete se podívat na vytvořené tabulky, případně zadávat vlastní SQL dotazy.

Podpora HTML5 videa a audia v Safari

Poslední noční build WebKitu (jádra Safari) pro Mac OS X již podporuje značky <video> a <audio> z HTML5. Podle vývojářů:

The current implementation supports all formats that QuickTime supports, including installed 3rd party codecs.

To odpovídá již dřívějšímu oznámení, že Apple zatím nebude nativně podporovat Ogg Theora (formát, který HTML5 specifikace doporučuje).

Pokud máte Mac OS X, pak si video v Safari můžete vyzkoušet přímo na blogpostu HTML5 Media Support.

Začátkem léta jsem se ptal který prohlížeč první implementuje video? V pomyslném závodu se Safari zařazením podpory videa do nočních verzí ujímá vedení.

A jak jsou na tom ostatní prohlížeče?

Opera čas od času vydá experimentální verzi s videem, v pravidelných weekly buildech se podpora zatím neobjevila.

U Firefoxu se patch s podporou videa stále dolaďuje a je před commitnutím. Podporu si lze vyzkoušet v neoficiálním buildu.

Na Internet Explorer se vztahuje informační embargo a co se v jeho připravované osmičkové verzi objeví se můžeme jen dohadovat.

Mikroformáty už i v Safari

Pokud patříte mezi uživatele prohlížeče Safari, můžete vyzkoušet rozšíření, které Safari obohatí o podporu Mikroformátů.

Zatím jsou podporovány dva oblíbené mikroformáty hCard a hCalendar.

Rozšíření běží pouze na Mac OS X 10.5 Leopard. Na mém macbůčku je verze 10.4 Tiger, proto jsem rozšíření nemohl vyzkoušet.

Pokud patříte mezi ty šťastné uživatele, budu rád, když se mi se svými dojmy z podpory mikroformátů v Safari svěříte v komentářích.

Který prohlížeč první implementuje video? (aktualizováno)

Håkon Wium Lie na jaře prohlásil, že do konce tohoto roku tu bude několik prohlížečů podporujících <video>. Jak jsme na tom v začínajícím rozpuku léta?

V oficiální verzi zatím žádný z prohlížečů podporu nevydal. Nicméně:

• Opera začala implementovat <video> jako první a na jaře uvolnila ukázkový experimentální build s jeho podporou.
• S podporou <videa> pro Firefox začal asi před měsícem Chris Double, ale kromě screenshotů zatím nic neukázal. (aktualizováno) Jak jsem tento post napsal, Chris zveřejnil svůj patch, detaily na Patch for Video element support in Firefox.
  
• V pátek minulý týden byla do veřejného stromu Webkitu (jádra prohlížeče Safari) commitnuta podpora pro <video> a <audio>, dle mých experimentů ještě není součástí nočních buildů, takže jsem ji nevyzkoušel (zdroj: yesterday’s future)
  

Máte tu pěknou trojku Opera, Firefox a Safari. Všichni tři experimentují s podporou <video>.

Zdá se, že Håkonův odhad byl správný. Teď už jen můžeme čekat, kdo z nich jako první začlení podporu <videa> do další verze.

Microsoft se zatím nevyjádřil, ale ten nejspíš bude hrát na jistotu. Na rozdíl od implementace dosud nedokončeného <videa> si počká, až bude specifikace uzavřená a pak (snad) podporu do Internet Exploreru přidá. Navíc Chris Wilson naznačoval, že IE bude HTML5 pravděpodobně podporovat ve zvláštním módu, který neovlivní stávající zobrazovací módy (ke dvěma zobrazovacím módům, které IE používá, pravděpodobně přibude třetí pro HTML5).

To by nasvědčovalo, že podpora HTML5 se v IE objeví skokem a nikoliv po jednotlivých částech, jako to dělá trojka zmíněná S. O. F. (Save Our Fear).

Apple se distancuje od XHTML2.0

Maciej Stachowiak (vývojář Safari, Apple) se začátkem roku vyjádřil, proč se vývojáři Safari neúčastní příprav XHTML2.0:

We declined to participate in the XHTML2 Working Group because we think XHTML2 is not an appropriate technology for the web. There is no need to break compatibility with HTML4.x/XHTML1.x, and the compatibility-breaking changes are not necessarily good ones from the point of view of semantics or authorability. Also, it moves HTML in a direction that is suitable for documents but not as much for applications. However, we abstained from voting instead of voting no because we don’t think they should be stopped from doing this work if they feel it isvaluable.