Qu`est ce que la balise object

Qu'est ce que la balise object
Beaucoup de monde insère des médias dans leur page web avec la balise non standard
<embed>. Pourtant il existe une balise standardisée pour ce genre d'insertion, la balise
<object>. Effectivement il n'est pas immédiat de l'utiliser de manière inter-navigateurs, mais
nous allons voir qu'il existe des techniques pour que quasiment tous les navigateurs puissent
interpréter le code.
La spécification HTML 4.01 présente l'élément <object> ainsi :
...HTML 4 introduit l'élément OBJECT, qui offre une solution générale aux inclusions
d'objets génériques. L'élément OBJECT permet aux auteurs HTML de spécifier tout ce que
l'objet requiert pour sa présentation par un agent utilisateur : le code source, les valeurs
initiales et les données d'exécution [ndt. run-time data]. Dans cette spécification, on emploie
le terme « objet » pour désigner les choses que les personnes mettent dans les documents
HTML ; les termes usuels courants pour ces choses sont : les applets, les modules d'extension
[ndt. plug-ins], les gestionnaires de média [ndt. media handlers], etc.
Cet élément est conçu pour insérer toute sorte de document. On spécifie de quelle sorte avec
l'attribut type en indiquant le type mime, et la source du document avec l'attribut data en
indiquant son URI. Si le navigateur, ou un de ses plugins, sait interpréter ce document, il le
fait sinon le contenu imbriqué est affiché. Tout code HTML peut être insérer comme contenu
alternatif, par exemple un lien vers le document, ou une image à la place d'une animation. Ce
peut également être un autre object, on parle de "d'object imbriqués".
Pour beaucoup de types de document, c'est tout !
exemples :
incorporer un document HTML
<object data="data/test.html" type="text/html" width="300" height="200">
alt : <a href="data/test.html">test.html</a>
</object>
incorporer un document pdf
<object data="data/test.pdf" type="application/pdf" width="300"
height="200">
alt : <a href="data/test.pdf">test.pdf</a>
</object>
Vous pouver spécifier des paramètres relatifs au document par l'intermédiaire de la balise
param. IE a parfois besoin du paramètre src pour localiser correctement la source.
incorporer un document wav
<object type="audio/x-wav" data="data/test.wav" width="200" height="20">
<param name="src" value="data/test.wav">
<param name="autoplay" value="false">
<param name="autoStart" value="0">
alt : <a href="data/test.wav">test.wav</a>
</object>
Le paramètre autoplay est compréhensible par QuickTime, autoStart par Windows Media
Player et Real Audio.
Cas plus compliqués
Pour certains types, comme les documents QuickTime, IE a besoin d'une valeur non standard
pour l'attribut standard classid, un identifiant pour charger un activeX associé.
insertion d'un document QuickTime uniquement pour IE
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
width="320" height="240">
<param name="src" value="data/test.mov" >
alt : <a href="data/test.mov">test.mov</a>
</object>
Nous allons imbriquer un autre object comme contenu alternatif, pour les autres navigateurs
qui utilisent la formulation standard :
object imbriqués
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
width="320" height="240">
<param name="src" value="data/test.mov" >
<param name="controller" value="true" >
<param name="autoplay" value="false">
<object type="video/quicktime" data="data/test.mov" width="320"
height="240">
<param name="controller" value="true" >
<param name="autoplay" value="false">
alt : <a href="data/test.mov">test.mov</a>
</object>
</object>
Çà marche, mais malheureusement IE a un bogue, il affiche une zone vierge pour le second
object.
Ce bug est résolu dans IE7, mais pour les versions plus anciennes, nous devons masquer ce
second object. Pour celà nous avons deux techniques, les commentaires conditionnels de IE,
ou par les CSS.
Masquer l'object imbriqué avec les commentaires conditionnels d'IE
IE5 introduit les commentaires conditionnels, qui sont bien pratiques pour compenser les
bogues d'IE. Cette méthode n'est pas compréhensible par les versions plus anciennes d'IE,
mais heureusement elles ne sont presque plus utilisées.
Nous pouvons coder deux object, un spécialement pour IE, et un autre pour les navigateurs
respecteux des standards :
<!--[if IE]>
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
width="320" height="240">
<param name="src" value="data/test.mov" >
<param name="controller" value="true" >
<param name="autoplay" value="false">
</object>
<![endif]-->
<!--[if !IE]> <!-->
<object type="video/quicktime" data="data/test.mov" width="320"
height="240">
<param name="controller" value="true" >
<param name="autoplay" value="false">
alt : <a href="data/test.mov">test.mov</a>
</object>
<!--<![endif]-->
Mais comme IE7 corrige ce bug, je préfère les utiliser avec des object imbriqués :
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
width="320" height="240">
<param name="src" value="data/test.mov" >
<param name="controller" value="true" >
<param name="autoplay" value="false">
<!--[if gte IE 7]> <!-->
<object type="video/quicktime" data="data/test.mov" width="320"
height="240">
<param name="controller" value="true" >
<param name="autoplay" value="false">
alt : <a href="data/test.mov">test.mov</a>
</object>
<!--<![endif]-->
<!--[if lt IE 7]>
alt : <a href="data/test.mov">test.mov</a>
<![endif]-->
</object>
Masquer l'object imbriqué par les CSS
L'autre solution est d'utiliser quelques hacks CSS pour masquer l'object imbriqué. Nous
devons utiliser un hack pour créer des règles appliquées uniquement par IE pour masquer
l'object, et un autre pour le rendre de nouveau visible à IE Mac.
classe spéciale pour IE (placer la dans une balise style dans le head du document HTML, ou
dans une feuille de style liée)
/* masquer le deuxième object pour toutes les versions de IE */
* html object.hiddenObjectForIE { display: none; }
/* afficher le deuxième object uniquement pour IE Mac */
/* IE Mac \*//*/
* html object.hiddenObjectForIE { display: inline; }
/**/
et appliquer ce style à l'objet imbriqué
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
width="320" height="240">
<param name="src" value="data/test.mov" >
<param name="controller" value="true" >
<param name="autoplay" value="false">
<object type="video/quicktime" data="data/test.mov"
width="320" height="240"
class="hiddenObjectForIE">
<param name="controller" value="true" >
<param name="autoplay" value="false">
alt : <a href="data/test.mov">test.mov</a>
</object>
</object>
Cette technique pose quelque problème avec les documents java (et peut être quelques autres),
une alerte de sécurité est affichée au chargement, et le contenu alternatif est également
affiché.