<object> and <embed> have been the traditional means of embedding multimedia in web pages since the inception of HTML4; <audio> and <video> tags, introduced with HTML5, are beginning to threaten their relevance. However, the <object> tag still has its place.

<object>: the original, catch-all solution for web multimedia

As the web matured, it became obvious that developers wished to include more than text and bitmapped images on web pages. However, it was not reasonable to expect that HTML could be expanded with tags to cover every different form of multimedia such as video, audio, 3D, and interactive content. At the same time, programmers could not be expected to release a new version of a web browser to support every new rich media format as it came along.

To meet both of these challenges, a catch-all <object> tag was developed. Under this scheme, the browser would continue to handle what it was built for: interpretation of HTML and CSS, and display of text and graphics. If it encountered an <object> tag on a page, the browser, unable to recognize the content inside, would pass the object and its content to an associated helper application, typically referred to as a plugin.

While this introduced many issues of its own, including the fact that the user would become responsible for downloading, installing, maintaining and upgrading plugins, along with their associated security issues, and (most importantly) the fact that browsers without the appropriate plugin would completely ignore whatever content was inside an associated <object> tag, it did solve the immediate problem of adding rich media to the web.

As this was still the time of the “browser wars”, there was, of course, an alternative: the <embed> tag, which had been introduced by Netscape before <object>. Both tags fulfilled the exact same functionality. For reasons of backwards compatibility with very old browsers, you will sometimes see the <embed> tag wrapped inside <object>, but technically only <object> needs to be used. Adding to the confusion, we often refer to the process of adding rich media as “embedding” multimedia on a web page. The term “embedding” is used generically, and does not specifically refer to the <embed> tag.

<object> tag syntax

The <object> tag is closed and requires several attributes. It also contains <param /> tags within it that provide more information regarding how the embedded media should be treated. For example, a Quicktime .mov file:

1. <object type="video/quicktime"
2. data="assets/video/diables.mov" style=”width: 320px; height: 256px;">
3. <param name="autoplay" value="false" />
4. <param name="controller" value="true" />
5. </object>

The data attribute value is the source of the media to be presented; you will sometimes see this alternatively presented as the src attribute. In addition, WYSIWYG programs like DreamWeaver will often add a classid attribute to the object tag: this is a nod to ActiveX controls for Internet Explorer. Under early versions of IE each media format required a particular ID, similar to a serial number, to be used as a value for classid. If you are okay with targetting IE7 and above, this can be dropped.

While many parameter names and values are common in various uses of <object> (autoplay and controller are typically used when embedding video or audio), some will be unique. To do a thorough job, you will need to consult references for each media format you wish to embed (for example, Quicktime and Flash).