Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P44 pot

Embedding Sound and Video



Embedding Sound and Video
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="a01607av.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.
There are some tricks to setting the
height and width properties properly. If you're presenting video,
setting the
height and width to the actual resolution of the movie causes the video to become crunched
because the controls are displayed in that space as well.
Figures 11.8 and 11.9 demonstrate the problem using the <embed> tags that follow:
Input
<embed src="a01607av.avi" type="video/x-msvideo" height="120" width="180" />

file:///G|/1/0672328860/ch11lev1sec3.html (1 von 16) [19.12.2006 13:49:25]
Embedding Sound and Video
Output
Figure 11.8. An embedded movie that does not include space for the plug-in's
controls.

Input
<embed src="a01607av.avi" type="video/x-msvideo" height="136" width="160" />

Output
Figure 11.9. An embedded movie with the proper proportions.
file:///G|/1/0672328860/ch11lev1sec3.html (2 von 16) [19.12.2006 13:49:25]
Embedding Sound and Video

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 6 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.
Table 11.1 summarizes the <embed> attributes supported by Internet Explorer.
Table 11.1. <embed> Attributes Used in Internet Explorer
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. This is the equivalent
of the
<img> tag's align attribute.
class
Sets or retrieves the class of the element. Used with CSS.
height
The height of the element.
id
The ID of the element. Used with JavaScript or CSS.
name
The name of the element. Used with JavaScript.
pluginspage
The URL of the page where you can download the plug-in used to view this object.
file:///G|/1/0672328860/ch11lev1sec3.html (3 von 16) [19.12.2006 13:49:25]
Embedding Sound and Video
src
The URL of the multimedia file.
style
Style sheet declaration.
title

The title of the element.
units
Sets or retrieves the height or width units. Pixels are the default unit of measurement.
unselectable
Specifies that the object cannot be selected. Valid values are on and off (the default is
off).
width
The width of the element.

Table 11.2 summarizes the <embed> attributes supported by Mozilla Firefox.
Table 11.2. <embed> Attributes Used in Mozilla Firefox
Attribute Description
src
The URL file location.
type
The MIME type of the multimedia file indicated by the src attribute.
pluginspage
A URL pointing to a web page that has instructions for installing the required plug-in.
pluginurl
A URL to a Java Archive (JAR) file.
align
Aligns the element in relation to the web page. Allowable values are left, right, top, and
bottom.
border
The width of a border drawn around the element.
frameborder
Does not draw a border around the element when set to no.
height
The height of the element.
width

The width of the element.
units
The units used to measure the height and width. Pixels are the default unit of
measurement.
hidden
Hides the element when set to true and displays it when set to false, which is the
default value.
hspace
The horizontal margin around the element.
vspace
The vertical margin around the element.
name
The name of the plug-in required to play the file.
palette
For use in Windows only. foreground makes the plug-in use the foreground palette,
whereas
background (the default) makes the plug-in use the background palette.

In addition to these attributes, additional attributes might be available for specific plug-ins, such as the
file:///G|/1/0672328860/ch11lev1sec3.html (4 von 16) [19.12.2006 13:49:25]
Embedding Sound and Video
Macromedia Flash Player.
Finally, you can include the
noembed element to provide support for visitors who do not have a web
browser that can display plug-ins:
<noembed>This Web page requires a browser that can display objects.</noembed>
<embed
The bottom line on <embed> is that these days it makes no sense to use it alone to embed a multimedia
file in a page. It is still used in conjunction with
<object> in order to support the widest range of

browsers. I'll discuss that technique a bit further on.
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. The only catch is you may run into problems if
your user is running Netscape Navigator 4 (or an even older browser). If you must support these users,
you need to use the
<embed> tag along with <object>.
To use the
<object> element, start with the opening <object> tag and attributes, as follows:
<object data="movie.mpeg" type="application/mpeg">

The data attribute is the URL for the source file for your sound or video, and type is the MIME type of the
file.
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="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> also uses the param element to initialize any parameters the embedded file might require. The
param element is included in the body of the <object> element and does not require a closing tag:
<object data="movie.mpeg" type="video/mpeg">

<param name="height" value="120" valuetype="data" />
<param name="width" value="160" valuetype="data" />
file:///G|/1/0672328860/ch11lev1sec3.html (5 von 16) [19.12.2006 13:49:25]
Embedding Sound and Video
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. I'll explain which parameters are required by some popular media types later in this lesson.
Combining <embed> and <object>
As you'll see in the next few sections, you can use <embed> and <object> simultaneously to make sure
your page works for the widest possible audience. The key to this approach is to include the
<embed> tag
within the
<object> tag. Here's an example:
<object classid="value" codebase="value" height="480" width="512"
name="myname">
<param name="src" value="source location" />
<embed filename" height="480" width="512" name="myname" />
</object>

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.
Embedding Flash Movies
The Flash author tool can produce the HTML to embed your movies within a page for you, but I want to
explain how to create it manually as well. Here's a template for embedding a Flash movie:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase=" /> cab#version=6,0,40,0"
width="550" height="400" id="myMovieName">
<param name="movie" value="myFlashMovie.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<embed src="myFlashMovie.swf" quality="high"
bgcolor="#FFFFFF" width="550" height="400" name="myMovieName" align=""
type="application/x-shockwave-flash"
pluginspage=" />
</object>

file:///G|/1/0672328860/ch11lev1sec3.html (6 von 16) [19.12.2006 13:49:25]
Embedding Sound and Video
Notice that Flash uses both the <object> and <embed> elements to embed the animation in a web page.
To use this template, you need to set the
height and width attributes of the <object> and the <embed>
tag to the appropriate size for your movie. You also have to set the
value attribute of the movie

parameter to the URL for your movie. Finally, you have to set the
src in the <embed> tag to that URL,
and optionally update the name of the movie in the
<embed> tag as well.
Table 11.3 contains a full list of <embed> attributes. Table 11.4 contains a list of <object> parameters.
Table 11.5 contains a list of attributes that work with both <embed> and <object>.
Table 11.3. <embed> Attributes Supported by Flash
Attribute Description
src
The URL file location. Required.
pluginspage
The URL for the Flash download page. Required.
name
The name of the movie. You can use this name to access the movie via JavaScript.

Table 11.4. <object> Attributes Supported by the Flash Player
Attribute Description
classid
Identifies the ActiveX control (always the same value). Required.
codebase
Download location for the Flash player (always the same value). Required.
movie
The URL for the movie. Required.
id
An identifier for the element that can be used to access it via JavaScript.

Table 11.5. Attributes of Both <embed> and <object> Supported by the Flash
Player
Attribute Description
height

The height of the movie (in pixels or percentage of window size). Required.
width
The width of the movie (in pixels or percentage of the window size). Required.
align
Aligns the element in relation to the web page. Allowable values are left, right, top,
and
bottom.
file:///G|/1/0672328860/ch11lev1sec3.html (7 von 16) [19.12.2006 13:49:25]
Embedding Sound and Video
swliveconnect
True or false value that indicates whether or not to start Java when the plug-in is
loaded. (This should be set to false unless you are using FSCommand features.)
play
True or false value that indicates whether the movie should start playing as soon as
the page is loaded. The default is true.
loop
True or false value that indicates whether the movie should loop (start playing again
when it finishes). Defaults to true.
menu
True or false value that specifies whether the user can access all of the Flash player's
contextual menu options when playing a movie. Defaults to false.
quality
Settings are low, autolow, autohigh, medium, high, and best. For more information, see
the Flash documentation.
scale
Specifies how to handle cases where the movie is a different size than the height and
width attributes. showall (the default) preserves the aspect ratio of the movie but sizes
it as best it can in the space provided.
noborder fills the entire space specified,
preserving the movie's aspect ratio and cropping if necessary.

exactfit stretches the
movie to fit in the space provided, ignoring the aspect ratio.
salign
Specifies how the movie is aligned in a browser window, typically used with pop-up
windows. For more information, see the Flash documentation.
wmode
Specifies how transparent portions of a Flash movie are handled. Values are window,
opaque, and transparent.
bgcolor
Sets the background color of the Flash movie, overriding the setting in the movie.
base
Specifies the base URL for the Flash movie. Used by Flash movies that contain
references to external files.
flashvars
Variables passed to the Flash player from the page.

Embedding RealAudio and RealVideo
Integrating RealAudio and RealVideo files into pages is a bit different than integrating Flash because
RealAudio files do not necessarily require any space on the screen. That said, you can write your HTML
so that RealAudio controls are integrated into your web page.
<object id="RVOCX" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"
width="320" height="240">
<param name="SRC" value="plugin.rpm" />
<param name="CONTROLS" value="ImageWindow" />
<param name="CONSOLE" value="one" />
<embed
controls="ImageWindow" console="one" />
</object>

As you can see, unlike Flash, RealPlayer uses the src parameter to specify the location of the file to be

displayed. The code above will show the video with no controls displayed at all. If you only wanted to
show the controls for an audio file (or video file), you would use the following HTML:
<object id="RVOCX"
classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"
file:///G|/1/0672328860/ch11lev1sec3.html (8 von 16) [19.12.2006 13:49:25]
Embedding Sound and Video
width="350" height="36">
<param name="CONTROLS" value="ControlPanel" />
<param name="CONSOLE" value="one" />
<embed src="plugin.rpm" width="350" height="36"
nojava="true" controls="ControlPanel" console="one" />
</object>

Table 11.6 lists the available attributes for <object> and the parameters (<param name="name"
value="value" />
) for the <object> element.
Table 11.6. <embed> Attributes and <object> Parameters
Attribute/Parameter Description
autostart
Sets automatic playback (true or false).
backgroundcolor
Sets background color (hexadecimal color value or name).
center
Centers clip in window (TRue or false).
console
Links multiple controls (yes, name, master, or unique).
controls
Adds RealPlayer controls (control name).
height
Sets window or control height (in pixels or percentage).

loop
Loops clips indefinitely (true or false).
maintainaspect
Preserves image aspect ratio (true or false).
nojava
Prevents the Java Virtual Machine from starting (true or false).
nolabels
Suppresses presentation information (TRue or false).
nologo
Suppresses Real logo (true or false).
numloop
Loops clip a given number of times (number).
region
Ties clip to SMIL region (SMIL region).
shuffle
Randomizes playback (true or false).
src
Specifies source clip (URL).
width
Sets window or control width (in pixels or percentage).

Multimedia Techniques
Microsoft Internet Explorer offers a few unique capabilities worth mentioning: background sounds and
inline video. Note, however, that neither of these techniques is part of the HTML standard. You can use
style sheets to hide
<object> elements on your pages, so there's no need to use this technique to
include background audio on a page. You can also include inline video on a page using
<object>. I'm just
describing these elements so that you know what they are if you see them.
file:///G|/1/0672328860/ch11lev1sec3.html (9 von 16) [19.12.2006 13:49:25]

Embedding Sound and Video
Including Background Sounds
Internet Explorer supports an element that loads and plays audio files in the background. These sound
files load when the page loads, and they play automatically. Because no visual effect is created, there
will be no indication that a sound is playing unless the users have speakers and they're not muted. The
<bgsound> element is used as follows:
<bgsound
Use the loop attribute to repeat the sound multiple times. If the value of loop is a number, the sound is
played that number of times. If
loop is 1 or infinite, the sound will repeat continually until the visitor
leaves the page.
<bgsound src="ElevatorMusic.wav" loop="-1" />

Explorer supports three different formats for inline sounds: Sun's popular AU format, Windows WAV
files, and MIDI files with a
MID extension.
Tip
If you include sound on a page, be sure to provide a way for users to turn it off. If they
spend any time at all on your page, the sound might start to irritate them. Even better,
don't use auto play to start it without permission. Let them control the audio themselves.

Inline Video with dynsrc
You can integrate video clips (AVI or MPEG) into web pages displayed in Microsoft Internet Explorer 4 and
above by using the
dynsrc attribute in the <img> element, as in the following simple syntax:
<img dynsrc="a01607av.avi" loop="2" start="fileopen" />

In the previous line of code, Internet Explorer will play the video clip, indicated by the dynsrc attribute,
two times after the web page finishes loading. The
loop attribute specifies the number of times to play

the video clip, with one time being the default value. To play the clip indefinitely, use
1 instead. The
start attribute defines when the video clip starts playing. You can choose from fileopen, which is the
default, or
mouseover, which plays the video when a person moves her mouse over the video.
Because you're using the
<img> element, you can use other <img> attributes, such as alt, align, border,
height, width, and so on, to format the video clip.
To make this compatible with other browsers, you should use the
src attribute to designate a static GIF
or
JPG image that will be displayed in place of the video. The code would resemble the following:
file:///G|/1/0672328860/ch11lev1sec3.html (10 von 16) [19.12.2006 13:49:25]