demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Web Multimedia: The object Tag

html / multimedia

Estimated reading time: 2 minutes, 10 seconds

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

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.