Chapter 74. Embedding Media


The term media is one of those technical catchall buzzwords like content and functionality that is so general as to be practically meaningless, so the best you're going to get is a nonspecific definition. Essentially, media on the Web are sound files, movie files, Flash animations, SVG (Scalable Vector Graphics) files, Acrobat documents, and anything that isn't an image, HTML, CSS, client-side script, or server-side script. Table 74.1 lists many common media types.

Table 74.1. Common Media Types

MEDIA TYPE

USES

FILE EXTENSION

Adobe Acrobat (Portable Document Format)

Rich text documents and forms

PDF

Apple Audio Interchange Format

Sounds

AIFF, AIF

Apple QuickTime

Streaming audio and video

MOV

Macromedia Flash

Animations, movies, interactive presentations, and games

SWF

Macromedia Shockwave

Robust animations, movies, interactive presentations, and games

DCR

Microsoft Wave

Sounds

WAV

Microsoft Windows Media

Streaming audio and video

WMA, WMV

MIDI (Musical Instrument Digital Interface)

Songs, tunes

MID

RealMedia

Streaming audio and video

RM

Scalable Vector Graphics

Line art, animations

SVG

Sun Audio Format

Sounds

AU


GEEKSPEAK

Media are, more or less, components of a Web site that don't fall into the image, HTML, CSS, client-side scripting, or server-side scripting categories. Common types of media are sound files, movie files, Flash animations, SVG files, and Acrobat documents.


There are a couple of ways to tell if something is probably a media file. First, media are usually external files. That is, a media file is usually separate from the HTML document that displays or presents the media. But not always. For example, you can write SVG code directly into an HTML page.

More tellingly, media files usually require features that aren't built into the typical browser. For example, by itself, Microsoft Internet Explorer can't display Acrobat files. The visitor needs to install a special piece of software called a plug-in that expands the browser's capabilities, giving it what it needs to display Acrobat. This rule of thumb doesn't always hold true, however. Microsoft Internet Explorer now comes standard with Macromedia's Flash Player plug-in for viewing Flash animations. The typical nontechnical computer user probably has no idea that what makes those funny cartoons come to life on the Web isn't really their browser but a separate application by a non-Microsoft software company that works hand in hand with their browser.

So much for what media usually are or aren't. The easiest way to get one of these things into your Web page is to use the embed tag. But in doing so, be warned: The embed tag isn't a genuine HTML tag. It has never been a part of any specification of HTML. Instead, it's unofficial markup that all the major browsers have more or less adopted.

Standards police, such as the World Wide Web Consortium (W3C) prefer to think that the embed tag doesn't exist. But the official, W3C-approved, per-spec alternative, the object tag, simply doesn't work as well as it should across platforms and browsers. In fact, most designers have better luck getting their CSS styles to function properly than to get the object tag to present a media file. And when the object tag doesn't work, it really doesn't work. It creates all kinds of strange problems, up to and including actually crashing the browser.

All things being equal, it's always better to use proper markup. However, in the case of media, all things are not equal at all. The object tag doesn't do the job, so don't waste your time with it. Go with the nonstandard embed tag instead.

To see the embed tag in action, have a look at Figure 74.1.

Listing 74.1. View Source for Figure 74.1.
 <body>   <p>Enjoy this Flash move!</p>   <embed src="/books/2/30/1/html/2/movie.swf" width="550" height="400"></embed> </body> 

Figure 74.1. Use the embed tag to refer to an external media file.


As you can see from the View Source of Figure 74.1, the embed tag appears in the code exactly where you want the media file to appear, just like an img tag. Another similarity is the src attribute, which directs the browser to the location of the media file. Also, the width and height attributes determine the physical size of the media file on your page. So, in some ways, you can think of the embed tag as an img tag for media files.

TIP

The embed tag also shares the align attribute with the img tag. But the embed tag's align attribute doesn't work like the img tag's, especially in the horizontal direction, so you're better off aligning media files with trickery. Drop div tags around the embed tag, and set the div's align attribute to position the media file:

 <div align="center">   <embed src="/books/2/30/1/html/2/movie.swf" width="550" height="400"></embed> </div> 


For better results, the embed tag uses some attributes that the img tag doesn't. Assume that your visitor's browser doesn't have the Flash Player plug-ina highly unlikely scenario, since virtually every computer on the Web displays Flash movies. But just imagine for a moment that the impossible happens. Without the plug-in, the browser doesn't know how to present the SWF file, and you get the Web equivalent of an uncomfortable silence. Therefore, it's common courtesy to add the pluginspage attribute, which directs the browser to a Web page where the visitor can download and install the necessary plug-in and view the media file:

 <embed src="/books/2/30/1/html/2/movie.swf" width="550" height="400"        pluginspage="http://www.macromedia.com/go/getflashplayer"> </embed> 

TIP

The width and height attributes of a sound file determine the size of the plug-in's control bar (with buttons for stop, play, fast forward, volume, and the like). If you don't want the control bar to appear at all, set the embed tag's hidden attribute to true.


Depending on the type of media file, there may be other attributes that you can specify in the embed tag. For instance, the Flash Player plug-in accepts three quality settings: low, medium, and high. You may set a default choice with the quality attribute:

 <embed src="/books/2/30/1/html/2/movie.swf" width="550" height="400" quality="high"        pluginspage="http://www.macromedia.com/go/getflashplayer"> </embed> 

TIP

For the plug-in page, when in doubt, just link to the home page of the plug-in maker's Web site; for example, http://www.adobe.com/ or http://www.macromedia.com/. From there, the download page is usually pretty easy to find.


Likewise, if you don't want the Flash movie to start automatically when the browser loads the page, or if you don't want playback to loop, you can set the play and loop attributes:

 <embed src="/books/2/30/1/html/2/movie.swf" width="550" height="400" quality="high"        play="false" loop="false"        pluginspage="http://www.macromedia.com/go/getflashplayer"> </embed> 

Table 74.2 lists common embed-tag attributes for controlling various kinds of media files. These attributes don't always work as described for certain media types in certain browsers, so be ready for a little trial and error.

Table 74.2. Common Attributes of the Embed Tag

ATTRIBUTE

CONTROLS

POSSIBLE VALUES

NOTES

autoplay

Whether the media file automatically plays when the browser loads the page

true, false

Not for Flash movies

height

The vertical size of the media file in pixels

Any numeric

None

hidden

Whether the media file's control panel appears on the Web page

true, false

Usually for sound files

loop

Whether the media file plays over and over again

true, false

None

play

For Flash movies; whether the media file automatically plays when the browser loads the page

true, false

For Flash movies

playcount

The number of times the media file plays

Any numeric

Internet Explorer only[*]

quality

The visual clarity of the media file

low, medium, high

For Flash movies

volume

The volume level of the media file's audio

1100

None

width

The horizontal size in pixels of the media file

Any numeric

None


[*] The loop attribute in Netscape performs the same function when you set its value to a number instead of true or false. However, Flash movies do not seem to respond to numbered loop attributes in Netscape.

FAQ

How do I know which attributes work with my media?

Short answer: You don't always. Documentation on the subject is sketchy, too, so determining the special attributes that control the media file often requires some trial and error. For instance, while a Flash movie uses the play attribute to turn autoplay on and off, sound files use the autoplay attribute for the same function. Ideally, find a Web page that embeds the same type of media, and view the source code to see what's going on.




Web Design Garage
Web Design Garage
ISBN: 0131481991
EAN: 2147483647
Year: 2006
Pages: 202
Authors: Marc Campbell

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