Embed Sound and Video

Last update on: 05-08-2008
There are two tags that are used to embed multimedia files in web pages <object> and <embed>. The <embed> tag was introduced by Netscape to enable files that require plug-ins to view within a web page. The <embed> tag indicates that Netscape-style plug-ins (multimedia primarily) should be used to view embedded media. Unfortunately, <embed> isn't sanctioned by the World Wide Web Consortium (W3C) and can't be found in the official HTML standard.

The other tag, <object>, is officially sanctioned by the W3C. It was originally used by Internet Explorer to allow users to load ActiveX controls within a page. I'll talk about them more a bit later. Since then, browsers that use Netscape-style plug-ins have also added support for the <object> tag. The <embed> tag is only necessary for older browsers that use Netscape-style plug-ins (like old versions of Netscape).

Using the <embed> Element

Despite the fact that <embed> isn't in the HTML standard, Microsoft and Netscape continue to support it, mainly because many pages out there that still use it. The <embed> tag has no closing tag; however, it does support a number of attributes.

Unfortunately, despite the fact that most browsers support <embed>, they only have a handful of attributes in common. The good news is that each web browser ignores the attributes it doesn't understand, enabling you to include as many different attributes as you like. Because of this, it's best to rely on a set of attributes that will work in all cases, and use them religiously, including the others for added value. And, because the <embed> tag won't validate anyway, you don't have to worry about complying with standards with regard to the attributes either.

Let's explore the attributes you absolutely need to use the <embed> element:

<embed src="mymovie.avi" height="120" width="160" />

The src attribute contains the location of the multimedia file you want to embed in the web page. The height and width attributes specify the dimensions of the embedded file in pixels.

If you leave out the height and width attributes, the browser will determine how much space to reserve for the file. Unfortunately, this causes problems because each browser behaves differently. Internet Explorer will provide too small a space, and only part of the movie will be shown. Mozilla Firefox provides too much space, leaving lots of padding around the movie. In other words, you need to specify a height and width.

Some of the common <embed> Attributes Used in Internet Explorer and Mozilla Firefox:

Attribute	Description
align	Aligns the element in relation to the web page. Allowable values are absbottom, absmiddle, baseline, bottom, left, middle, right, texttop, and top.
height	The height of the element.
width	The width of the element.
src	The URL of the multimedia file.
pluginspage	The URL of the page where you can download the plug-in used to view this object.

Using the <object> Element:

According to the World Wide Web consortium, you should use the <object> element when embedding sound and video (among other things) in web pages.

To use the <object> element, start with the opening <object> tag and attributes, Next, include any content you want to display, such as a caption, and close the <object> element with the closing tag, as follows:

<object data="movie.mpeg" type="application/mpeg">
<object data="movie.mpeg" type="video/mpeg">
My homemade movie.
</object>

You also can cascade objects so that if one cannot be displayed, the browser keeps trying down the list.

<object data="movie.mpeg" type="video/mpeg">
  <object data="moviesplash.gif" type="image/gif">
</object>
My homemade movie.
</object>

<object data="movie.mpeg" type="video/mpeg">
  <param name="height" value="120" valuetype="data" />

  <param name="width" value="160" valuetype="data" />
My homemade movie.
</object>

The preceding code sets the height and width of the embedded object to 120 by 160 pixels. The parameters you supply via the <param> tag depend on the type of object you're embedding. For example, an audio file wouldn't have a height and width. For example, if you use the <object> tag to place a Flash movie on a page, the param elements will be used to specify the movie's URL, whether to play the movie when the page loads, and whether to loop through the movie continually or just play it once.

Combining <embed> and <object>

it is the way to make sure your page works for the widest possible audience.

<object classid="value" codebase="value" height="480" width="512"

 name="myname">
<param name="src" value="source location" />
<embed src="filename" height="480" width="512" name="myname" />
</object>

the key is that the Browsers that support <object> will ignore the <embed> tag if it's inside the <object> tag. Browsers that don't support <object> will ignore that tag and use the <embed> tag instead.

When you're embedding video or other multimedia content in your pages, you have to decide whether you care more about your pages being standards compliant or reaching the widest possible audience. The <object> tag works Microsoft Internet Explorer, Mozilla Firefox, and other current browsers, but not some old browsers. The <embed> tag fills in the gaps in browser coverage, but if you use it, your pages will not be considered valid.

Integrating Multimedia's lessons:

Embed Sound And Video
Embedding Flash Movies