comparte el articulo 

Añadir contenido Flash con SWFObject

Actualizado el 02/04/2012 < > 3 Cometarios

Resumen: Explicamos el uso de esta sencilla librería para añadir contenido Flash a nuestros sitios web.

Uno de los principales obstáculos que se presentan al manejar Flash en nuestros proyectos web, es el hecho de que el usuario debe tener el Plugin de Adobe instalado y actualizado para cada navegador que utiliza.

Esto es necesario para reproducir los archivos que hemos añadido a nuestro sitio, permitiendo al usuario experimentar de manera correcta lo que exponemos.

Debido a esta problemática muchos deciden abandonar el uso de Flash y recurrir a otros medios para exponer su información. Si actualmente te encuentras en una situación similar, trata de analizar todas las opciones antes de tomar una decisión que te lleve a cambiar la manera de presentar datos en tu sitio.

Considera que existen librerías que actúan como alternativa ante la situación, tal es el caso de SWFObject que te pueden ahorrar la molestia de tener que reemplazar todos tus archivos Flash en tu sitio, permitiéndote garantizar su carga aún cuando el usuario no cuente con el plugin instalado.

¿Qué es SWFObject

SWFObject es una librería de JavaScript que se encarga de implementar contenido Flash dentro de nuestros sitios, haciéndolo accesible desde cualquier navegador sin necesidad de tener algo más instalado.

Además de la facilidad que esto representa, SWFObject se encuentra apegado a los estándares web por lo que pasa sin ningún problema por los exámenes de validación.

Con este proyecto se busca unificar los métodos que actualmente existen para incluir contenido Flash, y de esa manera lograr un nuevo estándar en el desarrollo web para la incrustación de archivos Flash.

Uso de SWFObject

La librería ofrece dos maneras de poder añadir el reproductor de Flash en un sitio web. La primera es la clásica basada en etiquetas y se encarga de incrustar el Flash mediante contenido estático, por su parte el segundo método hace uso de JavaScript para cargar de manera dinámica el contenido evitando mecanismos que requieran activar algún control, dicho JavaScript se encuentra depositado en un archivo bastante pequeño de 9.5 Kb.

En esta ocasión utilizaremos el método dinámico, la segunda opción planteada, para empezar vamos a necesitar descargar la última versión disponible de la librería. Para ello puedes ir a su página de Google Code y descárgala, la página es http://code.google.com/p/swfobject/, y ahí puedes obtener el archivo del repositorio dando clic en la sección de “Downloads”.

Una vez descargado el archivo nos disponemos a empezar con la codificación, para este ejemplo utilizaremos una estructura HTML sencilla a la cual le iremos añadiendo los cambios necesarios. El primer cambio al código se verá reflejado al crear una capa div dentro de nuestro layout, este div será utilizado por SWFObject para incrustar el archivo o para mostrar un contenido alternativo, como un mensaje en caso de que el navegador no soporte Flash.

El código irá incrustado dentro de las etiquetas “body” y lucirá como el siguiente:

<div id="flashLaWebera">
   <p>Lo sentimos, tu navegador no soporta Flash.</p>
</div>

Después, dentro de nuestras etiquetas “head”, debemos añadir la librería que acabamos de descargar y para ello recurrimos al siguiente código:

<script type="text/javascript" src="swfobject.js"></script>

El siguiente paso consiste en incrustar el archivo Flash dentro de nuestro contenido, pero utilizando el mismo JavaScript. Para esto, haremos uso de la función “embedSWF” de la librería.

Dicha función cuenta con una serie de parámetros, dentro de los cuales cinco son de uso obligatorio para el correcto funcionamiento de la aplicación.

El primero de ellos es el nombre del archivo que queremos incrustar, después viene el nombre del elemento donde lo vamos a añadir, en este caso es “flashLaWebera” ya que es el nombre que le dimos a nuestro div, los siguientes dos parámetros son para especificar el ancho y alto del reproductor y finalmente esta la versión de Flash Player a utilizar.

<script type="text/javascript">swfobject.embedSWF('archivo_flash.swf', 'flashLaWebera', '500', '400', '11.0.0');</script>

Conclusión

Como se pudo apreciar este método no representa mayor reto que añadir un par de líneas a nuestro código, es rápido, fácil y ciertamente eficaz en situaciones donde el usuario no cuenta con el plugin para observar contenido Flash.

Si después de esto decidimos migrar tu contenido de Flash a otro tipo, es perfectamente razonable, puesto que existen muchas otras razones por las cuales hacerlo, pero si tu problema es solucionado por esta librería dale una oportunidad y te darás cuenta que las cosas resultarán más sencillas.

Publicado el 03/04/2012, última actualización 02/04/2012.

Contenido exclusivo de LaWebera.es. Prohibida su copia

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

Añadir Comentario (Subir al texto)

3 Cometarios

  1. Sandra

    El único problema es que si el usuario navega con el JavaScript desactivado, tampoco verá el vídeo. En unas estadísticas que encontré hace poco leí que el 10% de los usuarios lo desactivan..

    También es importante cara el uso de vídeos alojados en nuestro servidor, tener en cuenta el streaming, pues si recibimos muchas visitas y estamos en un hosting compartido, podemos consumir excesivos recursos, con lo que nos pueden suspender la cuenta. Sólo recomendaría vídeos alojados en el propio servidor a servidores dedicados o VPS muy potentes.

    Martes, 3 de abril 2012

  2. Verónica Milán

    O usar soluciones más adaptadas a este consumo masivo de recursos, como Amazon S3.

    Miércoles, 4 de abril 2012

  3. Sandra

    Sí, también hay CDNs como CloudFront, pero en todos estos casos, hay que tener en cuenta la LOPD.

    Miércoles, 4 de abril 2012

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras