adobe flash player

Insertar archivo flash con html valido

Hoy te voy a explicar como insertar archivo flash con html valido cuando compilamos películas, animaciones o banners para nuestra página web.

Es normal que el código html generado por las diferentes versiones del flash no pasen la prueba de validación ante el W3C por culpa de las etiquetas usadas.

flash html valido w3c

Después de investigar bastante sobre como solucionar el problema. Encontré la forma correcta de insertar archivos flash que se ejecuten en los distintos navegadores y además que la web valide la prueba de la W3C. El siguiente ejemplo cumple con todos esos requisitos.

Normalmente, cuando insertamos una película en una página web nos encontramos con que el código HTML generado por el mismísimo flash es algo más o menos como esto:

<object name="movie" width="30" height="30" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/
	cabs/flash/swflash.cab#version=6,0,29,0">
    <param name="quality" value="high">
        <embed src="animaciones/animacion01.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="30" height="30">
</object>

Como insertar un flash correctamente

Es una verdadera ensalada, así que investigando un poco se puede convertir en algo más simple, más limpio y que además valide, tomando las siguientes acciones:

  • Hay que deshacerse de la etiqueta <embed> que no es parte de la especificación de HTML y por lo tanto no valida. Es una etiqueta creada por Netscape para mostrar plugins y reproductores y que actualmente puede ser reemplazada.
  • El valor de classid es para indicarle al Internet Explorer que tipo de reproductor usar. Por suerte, el Flash Player responde perfectamente bien a los tipos MIME como por ejemplo: type=»application/x-shockwave-flash». Así que también podemos deshacernos del classid.
  • El valor de codebase normalmente apunta al servidor de Adobe donde se encuentra el plugin de flash e indica la versión. Para actualizarlo cuando se detecta una versión antigua del plugin. Esta comprobación se podría hacer, al ingresar al sitio, así que también se puede eliminar.
  • Y por último, tenemos que agregar un valor en el parámetro data para indicarle a los navegadores como Mozilla y Opera donde se encuentra la película que estamos insertando. Porque estos navegadores no pueden tomar este valor desde el elemento <param>.

Finalmente, una vez que realizamos estos pasos, tenemos un código más limpio y claro para poder insertar películas en flash y que la página web pase por el validador de la W3C sin problemas:

<object data="animaciones/animacion01.swf" type="application/x-shockwave-flash" width="30" height="30">
<param name="movie" value="animaciones/animacion01.swf">
<param name="quality" value="high">
</object>

Internet Explorer siempre tiene un pero

El único inconveniente con este código es que el Internet Explorer no hace streaming. Es decir que no comienza la reproducción de la película hasta que no se descargue por completo.

En pequeñas animaciones o banners esto no es importante, pero si se trata de una aplicación o un sitio completamente en flash eso puede influir.

Por suerte, existe una solución para poder corregir este problema del explorer. Es el llamado Método Satay, que consiste en crear una nueva película y en el primer fotograma llamar mediante actionscript a la película principal. Pero eso excede bastante el espíritu de este ejemplo.


Si te gustó o te entretuvo el contenido de este posteo, haciendo un click en los avisos me ayudas a mantener el sitio con vida y a seguir publicando.

Y si quieres ganar algo de dinero sin esfuerzo, registrate en IPRoyal desde este banner y recibí 1 dolar de regalo al comenzar a usar la aplicación para generar ingresos pasivos.

ingresos pasivos Pawns.app

Acá puedes conocer más sobre ingresos pasivos, que es y como funciona IPRoyal Pawns.

Un comentario en «Insertar archivo flash con html valido»

  1. Hola!

    Me tope con un problema similar al tuyo y lo solucione basandome en tu aportacion:

    Donde id=»object1″ es un «parche» para que el IE interprete bien el codigo.

    Saludos, y espero les sirva mi comentario…

Deja un comentario