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="/books/2/631/1/html/2/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="/books/2/631/1/html/2/a01607av.avi" type="video/x-msvideo" height="120" width="180" />


Output

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


Input

<embed src="/books/2/631/1/html/2/a01607av.avi" type="video/x-msvideo" height="136" width="160" />


Output

Figure 11.9. An embedded movie with the proper proportions.


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.

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 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 src="/books/2/631/1/html/2/a01607av.avi" height="120" width="160" />


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" /> 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 classdocEmphasis">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 class codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.      cab#version=6,0,40,0" width="550" height="400" >     <param name="movie" value="myFlashMovie.swf" />     <param name="quality" value="high" />     <param name="bgcolor" value="#FFFFFF" />     <embed src="/books/2/631/1/html/2/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>


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.

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  class      width="320" height="240">   <param name="SRC" value="plugin.rpm" />   <param name="CONTROLS" value="ImageWindow" />   <param name="CONSOLE" value="one" />   <embed src="/books/2/631/1/html/2/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    class   width="350" height="36">   <param name="CONTROLS" value="ControlPanel" />   <param name="CONSOLE" value="one" />   <embed src="/books/2/631/1/html/2/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.

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="/books/2/631/1/html/2/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="/books/2/631/1/html/2/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="/books/2/631/1/html/2/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:

<img src="/books/2/631/1/html/2/a01607av.gif" dynsrc="/books/2/631/1/html/2/a01607av.avi" loop="2" start="fileopen" />


Internet Explorer will ignore the value of the src attribute as long as the video supplied by dynsrc is valid.

Task: Exercise 11.2. Embedding a QuickTime Movie

For your second exercise, you'll try your hand at embedding a QuickTime movie in a web page. QuickTime is a video format created by Apple. Apple recommends that you use the combination of the <object> and <embed> tags that I've discussed in this lesson.

For starters, create or open a web page template similar to the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <title></title> </head> <body> </body> </html>


From here, title the page and add a <div> element that you will use to center everything on the page.

Next, add a heading that appropriately describes the video and a title for the video:

<div align="center"> <h1>Apollo 17 Videos</h1> <p>Astronauts placing the flag on the Moon</p> </div>


Now it's time to add the video itself. Start with the <object> tag. Here's the code:

<object class codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="136" width="160">   <param name="src" value="Apollo_17_Flag.mov" />   <param name="autoplay" value="true" />   <param name="controller" value="true" />   <embed src="/books/2/631/1/html/2/Apollo_17_Flag.mov" height="136" width="160"     type="video/quicktime"     pluginspage="http://www.apple.com/quicktime/download/" /> </object>


You should recognize this code from what you've seen previously in this lesson. The classid and codebase for QuickTime are unique to that plug-in, as is the plug-ins page specified in the <embed> tag. You should also note that I set the height of the movie to 136. The movie is actually 120 pixels high, but the QuickTime player includes controls that are 16 pixels tall, so I added 16 pixels to the height of my movie. If I hadn't done so the controls would be cut off.

I used two parameters that are specific to QuickTimeautoplay and controller. I set the autoplay parameter to true so that the movie would start playing as soon as the page is displayed, and I set controller to true so that the video controls would be shown (this is the default). Had I set controller to false, the controls would not appear and I could have set the height attributes to 120. To see whether this works, test the page using your web browser. When you're satisfied, add a final piece to the page that will show people where to get the QuickTime plug-in if they need it. Because this is the last element on the page, remember to close the <div> with the end tag.

<p>Apple <a href="http://www.apple.com/quicktime">QuickTime</a> is required to view this movie. <a href="http://www.apple.com/quicktime">      <img src="/books/2/631/1/html/2/qt7badge_getQTfreeDownload.gif" border="0" align="absmiddle" width="88" height="31" /></a></p>


When it's all put together, the source code for your web page (shown in Figure 11.10) should look like this:

Input

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Apollo Multimedia Archive</title> </head> <body> <div align="center"> <h1>Apollo 17 Videos</h1> <p>Astronauts placing the flag on the Moon</p> <object class codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="136" width="160">     <param name="src" value="Apollo_17_Flag.mov" />     <param name="autoplay" value="true" />     <param name="controller" value="true" />     <embed src="/books/2/631/1/html/2/Apollo_17_Flag.mov" height="136" width="160"       type="video/quicktime"       pluginspage="http://www.apple.com/quicktime/download/" />   </object> <p>Apple <a href="http://www.apple.com/quicktime">QuickTime</a> is required to view this movie. <a href="http://www.apple.com/quicktime">      <img src="/books/2/631/1/html/2/ qt7badge_getQTfreeDownload.gif" border="0" align="absmiddle" width="88" height="31" /></a></p> </div> </body> </html>


Output

Figure 11.10. Embedded QuickTime movies use special attributes created by Apple.


Table 11.7 summarizes the attributes that QuickTime supports.

Table 11.7. Attributes/Parameters Supported by QuickTime

Attribute

Description

autohref

Can be set to true or false (default false). Starts loading the URL specified in the href attribute immediately if true.

autoplay

When TRue, plays the movie when the plug-in estimates the clip can be played without waiting for more data (true or false).

bgcolor

Specifies the background color of any space not taken up by the movie. QuickTime 6 accepts colors specified using hexadecimal notation or a color name.

cache

When true, the browser caches movies, resulting in the browser replaying a movie from its cache rather than downloading again. Supported by Netscape Navigator 3 and later only (TRue or false).

controller

When TRue, makes the movie controller visible. Sixteen pixels should be added to the height of the movie when the controller is shown and the height attribute is used (true or false).

correction

Applicable to QuickTime VR only (none or full).

dontflattenwhensaving

Saves the movie without flattening (no value).

enablejavascript

If this is set to true, you'll be able to control the QuickTime plugin using JavaScript on the page.

endtime

Defines the last frame of the movie (time in hours:minutes:_seconds:frames).

fov

The initial field-of-view angle for QuickTime VR movies (integer between 8 and 64).

goto

Same as qtnext.

height

Required. Defines the height of the region in which to display the movie. If the movie controller is visible, add 16 to the movie height to reach the total height required (in pixels).

hidden

Hides the movie, and really is only useful for background sound (no value).

hotspotn

Enables hotspots in a VR panorama where n is the hotspot ID (URL).

href

Links to another web page or movie (URL). (See the target attribute.)

kioskmode

When true, no pop-up menu is available for the movie and you cannot save it by dragging and dropping it (true or false).

loop

When TRue, the movie plays in an infinite loop. When set to palindrome, the movie will play alternately forward and backward (true, false, or palindrome).

movieid

A numeric ID (integer).

moviename

The movie name (text).

node

Sets the initial node for multinode QuickTime VR movies (integer).

pan

Sets the initial pan angle for QuickTime VR movies (integer from 0 to 360 degrees).

playeveryframe

When set to true, audio tracks are turned off and every frame of the movie is required to play, even if that forces a slower frame rate (TRue or false).

pluginspage

The URL to the QuickTime download page. You should set this to http://www.apple.com/quicktime/download/.

qtnextn

Identifies the URL for a movie to load and play when the current movie finishes. The number n can be an integer from 1 to 255 and defines the index of the URL in the playlist. The number n is the index of the next qtnext URL to load (URL or goton).

qtsrc

Forces a web browser to use the QuickTime plug-in. The URL overrides any value in the src attribute (URL).

qtsrcchokespeed

Specifies the data rate of a movie, regardless of the actual connection speed (number).

qtsrcdontusebrowser

Instructs the plug-in to load the movie using its own internal methods rather than using the browser, thus preventing caching.

scale

tofit scales the movie to the dimensions set by the height and width attributes. aspect scales it to fit this box while maintaining the original aspect ratio of the movie. A number scales the movie by that ratio (tofit, aspect, or a number).

src

Sets the URL of the movie (URL).

starttime

Sets the first frame of the movie (time in hours:minutes:_ seconds:frames).

target

If set to quicktimeplayer, launches the QuickTime Player to play the movie specified in the HRef attribute. If set to myself, plays the movie specified in the HRef attribute in the player embedded in the page.

targetn

Used with hotspot and HRef. Sets the target for links that use the hotspot or href attribute. The number n corresponds to the hotspot number (name of a valid HTML frame).

targetcache

Caches the movie that is targeted by another movie (TRue or false).

tilt

Sets the initial tilt angle for QuickTime VR movies (integer).

type

Defines the MIME type of the movie. If the movie is visible and has width and height values, type must be included. This attribute is supported by Netscape Navigator 2 or later only (MIME type).

volume

Sets the initial audio volume. The default is 100 (integer from 0 to 100).

urlsubstitute

Accepts two strings separated by a colon. In all URLs specified in the HRef attribute, or sprite or hotspot URLs, it replaces the first string with the second. So, "foo:bar" would replace any instance of foo in a URL with bar.

width

Sets the width of the display area for the movie (in pixels).


Note

QuickTime VR enables the author to create movies with a 360-degree view of an object that the user can pan through using the QuickTime viewer.





Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day
Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition)
ISBN: 0672328860
EAN: 2147483647
Year: 2007
Pages: 305

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net