<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:
<object type="video/quicktime" data="assets/video/diables.mov" style="width: 320px; height: 256px;:>
<param name="autoplay" value="false">
<param name="controller" value="true">
</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.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.