Desi flash este cel mai raspanadit element activ din paginile web, multi design-eri inca nu stiu medota corecta pentru al insera in documentele HTML. Conceptul standard promovat de Macromedia e complet nefolositor.

Sa ne aducem aminte:

<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>

Atributele elementului <object> sunt subordonate nevoilor Internet Explorer-ului si nu functioneaza in alte browser-e. Alte browser-e folosesc elementul <embed> pentru acelasi scop, dar el nu e inscris pe lista specificatilor HTML sau XHTML. Prin urmare codul nu este valabil si e plin de hack-uri particulare.

Cea mai mare prolema este de fapt ca, nu exista posibilitatea de a furniza continut alternativ care sa fie afisat user-ilor care nu au flash player. (ca. 10%)

In cautarea solutiei

Care sunt cerintele?

  • Trebuie sa functioneze in toate browser-ele;
  • Trebuie sa afiseze continut alternative daca plugin-ul de Flash lipseste;
  • Trebuie sa nu se bazeze pe JavaScript;
  • Trebuie sa fie compatibil cu Eolas workaround trick.

Cu siguranta trebuie sa scapam de elementul <embed>. Cu aceasta simplificare vom avea spatiu clar pentru continut altenativ. Scriptul va arata acum asa:

<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>This is alternative content</p>

</object>

Solutia prezentata va functiona in IE si Opera iar daca Flash este dezinstalat continutul alternativ va fi afisat corect.

Totusi, scriptul inca foloseste atributele elementului <object> contrar specificatilor si prin urmare Mozilla nu va afisa Flash-ul (va afisa continutul alternativ).

Vom scoate atributul classid si codebase si ii vom inlocuii cu MIME type-ul correct si data continand calea catre fisierul Flash. Parametrul movie devine prin urmare facultativ. Dupa schimbari scriptul arata asa:

<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>This is alternative content</p>
</object>

Astfel functioneaza in Mozilla si deasemenea in Opera. In Internet Explorer, nu. Daca punem la loc paramentrul movie, sus mentionat, IE va afisa Flash-ul, dar cu limitari nedorite – download-ul progresiv nu va functiona. Flash-ul va fi afisat doar dupa ce fisierul a fost incarcat in intregime.

Drew McLellan a luat in calcul acest lucru in 2002, cand a venit cu metoda numita Flash Satay, care rezolva problema lipsei de download progresiv, folosind un Flash aditional pe post de container. Din aceasta cauza are probleme cu accesibilitatea (care nu prea ma deranjeaza) si deasemenea nu functioneaza cu Eolas workaround trick. Acesta este un defect major.

Cum sa combini cele doua scripturi?

Avem doua sisteme, variind doar in detaliu. Am incercat cateva variante de a le combina. In toate am intalnit dificultati, mai mici sau mai mari. Intr-un caz Mozilla nu va afisa continutul alternativ, in altul IE are probleme, etc.

Codul scris pentru IE va arata asa:

<!--[if IE]>
HTML code only for IE
<![endif]-->

Dar cum sa atribuim un cod didicat celorlalte browsere? Pentru treaba asta exista comentarile conditionate de negatie, care din pacate nu sunt valabile. Vom rezolva problema asta cu ajutorul unui truc “(explicatie)” si vom rescrie comentul in aceasta forma finala valabila:

<!--[if !IE]> -->
HTML code for all except of IE
<!-- <![endif]-->

Solutia finala

Codul complet va arata astfel:

<!--[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" />
<!--><!---->
  <param name="loop" value="true" />
  <param name="menu" value="false" />

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

Poate nu e o solutie brilinat de eleganta, dar e singura solutie intrutotul functionala pe care am gasit-o.

  • e valabila;
  • e functionala in toate browserele pe care le stiu;
  • intotdeauna afiseaza continut alternativ daca lipseste plugin-ul;
  • poate fi combinata cu Eolas workaround trick;
  • nu necesita JavaScript;
  • tagurile <param> nu sunt dublate.

nota: din cauza ca Opera nu foloseste <param value="transparent" name="wmode" /> sau opaque

autor: La Trine pe 12 Aprilie, 2006
sursa: http://www.dgx.cz/trine/item/how-to-correctly-insert-a-flash-into-xhtml

  • Reddit
  • StumbleUpon
  • del.icio.us
  • Digg
  • Twitter