insérer des audio
La balise <object> est employée pour inclure des objets tels que les images, l'audio, les vidéos, les Java applets, L'ActiveX, le pdf, et le flash.
La balise <object> est employée pour inclure des objets tels que les images, l'audio, les vidéos, les Java applets, L'ActiveX, le pdf, et le flash.
Balise de fermeture obligatoire
La balise <object> définit un objet dans une page web xhtml (balise de type EN LIGNE).
Un objet peut être une animation flash, une applet java, un fichier audio...
La balise <object> a été prévu pour remplacer les éléments d'IMG et d'applet. Cependant, en raison des bogues et d'un manque d'appui de navigateur ceci ne s'est pas produit.
Exemple : Copier le code
<object type="application/x-shockwave-flash" data="/flash/animFlash.swf" width="831" height="143">
<param name="movie" value="/flash/animFlash.swf" />
<param name="quality" value="high" />"
<param name="wmode" value="transparent" />"
</object>
La colone DTD dan l tablau suivant indique dans quel HTML 4.01/XHTML 1,0 DTD l'attribut est autorisé:
S=Strict, T=Transitional, and F=Frameset.
| Attribut | Valeur | Description | DTD |
|---|---|---|---|
| align | left right top bottom |
Définit l'alignement des textes autour de l'objet | TF |
| archive | URL | Une liste séparée parespace d'URL aux archives. Les archives contiennent des ressources concernant l'objet | STF |
| border | pixels | Définit une frontière autour de l'objet | TF |
| classid | class_ID | Définit une valeur d'identification de classe comme place dans l'enregistrement de Windows ou un URL | STF |
| codebase | URL | Définit où trouver le code pour l'objet | STF |
| codetype | MIME_type | Le type de supports d'Internet du code s'est rapporté par l'attribut de classid | STF |
| data | URL | Définit un URL qui se rapporte aux données de l'objet | STF |
| declare | declare | Définit que l'objet devrait seulement être déclaré, non créé ou instancié jusqu'à ce que nécessaire | STF |
| height | pixels | Définit la taille de l'objet | STF |
| hspace | pixels | Définit l'espacement horizontal autour de l'objet | TF |
| name | name | Définit le nom pour un objet (pour employer en manuscrits) | STF |
| Standby | text | Définit un texte pour montrer tandis que l'objet charge | STF |
| type | MIME_type | Définit le type de MIME de données spécifiques dans l'attribut de données | STF |
| usemap | URL | Spécifie un URL d'une hyperimage de client-côté à employer avec l'objet | TF |
| vspace | pixels | Définit l'espacement vertical autour de l'objet | TF |
| width | pixels | Définit la largeur de l'objet | STF |
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.
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. Dans cette spécification, on emploie le terme « objet » pour désigner les choses qu’on peut mettre dans les documents HTML.
L'élément OBJECT 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.
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. Il peut également être un autre object, on parle de "d'object imbriqués".
Si le navigateur, ou un de ses plugins, sait interpréter ce document,
il le fait sinon le contenu imbriqué est affiché.
incorporer un document HTML
<object data="test.html" type="text/html" width="300" height="200">
alt : <a href="test.html">test.html</a>
</object>
incorporer un document pdf
<object data="test.pdf" type="application/pdf" width="300" height="200">
alt : <a href="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
Exemple : Copier le code
<object type="audio/x-wav" data="test.wav" width="200" height="20">
<param name="src" value="test.wav"/>
<param name="autoplay" value="false"/>
<param name="autoStart" value="0"/>
alt : <a href="test.wav">test.wav</a>
</object>
Le paramètre autoplay est compréhensible par QuickTime, autoStart par Windows Media Player et Real Audio.
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
Exemple : Copier le code
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
width="320" height="240">
<param name="src" value="test.mov" />
alt : <a href="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
Exemple : Copier le code
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
width="320" height="240">
<param name="src" value="test.mov" />
<param name="controller" value="true" />
<param name="autoplay" value="false"/>
<object type="video/quicktime" data="test.mov" width="320" height="240">
<param name="controller" value="true" />
<param name="autoplay" value="false"/>
alt : <a href="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.
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 objets, un spécialement pour IE, et un autre pour les navigateurs respectant les standards :
Exemple : Copier le code
<!--[if IE]>
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
width="320" height="240">
<param name="src" value="test.mov" />
<param name="controller" value="true" />
<param name="autoplay" value="false"/>
</object>
<![endif]-->
<!--[if !IE]> <!-->
<object type="video/quicktime" data="test.mov" width="320" height="240">
<param name="controller" value="true" />
<param name="autoplay" value="false"/>
alt : <a href="test.mov">test.mov</a>
</object>
<!--<![endif]-->
Mais comme IE7 corrige ce bug, il est préférable de les utiliser avec des objets imbriqués :
Exemple : Copier le code
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
width="320" height="240">
<param name="src" value="test.mov" />
<param name="controller" value="true" />
<param name="autoplay" value="false"/>
<!--[if gte IE 7]> <!-->
<object type="video/quicktime" data="test.mov" width="320" height="240">
<param name="controller" value="true" />
<param name="autoplay" value="false"/>
alt : <a href="test.mov">test.mov</a>
</object>
<!--<![endif]-->
<!--[if lt IE 7]>
alt : <a href="test.mov">test.mov</a>
<![endif]-->
</object>
Retour à l'accueil du site
Par carabde 10 mars 2014