Qu'est ce que la balise object La balise object incorporer du contenu en HTML valide strict 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> 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> 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="autostart" value="0"> Blaise_objetc La balise objet - 1 -
alt : <a href="data/test.wav">test.wav</a> 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 Nous allons imbriquer un autre object comme contenu alternatif, pour les autres navigateurs qui utilisent la formulation standard : object imbriqués <object type="video/quicktime" data="data/test.mov" Çà 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. Blaise_objetc La balise objet - 2 -
Nous pouvons coder deux object, un spécialement pour IE, et un autre pour les navigateurs respecteux des standards : <! [if IE]> <![endif] > <! [if!ie]> <! > <object type="video/quicktime" data="data/test.mov" <! <![endif] > Mais comme IE7 corrige ce bug, je préfère les utiliser avec des object imbriqués : <! [if gte IE 7]> <! > <object type="video/quicktime" data="data/test.mov" <! <![endif] > <! [if lt IE 7]> <![endif] > Blaise_objetc La balise objet - 3 -
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 type="video/quicktime" data="data/test.mov" width="320" height="240" class="hiddenobjectforie"> 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é. Blaise_objetc La balise objet - 4 -
Essais Résultats résumés Tous les résultats pour divers navigateurs, avec quelques notes. série HTML Tests d'insertion de divers types de contenu en HTML 4.01 valide strict avec la balise object. types text o text/html (fichier html) o text/plain (fichier txt) o text/css (fichier css) o text/javascript (fichier js) o text/richtext (fichier rtf) o text/rtf (fichier rtf) o application/rtf (fichier rtf) types application o application/pdf (fichier pdf) o application/postscript (fichier ps) o application/vnd.oasis.opendocument.text (fichier odt) o application/vnd.oasis.opendocument.spreadsheet (fichier ods) o application/vnd.oasis.opendocument.presentation (fichier odp) o application/vnd.sun.xml.writer (fichier sxw) o application/vnd.sun.xml.calc (fichier sxc) o application/vnd.sun.xml.impress (fichier sxi) o application/msword (fichier doc) o application/vnd.ms excel (fichier xls) o application/vnd.ms powerpoint (fichier ppt) types video o video/mpeg (fichier mpg) o video/avi (fichier avi) o video/x ms wmv (fichier wmv) o video/quicktime (fichier mov) types audio o audio/x wav (fichier wav) o audio/mpeg (fichier mp3) o application/ogg (fichier ogg) o audio/x midi (fichier mid) divers autres types o image/svg+xml (fichier svg) o application/x shockwave flash (fichier swf) o audio/x pn realaudio plugin (fichier rm, avec commentaires IE) o audio/x pn realaudio plugin (fichier rm, masquer par CSS) o application/x java applet (applet java) o unknown/unknown, quelques tests avec un type mime factice. série XHTML Blaise_objetc La balise objet - 5 -
La formulation XHTML de object est quasiment la même qu'en HTML, la seule différence est que les balises param sont fermées. Néanmoins, voici la même série de test en XHTML 1.0 strict. Merci à Flore d'avoir effectuer les tests sous Safari, et à Cécile ceux sous IE Mac. Liens en relation définition de object définition de la balise object dans la Spécification HTML 4.01 du W3C définition de la balise object dans la Spécification HTML 4.01 du W3C (traduction française) object, référence microsoft sur MSDN. (pas beau, mais nécessaire) types mime liste de l'iana fichier mime.types du serveur Apache. liste du serveur IIS articles A List Apart: Articles: Bye Bye Embed A List Apart: Articles: Flash Satay Object Paranoia Ian Hixon : Embedding flash without <embed> XHTML Quicktime Object Universal XHTML Object Code Java applet using XHTML 'object' tag techniques commentaires conditionnels de IE About Conditional Comments, sur MSDN hacks CSS Star html Selector Bug css filters IE5/Mac Band Pass Filter Tantek Çelik : IE5/Mac Band Pass Filter tests similaires ESW Wiki : ObjectTestResults HTML Test for the <object> Tag mozilla.org : plugins test cases mozilla.org : OJI Object Tag Test Page Objects [HTML 4.0 Conformance Test] OBJECT test suite Valid Flash test java test page plugins liste pour navigateurs basés sur gecko (et opera) PluginDoc Flash Adobe : SWFObject Adobe : Scripting with Flash Player and ActiveX Adobe : Flash Satay Adobe : detect the presence of the Flash Player intégrer une animation Flash (fr) QuickTime HTML Scripting Guide for QuickTime Blaise_objetc La balise objet - 6 -
JavaScript Scripting Guide for QuickTime Windows Media Player Windows Media Player Control Reference Windows Media Player 10 SDK PARAM Tags Real Audio Web Page Embedding Embedded RealOne Player Controls RealNetworks Production Guide Java Using the object tag VLC Advanced use of VLC : The Mozilla plugin Blaise_objetc La balise objet - 7 -