Apuntes sobre la etiqueta <object>

sisi escribió esto a las 20:03

  1. Introducción.
  2. La etiqueta <object> y sus atributos.
  3. La etiqueta <param /> y sus atributos.
  4. Inserción correcta de archivos multimedia.
  5. Cambios en XHTML 2.0.
  6. Fuentes.

Introducción

Aunque la etiqueta <object> puede ser utilizada con multitud de propósitos: desde inserción de imágenes y otras páginas web hasta applets de java y aplicaciones Python , el uso que yo le doy está básicamente limitado a la inserción de archivos multimedia: vídeos de YouTube y Google, sonidos de GoEar y algunos vídeos caseros también en formato FLV. Por eso, no es mi intención hacer aquí un trabajo teórico, ni una aportación novedosa, sino más bien una compilación útil y práctica, basada en una lectura (más o menos) atenta de las recomendaciones del W3C y ampliada, en algunos casos, con información que he ido encontrado en Internet. El objetivo no es otro que conseguir un código XHTML válido para la inserción de nuestros contenidos multimedia, que funcione correctamente en los dos navegadores más comunes (IE Y Mozilla FIrefox). En concreto, las pruebas se han llevado a cabo con IE 7 y Firefox 2.0.
Hablar de “apuntes” no es casual; lejos de ser algo terminado, esta recopilación se ha concebido para que vaya cambiando en función de las ampliaciones y correcciones que vayan surgiendo.

La etiqueta <object> y sus atributos

La etiqueta <object> es una auténtica etiqueta multipropósito que sirve para insertar todo tipo de objetos:

  • imágenes; si no queremos recurrir a su etiqueta específica <img />
  • applets de Java; la etiqueta applet ha sido ya depreciada en favor de <object>
  • documentos HTML; en vez de utilizar marcos con iframe, aunque este método no está exento de “pegas” con IE.
  • scripts de Python
  • archivos multimedia; los famosos vídeos de YouTube, las músicas de GoEar, una animación flash …
  • … y un largo etcétera …

Estos son algunos de sus atributos más utilizados:

  • data: la localización del archivo en cuestión, es decir un URI del tipo: http://la-direccion/del/archivo/animacion.swf (swf por tratarse en el ejemplo de una animación flash). La dirección puede ser relativa, del tipo: /micarpetaflash/animación.swf.
  • codebase: si la dirección URI que proporcionamos en data es relativa, puede ser complementada con una dirección de base del tipo: http://misitio.com, pero esto no es necesario si el archivo se encuentra en el mismo sitio donde se encuentra la página web en la que lo insertamos. No es correcto, según el W3C, emplear este atributo para proporcionar una dirección de descarga del plugin necesario para ver nuestro “objeto”; lo correcto en este caso, es proporcionar esta información con un texto alternativo que se vería en lugar del objeto en el caso de no tener, por ejemplo, nuestro plugin de flash instalado.
  • type: el tipo MIME al que pertenece el objeto especificado en data . Con este dato le estamos diciendo al navegador de qué archivo se trata: si es, pongamos por caso, un documento HTML, un sonido en MP3 o una animación Flash (SWF). Hay que tener cuidado, ya que el tipo que pongamos aquí ha de ser, lógicamente, el mismo que el correspondiente a la extensión del archivo al que nos hemos referido en data.
    Tenéis aquí más información acerca de los tipos MIME: http://es.wikipedia.org/wiki/Multipurpose_Internet_Mail_Extensions
    Y una lista de todos los tipos MIME aceptados aquí:
    http://www.utoronto.ca/webdocs/HTMLdocs/Book/Book-3ed/appb/mimetype.html
  • standby: El mensaje que aparecerá mientras se carga el objeto en el navegador.
  • classid: identifica el tipo de objeto. Especifica la localización de la implementación de un objeto mediante un URI. Según el W3C, este atributo puede utilizarse junto o como alternativa a data, dependiendo del tipo de objeto. Se recomienda utilizar <param /> en su lugar.
  • codetype: Este atributo especifica el tipo esperado de contenido de datos cuando se carga el objeto especificado por classid. Este atributo es opcional pero se recomienda cuando se especifica classid ya que permite que el agente de usuario evite la carga de información de tipos de contenido que no soporta.

El URI utilizado en classid puede utilizar otro esquema de nombres que el habitual en HTML que, como se sabe, comienza con “http” .

El W3C da este ejemplo:

<object codetype="application/java-archive"
classid="java:program.start">
Texto alternativo.
</object>

En el que observamos que:

  1. Al emplear el atributo codetype evitamos que el navegador intente ejecutar una aplicación, proporcionada por classid, que no soporta.
  2. Para insertar un aplicación java se pueden emplear nombres que empiecen por “java”.

Si quisiéramos insertar un objeto utilizando la tecnología ActiveX propietaria de MS -esto es posible en el caso de una animación Flash o un vídeo Quicktime, entre otros formatos- usaríamos el esquema de nombres “clsid”. En este otro ejemplo, el atributo data localiza los datos a representar:

<object classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
data="http://www.acme.com/ole/reloj.stm">
Esta aplicación no está soportada.
</object>

El código proporcionado aquí por classid, es el identificador único del control ActiveX requerido por nuestro objeto. Más adelante diremos algo más acerca de estos controles ActiveX.

La etiqueta <param /> y sus atributos

Funcionando como “etiqueta hija” de object, con la etiqueta <param /> se especifican una serie de valores en tiempo de ejecución que el objeto utiliza para su funcionamiento.
Dos son sus atributos más utilizados:

  • name: el nombre del parámetro.
  • value: el valor del parámetro.

Un ejemplo de los más sencillos:
<param name="ancho" value="50" />

Estos atributos de <param /> , sus nombres y valores, dependen exclusivamente del objeto que se quiere mostrar en el navegador, de su fabricante, de la tecnología empleada … cada objeto usará unos parámetros determinados que se supone se pondrán a disposición de los usuarios.

Inserción correcta de archivos multimedia

Veamos ahora un ejemplo práctico y muy común del uso de <object>: la inserción de vídeos de Youtube.
Éste es el código que nos proporciona YouTube para insertar sus vídeos:

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/PN11ao9HxCI"></param><param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/PN11ao9HxCI" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>

Lo primero que nos llama la atención es el uso de la etiqueta <embed>. Creada por Netscape, la etiqueta <embed> permitió que los navegadores pudieran mostrar contenido multimedia mediante el uso de plugins específicos para cada tipo de archivo.
<embed> no sólo puede ser utilizada con navegadores tipo Netscape y Mozilla; IE también la soporta para invocar los plugins. De hecho, éste es el código que nos proporciona Google para insertar sus vídeos:

<embed style="width:400px; height:326px;" id="VideoPlayback" type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf?docId=1746706928639180990&hl=es" flashvars=""> </embed>

W3C ignoró el éxito de la etiqueta <embed> y creó otra mucho más potente y flexible: <object>, por lo que <embed> no pertenece al estándar HTML 4.01 y evitaremos totalmente su utilización.

Por su parte, MS ha preferido recurrir a un uso no estándar de la etiqueta <object>. Veamos un ejemplo que ilustra muy bien de qué estamos hablando. Éste es el código que proporciona GoEar para insertar sus canciones:

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

Como ya se ha mencionado, no es correcto utilizar codebase para proporcionar un URI de descarga de los archivos requeridos por el navegador para la reproducción de nuestro objeto y eso es precisamente lo que se hace aquí, al enlazar directamente a un archivo CAB que contiene el control ActiveX propiedad de MS.
Un archivo CAB es, en realidad, un contenedor de archivos (CABinet) que contiene los componentes reales del OCX (OLE custom control), EXE o DLL necesarios para reproducir nuestro objeto. IE utiliza la información proporcionada por classid para saber si el componente ActiveX requerido está instalado en el ordenador; si no lo está, acude a la dirección proporcionada por codebase que apunta al archivo CAB correspondiente, lo descarga e instala (previo aviso) sin tener que reiniciar el navegador.
Las consecuencias de esto van más allá de una simple discusión teórica, ya que los navegadores basados en Mozilla no soportan este uso perverso de codebase (Windows Media Player es un excepción) y lo que hacen es ignorar totalmente la existencia de nuestro objeto. Esa es la razón por la que, tanto Youtube como GoEar incluyen además un código basado en <embed> éste sí, soportado por Mozilla.

Dicho todo esto y sin utilizar <embed>, ni codebase con oscuros propósitos ( ;-) ) , una propuesta de código correcto para insertar un vídeo de Youtube en nuestras páginas podría ser la siguiente:
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/PN11ao9HxCI" width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/PN11ao9HxCI" />
<param name="wmode" value="transparent" />
Esto es un vídeo de Youtube. Necesitas el plugin de Flash para visualizarlo: <a href="http://www.adobe.com/software/shockwaveplayer/">

http://www.adobe.com/software/shockwaveplayer/</a></object>

Esto es un vídeo de Youtube. Necesitas el plugin de Flash para visualizarlo: http://www.adobe.com/software/shockwaveplayer/

Un vídeo de Google. Probad a buscar cualquier parte del vídeo antes de que el buffering se complete; esto es posible en Google pero no en YouTube. Ya que éste último no incluye el código de tiempos entre los metadatos del vídeo FLV:

<object width="400" height="326" type="application/x-shockwave-flash" data="http://video.google.com/googleplayer.swf?docId=-1746706928639180990" ><param name="movie" value="http://video.google.com/googleplayer.swf?docId=-1746706928639180990" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="quality" value="best" />
<param name="scale" value="noScale" />
<param name="wmode" value="transparent" />
<param name="salign" value="TL" />
<param name="FlashVars" value="playerMode=embedded" />
Esto es un vídeo de GoogleVideo. Necesitas el plugin de Flash para visualizarlo: <a href="http://www.adobe.com/software/shockwaveplayer/">

http://www.adobe.com/software/shockwaveplayer/</a></object>

Esto es un vídeo de GoogleVideo. Necesitas el plugin de Flash para visualizarlo: http://www.adobe.com/software/shockwaveplayer/

Por último, nuestra canción de GoEar:

<object type="application/x-shockwave-flash" width="366" height="75" data="http://www.goear.com/files/external.swf?file=4241382">
<param name="movie" value="http://www.goear.com/files/external.swf?file=4241382" />
<param name="quality" value="high" />
Esto es un archivo de GoEar . Necesitas el plugin de Flash para visualizarlo ...y oírlo!:
<a href="http://www.adobe.com/software/shockwaveplayer/">

http://www.adobe.com/software/shockwaveplayer/</a></object>

Esto es un archivo de GoEar . Necesitas el plugin de Flash para visualizarlo ¡Y oirlo!: http://www.adobe.com/software/shockwaveplayer/

Todos estos códigos funcionan aceptablemente en Firefox 2.0 e IExplorer 7.

Cambios en XHTML 2.0

La etiqueta <object> va a a cambiar bastante en el futuro estándar de XHTML-2.0. Los parámetros más importantes cambian de nombre cobrando este nuevo aspecto:
<object
xml:base="http://www.example.com/"
src="mymovie.mpg"
srctype="video/mpeg">
This user agent cannot process this movie.
</object>

  • codebase se sustituiría por xml:base
  • data por src
  • type por srctype

Hay otras novedades con respecto a la sintaxis. Se puede consultar el documento completo aquí:
XHTML™ 2.0: Object Module

Fuentes:

  1. Como no: http://www.w3c.es/.
  2. Un artículo de obligada lectura: developer.mozilla.org: Usando el marcado correcto para llamar a los plugins.
  3. Una buena herramienta para conseguir código XHTML válido en nuestros vídeos de Youtube es:
    http://www.griptapethumb.com/tools/youtube/
  4. El futuro ya está aquí: http://www.w3.org/TR/xhtml2/
  5. Un buen artículo par aclarar ideas sobre el formato FLV: http://es.wikipedia.org/wiki/FLV
Comparte este artículo:
  • Meneame
  • del.icio.us
  • Digg
  • Facebook
  • TwitThis
  • Google
  • Live
  • E-mail this story to a friend!
  • Print this article!

15 comentarios en “Apuntes sobre la etiqueta <object>”


  1. kruzul dice:

    Muy bueno Sisifo: mirar luego despacito. Yo hasta ahora copié directamente tu código para los Youtube.

    (Tienes un br incordioso en el 5º enlace de las fuentes)


  2. sisifodichoso dice:

    Gracias Kruzul

    Creo que está corregido el error del enlace. Luego lo miro más despacio.
    Me interesa que se puebe el código y se vayan apuntando los pros y los contras … :hmm: cualquier cosa que se observe será bienvenida …


  3. Ana dice:

    ¡Qué currado! Muy bien, muy bien :gracias:
    Me temo que hasta septiembre no me lo voy a poder leer detenidamente, como merece, pero ¡qué guay, tía! :clap: :clap: :clap:


  4. sisifodichoso dice:

    No es tanto texto como parece Ana :jiji: (creo que me ha salido un poco tocho) , pero si pruebas, sin ninguna prisa, los códigos y me dices qué tal pues estupendo … :-D


  5. Alfonso dice:

    Chapooooooo!!!!!!!! Me quito el sombrero…. :clap::clap: :clap:

    Muy bueno, otro tema de conversación más para fardar en la maquina del café…

    ¡Jo, la cantidad de cosas que se aprenden en las visitas…!!!


  6. sisifodichoso dice:

    :jiji: :gracias: Al … todavía me queda por indagar algo más pero bueno, poco poco


  7. jose dice:

    Tengo un problema con wmode=transparent para opera, he puesto mi menu en una capa, y le he dado el wmode=transparent, funciona en IE, pero no en opera ni en Firefox, alguien podría darme una solucion, ya he probado sin capas e igual es lo mismo. Gracias y saludos


  8. sisi dice:

    Hola Jose,

    esa opción parece que sólo funciona en IE.
    Hay un artículo muy interesante aquí:
    http://www.cristalab.com/tips/21316/flash-transparente


  9. jose dice:

    :gracias: sisi, bueno ni modo, me pase tooooda la semana buscando una solución pero ya creo que debo resignarme, tendre que usar otro tipo de menu para mi pagina, que por cierto esta en reestructuración. Gracias nuevamente y saludos. :group:


  10. sisi dice:

    De nada

    saludos :-)


  11. yoli dice:

    hola


  12. yoli dice:

    :gracias: :gracias: :gracias: :dance3:


  13. Eduardito dice:

    Se puede usar esta etiqueta object para visualizar archivos pdf, como lo hacen en caso que se pueda, Gracias por su respuesta


  14. sisi dice:

    Hola Eduardito
    con la etiqueta object puedes insertar en tu página casi cualquier cosa indicando, claro está, el tipo de archivo que se trata …
    Otra cosa es visualizarlo, es decir, conseguir que el navegador lo interprete y lo muestre correctamente. Yo diría que para eso necesitas de una aplicación externa. El visor de PDF’s que utilices habitualmente, pero eso no es lo que tú buscas si es que te he entendido bien …

    Encontré este enlace que te puede interesar:
    http://joliclic.free.fr/html/object-tag/en/object-application.html

    Como ves,el resultado de insertar un PDF con object es un simple enlace al archivo que luego abrirá el visor que cada uno tenga instalado …

    Se me ocurre buscar la posibilidad de un lector de PDF ¿¿¿Hecho en flash??? insertarlo con object para ver tu archivo … pero ¿existe? … :hmm:

    Un saludo


  15. ola dice:

    :gracias: :o la: :o la: :o la: :o la: :o la: :o la: :o la: