Bye Bye Embed

Vždycky mě rozčilovalo, že nestandardní používání elementu object v Internet Exploreru přinutilo prohlížeče, které podporují standardy, aby při vkládání videa na webové stránky používaly nestandardní element embed. Dokonce i na stránkách Apple je element embed (Netscape extension, proboha!) tak zabydlen, že je těžké i jen najít informaci o použití elementu object pro QuickTime, kromě nestandardního způsobu.

Používání embed už trvá příliš dlouho. Přát si, aby se stal součástí oficiální specifikace, je jako přát si, aby váš partner konečně začal zavírat zubní pastu. To se prostě nestane. Je čas na změnu. Chcete-li, aby váš web byl validní, musíte se zbavit embed. V tomto článku vám ukáži, jak na to.

Online video: Google Video a YouTube

Čtenáři ALA si vzpomenou na podnětný článek Drewa McLellana Flash Satay. Drew v tomto článku popsal metodu, jak vkládat Flash animace na stránky bez použití embed. Flash Satay přináší dvě myšlenky. Za prvé Drew vymyslel, jak můžete na volání Flashe využít jediný element object, pokud specifikujete adekvátně jeho type. Za druhé zjistil, že musíte přidat něco jako „reference movie“, aby se Flash video správně streamovalo.

Experimentovala jsem s Drevovým kódem na Google Video a YouTube. Byla jsem šokována, když jsem zjistila, že Google Video doporučuje pro vkládání svého videa do stránek používat výhradně element embed. Nebyla jsem ani tak šokována tím, že takovou věc navrhli, jako tím, že to skutečně funguje v Internet Exploreru, který přestal podporovat nestandardní ale univerzálně podporovaný element embed již před mnoha lety, a místo toho upřednostnil svou proprietární implementaci standardního elementu object, která způsobuje, že je tento element neviditelný pro standardní prohlížeče. Vypadá to, že IE podporuje embed, pokud má návštěvník již nainstalován příslušný přehrávač. Jestliže nemá, dostane chybovou hlášku a obecnou ikonu pro chybějící plugin, ale žádnou nápovědu. YouTube upřednostňuje dvojaký přístup, který je častý ale stěží standardní, a nabízí jak element object, tak embed.

Protože Google Video i YouTube nabízejí filmy přes Flash player – bez ohledu na to, v jakém formátu jste video nahráli – můžete na vložení takových filmů do svých stránek použít Drewovu metodu s jediným elementem object. Ovšem nemusíte použít tu část jeho kódu, která se vztahuje k Satay, filmy z Google Video i YouTube streamují dokonce i bez referenčního videa, jehož použití Drew navrhuje.

<object type=“application/x-shockwave-flash“
   data=“http://video.google.com/googleplayer.swf?8755581808731033658″
   width=“400″ height=“326″ id=“VideoPlayback“>
   <param name=“movie“
      value=“http://video.google.com/googleplayer.swf?docId=8755581808731033658″ />
   <param name=“allowScriptAcess“ value=“sameDomain“ />
   <param name=“quality“ value=“best“ />
   <param name=“bgcolor“ value=“#FFFFFF“ />
   <param name=“scale“ value=“noScale“ />
   <param name=“salign“ value=“TL“ />
   <param name=“FlashVars“ value=“playerMode=embedded“ />
</object>

Co mě ale skutečně otravuje, není, jak jsem zmínila výše, Flash video, s kterým mám málo zkušeností, ale videa pro QuickTime a Windows Media Player. Roky jsem je zkoušela vložit standardním způsobem, ale bez úspěchu. Docela nedávno jsem narazila na MIME type, které vám umožní použít jediný object pro soubory Windows Media Player (.wmv). Pořád tomu ještě nemohu uvěřit.

Heuréka! Jediný object pro Windows Media Player!

Věřím, že si člověk má všímat chyb. Jen tehdy, když si uvědomím, že jsem udělala něco špatně, a zjistím proč, mohu najít nový způsob, jak to udělat dobře. Jak jsem zkoumala tu techniku, všimla jsem si, že ačkoli pro QuickTime videa fungovala dobře (viz níže), nefungovala pro videa Windows Media Player … v Opeře … pro Windows. Potlačila jsem touhu to ignorovat, a jak jsem dolovala odpověď na tenhle problém, došla jsem k MIME type, který vám umožní pro vkládání souborů Windows Media Player použít jediný object: video/x-ms-wmv.

Soubory Windows Media Player by mělo být možné vložit takto:

<object type=“video/x-ms-wmv“
   data=“http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv“
   width=“320″ height=“260″>
   <param name=“autostart“ value=“true“ />
   <param name=“controller“ value=“true“ />
</object>

Ale vypadá to, že IE6, IE7 a Safari (podivná společnost, to tady snad ještě nebylo) potřebují ještě trochu popostrčit pomocí dodatečného elementu param:

<object type=“video/x-ms-wmv“
   data=“http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv“
   width=“320″ height=“260″>
   <param name=“src“
      value=“http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv“ />
   <param name=“autostart“ value=“true“ />
   <param name=“controller“ value=“true“ />
</object>

A tohle funguje.

Osobně to považuji za hodně experimentální nebo dokonce svatokrádež – vkládání videa Windows Media Player bez classid! (Co bude dál? Validní dokumenty bez DOCTYPE?) Tento jednoduchý příklad jsem testovala v IE5.5, IE6, IE7, Opera Win/Mac, Firefox Win/Mac a Safari a fungovalo to dobře. Ale nedělám moc skriptování ani microsoftí věci, takže váš náhled se může lišit. (Pozn. aut.: Existuje samozřejmě mnohem více elementů param, které byste mohli použít.)

Vkládání QuickTime videa bez embed

Bohužel, jsem si docela jistá, že neexistuje žádný type, který by přesvědčil IE, aby otevřel QuickTime video bez ActiveX. Zjevné volby, type="video/quicktime" nebo dokonce type="application/x-quicktime", fungují jen v prohlížečích, které podporují standardy. A tak jsem zvolila jinou cestu.

Několik základních předpokladů

Tato technika je založena na několika předpokladech:

• Za prvé, prvek object se vnořuje a jestliže prohlížeč nemůže zobrazit vnější object, měl by zkusit následující a pak další, dokud nenajde takový, který může zpracovat. Jakmile najde object, se kterým si poradí, předpokládá se, že zbytek bude ignorovat.
• Za druhé, většina hlavních prohlížečů podporuje element object. Velká výjimka (překvapivě) je Internet Explorer. IE6 zobrazuje všechny prvky object, se kterými si dokáže poradit – dokonce i když jsou zanořené – a také ošklivé přízraky těch, které zpracovat neumí. IE7 naštěstí duchy nevytváří, ale naneštěstí nefunguje vnoření, pokud je problém s vnějším objektem. Prostě jen vyhodí chybu.
• Za třetí, Internet Explorer (až do a včetně verze 7) implementuje element object nestandardním způsobem, který ostatní prohlížeče ignorují.

Myslím, že odpověď může být nalezena v systému podmíněných komentářů pro IE (česky viz Podmíněné komentáře v Internet Exploreru). Začala jsem o nich slýchat, když lidé zkoušeli, jak se vypořádat s novým přístupem IE7 k CSS. Zatímco komentování v IE je vlastní IE (čti proprietární), stejně tak je mu vlastní neschopnost správně použít element object. Perfektně to zapadá.

Vkládání QuickTime pro Internet Explorer

Pro svůj příklad použiji QuickTime, ale stejný postup můžete využít pro videa Windows Media Player s atributem classid, jak ukáži o kousek dále.

Pro vložení základního videa QuickTime v Internet Exploreru použijeme něco takového:

<object classid=“clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B“
   codebase=“http://www.apple.com/qtactivex/qtplugin.cab“
   width=“320″ height=“256″>
   <param name=“src“
      value=“http://www.sarahsnotecards.com/catalunyalive/diables.mov“ />
   <param name=“controller“ value=“true“ />
   <param name=“autoplay“ value=“false“ />
</object>

Nezapomeňte height nebo width nebo ten příšerný classid, který volá ActiveX control pro QuickTime. Povšimněte si, že element param, který udává URI videa, nese atribut name="src", nikoli name="url" nebo name="movie".

Můžete se podívat na příklad. V IE uvidíte video, ale v ostatních prohlížečích neuvidíte nic.

Vkládání QuickTime pro všechny ostatní

Ačkoli prohlížeče podporující standardy nemohou ten object zpracovat, protože atribut classid je to hnusné číslo místo URL, budou hledat vnořené objekty, se kterými by pracovat mohly.

Takže těsně před uzavíracím tagem </object> použijeme standardní implementaci elementu object:

<object classid=“clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B“
   codebase=“http://www.apple.com/qtactivex/qtplugin.cab“
   width=“320″ height=“256″>
   <param name=“src“
      value=“http://www.sarahsnotecards.com/catalunyalive/diables.mov“ />
   <param name=“controller“ value=“true“ />
   <param name=“autoplay“ value=“false“ />
   <object type=“video/quicktime“
      data=“http://www.sarahsnotecards.com/catalunyalive/diables.mov“
      width=“320″ height=“256″>
      <param name=“autoplay“ value=“false“ />
      <param name=“controller“ value=“true“ />
   </object>
</object>

Atributy width a height jsou povinné, stejně jako type.

Když se podíváte na tuto kombinaci v prohlížeči podporujícím standardy, vypadá to skvěle, je to jen trochu hlasité. IE6 (a starší), jak bylo popsáno výše, se neumí rozhodnout, co udělat s tím druhým elementem object, takže tam vytvoří ducha.

Co IE nemůže vidět, to nemůže zmršit

Ačkoli podmíněné komentáře pro IE byly navrženy s poněkud pochybným cílem, aby bylo možno mu předkládat speciální kód, který bude před ostatními prohlížeči skryt, použijeme je, abychom skryli tento kód před IE, ale nikoli před ostatními prohlížeči. (Je to tak trošku výsměch – ačkoli vlastně ne tak překvapivý – že Microsoft má nervy na to, aby nazýval ostatní prohlížeče“zaostalé“.)

Tento typ podmíněných komentářů zapisovaný podle původní syntaxe Microsoftu není validní (překvapivě), ale, bohudík, Lachlan Hunt vymyslel způsob, jak je upravit tak, aby validní byly.

Takže potřebujeme před IE skrýt druhý object pomocí jeho vlastního systému podmíněných komentářů. Vložme tedy <!--[if !IE]>--> před druhý element <object> a <!--<![endif]--> hned po prvním uzavíracím tagu </object>.

<object classid=“clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B“
   codebase=“http://www.apple.com/qtactivex/qtplugin.cab“
   width=“320″ height=“260″>
   <param name=“src“
      value=“http://www.sarahsnotecards.com/catalunyalive/diables.mov“ />
   <param name=“controller“ value=“true“ />
   <param name=“autoplay“ value=“false“ />
   <!–[if !IE]>–>
   <object type=“video/quicktime“
      data=“http://www.sarahsnotecards.com/catalunyalive/diables.mov“
      width=“320″ height=“260″>
      <param name=“autoplay“ value=“false“ />
      <param name=“controller“ value=“true“ />
   </object>
   <!–<![endif]–>
</object>

Teď je to nádhera!

A navíc můžete pro object použít celou sadu parametrů, jak jsou popsané na stránkách Apple.

Příště budu testovat s něčím méně hlučným.

Detaily pro Windows Media Player

Jestliže raději vkládáte soubory pro Windows Media Player s classid a ne metodou jednoho elementu object, kterou jsem předvedla výše, bude kód jen trošku odlišný. Pro classid v tom prvním elementu object použijte classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6". URL filmu pro Windows Media Player zadejte elementem param s atributem name="url" (pro většinu prohlížečů) a pak opakujte value a atributem name="src" (pro Safari).

Pak ve druhé, standardní implementaci elementu object uveďte stejný kód jako v metodě pro jediný object.

Zde je příklad:

<object classid=“CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6″
   id=“player“ width=“320″ height=“260″>
   <param name=“url“
      value=“http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv“ />
   <param name=“src“
      value=“http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv“ />
   <param name=“showcontrols“ value=“true“ />
   <param name=“autostart“ value=“true“ />
   <!–[if !IE]>–>
   <object type=“video/x-ms-wmv“
      data=“http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv“
      width=“320″ height=“260″>
      <param name=“src“
         value=“http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv“ />
      <param name=“autostart“ value=“true“ />
      <param name=“controller“ value=“true“ />
   </object>
   <!–<![endif]–>
</object>

Malá vráska aneb co zbývá vyřešit

V lednu 2006 začalo Apple pro volání filmů na webových stránkách doporučovat JavaScript, aby uživatelé nemuseli ovládací prvky ActiveX aktivovat kliknutím. Je to dlouhý a zamotaný příběh, který začal žalobou proti Microsoftu a skončil tím, že my ostatní máme život těžší. V každém případě metoda popsaná výše funguje téměř perfektně bez jakéhokoli JavaScriptu, s jednou nedokonalostí – filmy v QuickTime se v IE samy nespustí (autoplay). Nejsem si jistá, jestli bych vůbec chtěla, aby se to video z příkladu samo spustilo! Shledávám však vysoce podezřelým, že soubory Windows Media Player se načtou v pozadí a spustí se bez jakékoli interakce, ale filmy v QuickTime zobrazí jen úvodní rámec, zatímco hraje audio, ale nezobrazí se žádné pohyblivé obrázky.

V každém případě chci nejdříve vidět, jak bude fungovat aktivování ActiveX, než na svůj web implementuji to JavaScriptové řešení, které považuji za poněkud lopotné. Používám JavaScript velmi málo a ráda bych, aby to tak zůstalo.

Zda si zvolíte způsob s JavaScriptem nebo ne, je vlastně irelevantní, alespoň co se týká tohoto článku. V obou případech se můžete vyhnout elementu embed a použít object.

Ráda bych našla způsob, jak skrýt ty vnitřní elementy object jen před IE6 a staršími, protože se zdá, že IE7 (aspoň v beta 2) zpracovává zanořené elementy object správně, ale byla jsem neúspěšná. Ačkoli existuje podmíněný komentář, který by to umožnil (<!--[if gte IE 7]>-->), ty extra znaky, (-->) které vymyslel Lachlan, aby ta věc byla validní, jsou v IE7 viditelné (jak by logicky měly být). Nějaké nápady?

Na ramenou titánů

Na tomto problému pracovali i jiní. Tento článek potvrdil, že by měly fungovat dva vnořené elementy object, ale spoléhal se při skrývání druhého elementu object na, podle mého názoru, poměrně komplikované CSS.

Ian Hickson použil podmíněné komentáře IE pro skrytí druhého elementu object, který obsahoval Flash, před IE.

A výše zmíněný Lachlan Hunt vymyslel, jak zapsat validní podmíněný komentář pro Internet Explorer, který skryje obsah před IE, ale ponechá ho viditelný pro ostatní prohlížeče.

Pozn. překl.: V komentářích k originálnímu článku se objevilo několik odkazů, které považuji z různých důvodů za důležité:

• přehled validních technik vkládání objektů
• návod od dgx, jak vložit Flash podle nových požadavků
• řešení bez vnořování elementů object
• test podmíněných komentářů včetně IE7
• podmíněný komentář pro IE7

Informace o překladu

Původní článek: Bye Bye Embed (A List Apart, 11. 7. 2006)
Překlad: Sušňová, Eva.
Odborná a jazyková spolupráce: Málek, Vilém.
Přeloženo se svolením autora a magazínu A List Apart (další překlady).

About translation

Original article: Bye Bye Embed (A List Apart, 11. 7. 2006)
Translation: Sušňová, Eva.
Language and expert collaboration: Málek, Vilém.
Language of translation: Czech (for readers from Czech and Slovak republics)
Translated with the permission of A List Apart Magazine and the author (other translations).

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.