Jak správně vložit Flash do stránky

Ač je Flash nejrozšířenějším aktivním prvkem webových stránek, mnoho webdesignérů neví, jak jej správně do stránky vložit. Výchozí způsob, které propaguje Macromedia, je totiž naprosto nepoužitelný.

Připomeňme si jej:

<object
  classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
  codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
  width="550" height="400">
  ...
  <param name="movie" value="movie.swf" />
  <param name="quality" value="high" />
  ...
  <embed src="movie.swf" quality="high" bgcolor="#ffffff" width="550" height="400"
	type="application/x-shockwave-flash"
	pluginspage="http://www.macromedia.com/go/getflashplayer">
  </embed>
</object>

Atributy elementu <object> jsou podřízeny potřebám Internet Exploreru a v jiných prohlížečích Flash nezobrazí. Což zachraňuje element <embed>, který však není součástí HTML ani XHTML. Kód je tedy nevalidní, plný proprietárních obezliček.

V čem vidím největší problém, tak že nelze vytvořit alternativní obsah, jenž bude zobrazen uživatelům, kteří Flash nemají (cca 10 %).

Hledáme řešení

Jaké jsou požadavky?

• musí fungovat ve všech významných prohlížečích
• při chybějícím Flash pluginu musí zobrazit alternativní obsah
• nesmí být závislé na JavaScriptu
• a musí být kompatibilní s Eolas workaround trikem

Bezpochyby musíme odstranit element <embed>. Situace se nám tak zjednodušší a získáme jednoznačný prostor, kam lze vložit alternativní obsah. Zápis teď vypadá takto (příklad):

<object
  classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
  codebase="http://fpdownload.macromedia.com..."
  width="550" height="400">

  <param name="movie" value="movie.swf" />
  <param name="loop" value="false" />
  ...
  <p>Toto je alternativní obsah</p>

</object>

Tento kód funguje v IE i Opeře a po odinstalování Flashe se korektně zobrazuje alternativní verze.

Zápis však stále používá atributy elementu <object> v rozporu se specifikací a to se nám vymstí v Mozille, která Flash nezobrazí (alternativu ano). Uveďme je tedy do souladu.

Atributy classid a codebase odstraníme a naopak přidáme type se správným MIME typem a data obsahující cestu k Flash souboru. Parametr movie se tak stává zbytečným. Zápis nyní vypadá takto (příklad):

<object
  type="application/x-shockwave-flash"
  data="movie.swf"
  width="550" height="400">

  <param name="loop" value="false" />
  <param name="movie" value="movie.swf" />
  ...
  <p>Toto je alternativní obsah</p>
</object>

Toto už v Mozille funguje a v Opeře také. V Internet Exploreru ovšem ne. Pokud bychom vrátili zpět zmíněný parametr movie, IE by Flash zobrazil (příklad), jenže s nepříjemným omezením – nefunguje postupné načítání. Flash se zkrátka zobrazí teprve po stažení celého souboru.

Tytéž úvahy absolvoval již v roce 2002 Drew McLellan a přišel s metodou zvanou Flash Satay, která problém s postupným načítáním řeší skrze pomocný Flash. Kvůli tomu má vážné problémy s přístupností (což mě až tak netrápí, od toho je tu alternativní obsah) a také se nesnese s Eolas workaround trikem. A to už je vážná vada na kráse.

Jak oba zápisy skloubit?

Máme dva zápisy, lišící se vlastně v detailu. Vyzkoušel jsem celou řadu způsobů, jak je spojit. U všech jsem narazil na větší či menší obtíže. Jednou nezobrazuje Mozilla alternativní verzi, jindy má problémy IE atd.

Jako nejschůdnější se ukázalo oba zápisy prostě nekombinovat. Vložit je do HTML kódu současně a odlišit pomocí podmíněných komentářů.

Kód určený pro IE obalíme takto:

<!--[if IE]>
HTML kód pouze pro IE
<![endif]-->

Ale jak označit kód určený ostatním prohlížečům? K tomu účelu existuje negovaný podmíněný komentář, který je bohužel nevalidní. Pomůžeme si však trikem (vysvětlení) a upravíme jej do této validní podoby:

<!--[if !IE]> -->
HTML kód pro všechny mimo IE
<!-- <![endif]-->

Finální řešení

Hotový kód tedy bude následující (příklad + validátor):

<!--[if !IE]> -->
<object type="application/x-shockwave-flash"
  data="movie.swf" width="300" height="135">
<!-- <![endif]-->

<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
  width="300" height="135">
  <param name="movie" value="movie.swf" />
<!--><!--dgx-->
  <param name="loop" value="true" />
  <param name="menu" value="false" />

  <p>This is <b>alternative</b> content.</p>
</object>
<!-- <![endif]-->

Možná to není oslnivě elegantní řešení, ale je to jediné skutečně funkční řešení, co jsem objevil.

• je validní
• ve všech mně známých prohlížečích funkční
• při chybějícím pluginu vždy zobrazuje alternativní obsah
• lze kombinovat z trikem EOLAS workaround
• nevyžaduje JavaScript

poznámka: kvůli Opeře nepoužívejte <param name="wmode" value="transparent" /> či opaque