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
is understandable by
QuickTime, autoplay
by Windows media Player and Real
Audio.
autoStart
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.
- text types
- text/html (html file)
- text/plain (txt file)
- text/css (css file)
- text/javascript (js file)
- text/richtext (rtf file)
- text/rtf (rtf file)
- application/rtf (rtf file)
- application types
- application/pdf (pdf file)
- application/postscript (ps file)
- application/vnd.oasis.opendocument.text (odt file)
- application/vnd.oasis.opendocument.spreadsheet (ods file)
- application/vnd.oasis.opendocument.presentation (odp file)
- application/vnd.sun.xml.writer (sxw file)
- application/vnd.sun.xml.calc (sxc file)
- application/vnd.sun.xml.impress (sxi file)
- application/msword (doc file)
- application/vnd.ms-excel (xls file)
- application/vnd.ms-powerpoint (ppt file)
- video types
- video/mpeg (mpg file)
- video/avi (avi file)
- video/x-ms-wmv (wmv file)
- video/quicktime (mov file)
- audio types
- audio/x-wav (wav file)
- audio/mpeg (mp3 file)
- application/ogg (ogg file)
- audio/x-midi (mid file)
- various others types
- image/svg+xml (svg file)
- application/x-shockwave-flash (swf file)
- audio/x-pn-realaudio-plugin (rm file, with IE comments)
- audio/x-pn-realaudio-plugin (rm file, hidden with CSS)
- application/x-java-applet (java applet)
- unknown/unknown, some tests with a dummy mime type.
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.