Estudi d'un mètode per incrustar un Flash

Objectiu

Inserir un Flash a un document XHTML de manera que transformi correctament al no disposar d'alguna tecnologia (ja sigui el plugin de Flash, Javascript, etc.).

Revisió de mètodes ja existents

Existeixen força recopilacions i comparatives de mètodes per incrustar un Flash. La més gràfica és Flash embed test suite.

D'aquesta comparativa se'n pot treure que les maneres més robustes són el codi per defecte que genera l'Adobe Flash i la tècnica de Nested objects proposada per en Ian Hickson.

El codi d'Adobe Flash és descartable perquè empra l'element embed que no existeix en cap recomanació recent del W3C.

D'altres solucions conegudes com l'UFO té el greu defecte de dependre de Javascript per funcionar o el Flash Satay que no funciona bé en lectors de pantalla tals com el JAWS.

Ens queda doncs la tècnica Nested objects que té el defecte d'haver de ser redundant i d'haver-se de fiar dels comentaris condicionals d'Internet Explorer.

Tot i això el codi és vàlid i conceptualment prou correcte tenint en compte la realitat penosa del cas.

Estudi de la casuística

Donat que la casuística és força complexe he creat un diagrama de flux per complementar l'explicació:

Partint de la tècnica Nested objects tenim un codi que tindrà tant la crida al Flash com el contingut alternatiu d'aquest.

El navegador determinarà si existeix o no el plugin de Flash, mostrant el contingut alternatiu si cal.

Si hi ha Javascript disponible

Des de Javascript es podrà detectar si la versió del plugin que té l'usuari és la mínima indispensable per poder-lo veure, en cas de que no sigui així es forçarà la visualització del contingut alternatiu.

Si la versió del plugin de Flash és correcta el Javascript també s'encarrega d'habilitar l'ús del Flash sense haver de fer un clic previ (Tal i com passa en Internet Explorer i Opera degut al cas EOLAS).

Si no hi ha Javascript disponible

Es carrega un Flash compilat amb la versió més antiga possible que contindrà un Actionscript que detectarà si la versió és correcta. Si no ho és mostrarà un contingut alternatiu dins el propi Flash.

Si la versió és correcta, la primera pel·lícula Flash carregarà el fitxer que es volia mostrar.

El clic previ derivat del cas EOLAS és insalvable.

Conclusió

Aquest flux intenta cobrir tots els casos possibles però quan no hi hagi Javascript disponible i el plugin de Flash de l'usuari sigui inferior al de la pel·lícula detectora, s'obtindrà el pitjor resultat: una zona blanca.

En qualsevol cas, plantejat així, el grup d'usuaris que rebrà un impacte negatiu serà el menor possible.

A més a més té un punt dèbil quan no existeix Javascript i la versió del plugin no és correcta ja que sembla no haver-hi manera de mostrar el contingut alternatiu que té l'XHTML.

Consideracions sobre l'XHTML

El codi XHTML és practicament un Nested objects salvant que en aquest cas s'ha eliminat l'atribut codebase per evitar que Internet Explorer executi l'actualització de Flash.

Quedaria quelcom semblant a:


<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="340" height="376">
   <param name="movie" value="detector.swf?versio=8&amp;url=movie.swf" />
   <!--[if !IE]>-->
      <object data="detector.swf?versio=8&amp;url=movie.swf"
         type="application/x-shockwave-flash" width="340" height="376">
   <!--<![endif]-->

         Contingut alternatiu

   <!--[if !IE]>-->
      </object>
   <!--<![endif]-->
</object>

La versió de la pel·lícula el millor és posar-la com a paràmetre de la URI ja que usar un param pot ser problemàtic en Internet Explorer.

Problema per obtenir el contingut alternatiu en Internet Explorer des de Javascript

Quan s'intenta obtenir els nodes descendents d'un element object des d'Internet Explorer aquest retorna un seguit de param (en IE 6 tots els que li pots definir i en IE 7 només els que hagis definit), però no retorna cap node més. És a dir: no es pot recuperar el contingut alternatiu.

Per aconseguir obtenir el contingut alternatiu caldrà usar innerHTML, volcar el contingut en un node, per exemple tipus div, i llavors fer-ne ús.

Agraïments

Cal agrair la col·laboració de l'Àlex Royo i d'en Choan per les solucions aportades a la part de Javascript.

Recursos relacionats

Comentaris

Comentat per demimismo el 04/05/07

Muy muy bueno :-)

¿Has probado a acceder a la propiedad innerHtml de un object en IE 6? Lo digo porque no tengo muy claro si Internet Explorer descarta esa parte del documento al parsear el html (por tanto no estaría disponible en el DOM)
Comentat per choan el 05/05/07
Demimismo: descarta y no descarta. En IE6 no es posible acceder al contenido alternativo usando métodos DOM (curiosamente –o no tanto–, el contenido alternativo no aparece en el árbol).

Ahora bien, traduciendo "Per aconseguir obtenir el contingut alternatiu caldrà usar innerHTML, volcar el contingut en un node, per exemple tipus div, i llavors fer-ne ús." a código, tenemos esto:
```
function getAlternate(o) {
   var div = document.createElement('div');
   div.innerHTML = o.innerHTML;
   return div.childNodes;
}
```
Que resuelve –sorprendentemente– la papeleta.
Comentat per demimismo el 07/05/07

Ok, muchas gracias por la aclaración choan :)

a.css

Menú