joliclic code

[Version Française]

The object tag
- embed content in valid strict HTML -

What is the HTML object tag

A lot of people insert medias in their web page with the non-standard <embed> tag. But there is a standard tag for this insertion kind, <object> . Effectively this is not immediate to use it manner cross-browsers, but we'll see that there are some techniques for that practically all the browsers be able to understand the code.

The HTML 4.01 specification introduce the <object> element :

...HTML 4 introduces the OBJECT element, which offers an all-purpose solution to generic object inclusion. The OBJECT element allows HTML authors to specify everything required by an object for its presentation by a user agent: source code, initial values, and run-time data. In this specification, the term "object" is used to describe the things that people want to place in HTML documents; other commonly used terms for these things are: applets, plug-ins, media handlers, etc.

This element is designed to include any sort of document. We specify which sort with the type attribute indicating the mime type, and the source of the document with the data attribute indicating his URI.
If the browser, or one of his plugin, can interpret this document, it does it, otherwise the nested content of the object is displayed.
Any HTML code can be inserted as a alternative content, for example a link to the document or an image instead an animation. It can be also another alternative object, we talk about "nested object".

For a lot of type of document, that's all !

examples :

embed a HTML document

<object data="data/test.html" type="text/html" width="300" height="200">
  alt : <a href="data/test.html">test.html</a>
</object>

embed a pdf document

<object data="data/test.pdf" type="application/pdf" width="300" height="200">
  alt : <a href="data/test.pdf">test.pdf</a>
</object>

You can specify some parameters related to the document with the param tag. IE sometimes needs a src parameter to understand the location.

embed a wav document

<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>

The parameters autoplay is understandable by QuickTime, autoStart by Windows media Player and Real Audio.


More complicated cases

For some types, like QuickTime document, IE needs a non-standard value to the valid classid attribute, an identifier to load an associated activeX.

an only IE insertion of a QuickTime document

<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>

We 're going to nest another object as an alternative content, for the other browsers that use the standard formulation :

nested objects

<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>

It works, but unfortunately IE has a bug, it displays a blank zone for the second object.
This bug is resolved in IE7, but for older versions, we must hide this second object. We have two techniques to do it, the IE specific conditional comments, or by CSS.

Hide the nested object with IE conditional comments

IE5 introduce the conditional comments, that is very helpful to compensate IE bugs. This method isn't understandable by earlier versions of IE, but fortunately they are almost not used.

We can write two objects, one specially for IE, and another for the standards respectful browsers :

<!--[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]-->

But as IE7 corrects this bug, I prefer to use them with nested objects :

<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>

Hide the nested object with CSS

The other solution is to use some CSS hacks to hide the nested object. We must use a hack to create rules applied only by IE to hide the object, then another to render visible it again by IE Mac.

special class for IE (place it in a style tag on the head of the HTML document, or in a separate stylesheet)

/* hides the second object from all versions of IE */

* html object.hiddenObjectForIE { display: none; }

/* display the second object only for IE5 Mac */

/* IE Mac \*//*/
* html object.hiddenObjectForIE { display: inline; }
/**/

and apply this style to the nested object

<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>

This technic have some annoyances with java (and perhaps some other), a security alert is displayed on loading, and the alternative content of the nested object is also displayed.

Testcases

Summary results

All the results for various browsers, with some notes.

HTML suite

Tests to embed various types of content in valid strict HTML 4.01 with the object tag.

XHTML suite

XHTML formulation of the object is practically the same as HTML, the only differences is that the param tags are closed.
Nevertheless, here the same tests suite in XHTML 1.0 strict.

Thanks to Flore for the results of tests under Safari, And Cécile for those underIE Mac.

Please, excuse me for my bad english, it's not my natural language, if some parts of this page seems wrong to you, feel free to suggest me better ones.