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=" width="550" height="400"></embed>
</body>
Figure 74.1. Use the embed tag to refer to an external media file.
[View full size image]
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=" 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=" 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=" width="550" height="400" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
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=" 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.
 | FAQHow 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. |
|
لطفا منتظر باشید ...
