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

Attributes Used in Internet Explorer Attribute Description align Aligns the element in relation to the web page.. To use the element, start with the opening tag and attributes, as foll

Trang 1

Embedding Sound and Video

There are two tags that are used to embed multimedia files in web pages<object> and <embed> The

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

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

Trang 2

Figure 11.8 An embedded movie that does not include space for the plug-in's

controls.

Input

Output

Figure 11.9 An embedded movie with the proper proportions.

Trang 3

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

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

Trang 4

src The URL of the multimedia file.

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)

Table 11.2 summarizes the <embed> attributes supported by Mozilla Firefox

Table 11.2 <embed> Attributes Used in Mozilla Firefox Attribute Description

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

frameborder Does not draw a border around the element when set to no

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

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

Trang 5

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>

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="moviesplash.gif" type="image/gif">

</object>

My homemade movie

</object>

param element is included in the body of the <object> element and does not require a closing tag:

<param name="height" value="120" valuetype="data" />

<param name="width" value="160" valuetype="data" />

Trang 6

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 src="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="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.

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="http://www.macromedia.com/go/getflashplayer" />

</object>

Trang 7

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

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

align Aligns the element in relation to the web page Allowable values are left, right, top,

and bottom

Trang 8

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

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

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 src="plugin.rpm" width="320" height="240" nojava="true"

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"

Trang 9

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

console Links multiple controls (yes, name, master, or unique)

maintainaspect Preserves image aspect ratio (true or false)

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

Trang 10

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 src="ElevatorMusic.wav" />

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

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:

Định dạng
Số trang	10
Dung lượng	114,51 KB