Ver Mensaje Individual
  #67 (permalink)  
Antiguo 09/07/2010, 01:54
Avatar de emprear
emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 12 años, 11 meses
Puntos: 1567
Insertar Flash XHTML válido - CrossBrowser

Ultimamente he visto muchas preguntas acerca de insertar contenido Flash en nuestras páginas, que valide como XHTML y sea compatible con los principales navegadores.
Muchos se inclinan por la utilización de una librería JavaScript llamada SWFOject ó bien por un método alternativo, que requiere de los condicionales para IE y un swf extra(método Satay)
El siguiente método sólo utiliza HTML , no necesita de condicional alguno y valida para XHTML 1.0 Strict.


Código HTML:
Ver original
  1. <object type="application/x-shockwave-flash" data="b.swf" width="400" height="300">
  2.       <param name="movie" value="b.swf" />
  3.       <param name="loop" value="false" />
  4.       <param name="menu" value="true" />
  5.       <param name="play" value="true" />
  6.       <param name="bgcolor" value="#8897db" />
  7.  
  8.       <p>Flash Player no se encuentra o la versión no es compatible, utiliza el siguiente link para ir a la página de descarga <br />
  9. <a href="http://get.adobe.com/es/flashplayer/" onclick="this.target='_blank'">Descargar Flash Player</a>
  10. </p>

Compatible con IE6+ - Firefox 3.4+ - Chrome - Opera 10+ - Safari 4

Sólo requiere de un pequeño javascript adicional para eliminar el molesto
"haga click aquí para activar este control" que Opera 10 aún sigue mostrando.

fix-object.js

Código Javascript:
Ver original
  1. /* jActivating v.1.1.2 (compressed) - http://jactivating.sourceforge.net */
  2. var jActivating = { isMSIE : (document.all && !window.opera) ? true : false, reinsertContent : function()
  3. { var totalNodes = new Array(3); totalNodes['object'] = document.getElementsByTagName('object').length; totalNodes['embed'] = document.getElementsByTagName('embed').length; totalNodes['applet'] = document.getElementsByTagName('applet').length; for(var tagName in totalNodes)
  4. { var counter = totalNodes[tagName] - 1; for(var node; node = document.getElementsByTagName(tagName)[counter]; counter--)
  5. { sourceCode = jActivating.getSourceCode(node); if(sourceCode)
  6. { node.outerHTML = sourceCode;}
  7. }
  8. }
  9. jActivating.isMSIE = null;}, getSourceCode : function(node)
  10. { var sourceCode = node.outerHTML; switch(node.nodeName.toLowerCase())
  11. { case 'embed':
  12. return sourceCode; break; case 'object':
  13. case 'applet':
  14. var openTag = sourceCode.substr(0, sourceCode.indexOf('>') + 1); var closeTag = sourceCode.substr(sourceCode.length - 9).toLowerCase(); if(closeTag != '</object>' && closeTag != '</applet>')
  15. { return null;}
  16. if(jActivating.isMSIE)
  17. { var innerCode = jActivating.getInnerCode(node); sourceCode = openTag + innerCode + closeTag;}
  18. return sourceCode; break;}
  19. }, getInnerCode : function(node)
  20. { var innerCode = ''; var totalChilds = node.childNodes.length - 1; for(var counter = totalChilds, child; child = node.childNodes[counter]; counter--)
  21. { innerCode += child.outerHTML;}
  22. return innerCode;}
  23. }
  24. if(document.attachEvent)
  25. { if(window.opera)
  26. { document.attachEvent("DOMContentLoaded", jActivating.reinsertContent);}
  27. else
  28. { jActivating.reinsertContent();}
  29. }

Y debe ser llamado dentro del Head de la siguiente manera

<script type="text/javascript" src="fix-object.js" defer="defer"></script>

Creo que es más sencillo y en cuanto a compatibilidad cubre las espectativas.

Les dejo una demo funcionando en

http://foros.emprear.com/flash/flash-xhtml.html

En este otro ejemplo, un flash al 100% de la pantalla.
http://foros.emprear.com/flash/flash-xhtml100.html
Saludos

Última edición por emprear; 25/03/2012 a las 23:55 Razón: agregado flash al 100%