Section 12.3. Embedded Media


12.3. Embedded Media

Images aren't the only things that can be displayed as part of a web page. You can also include content such as QuickTime movies, interactive Flash files, all manner of Java applets, and more. The browser renders embedded media files using the provided self-contained code (as in the case of an applet), using its built-in display devices (as for GIF or JPEG images), or by taking advantage of a plug-in or helper application (as for Windows Media or Flash).

The elements that embed media in (X)HTML are:


object

The W3C recommended element for all media


applet

For Java applets; deprecated in HTML 4.01 and XHTML 1.0

There is a third nonstandard (and therefore, nonvalidating) element for embedding media that is still used by browsers that use Netscape's plug-in architecture:


embed

For plug-in dependent media; not part of any HTML Recommendation

Now, take a closer look at each of these elements and their uses.

12.3.1. The object Element

According to the HTML 4.01 Recommendation, the object element is an all-purpose object-placer. It can be used to place a variety of object types on a web page, including applets, movies, interactive objects (Flash), and even plain old images. As of this writing, browser support does not quite fulfill the W3C's vision for this element (for example, it still may not be used reliably as a replacement for the img element), however, the object element is still used for a wide range of embedded media .

object

 <object>...</object> 

Attributes

Core (id, class, style, title), Internationalization, Events
archive="URLs"
class
codebase="URL"
codetype="codetype"
data="URL"
declare="declare"
height="number"
name="text"
standby="message"
tabindex="number"
type="type"
usemap="URL"
width="number"

Deprecated attributes

align="baseline|bottom|left|middle|right|top"
border="number"
hspace="number"
vspace="number"
param

 <param /> 

Attributes

name="text" (Required)
value="text"
valuetype="data|ref|object"
type="content type"

The object element began as a proprietary element in Internet Explorer to support ActiveX and later Java applets. Netscape Navigator initially supported only embed and applet (discussed later in this chapter) for embedding media, but added limited object support in its Version 4 release, and improved (yet still improperly implemented) support in Version 6. The W3C intends the object element, now part of the HTML 4.01 and XHTML Recommendations, to be a replacement for the more specific img and applet elements as well as the nonstandard embed and bgsound (used for background sounds).

The attributes required for the object element vary with the type of content it is placing. The object element may also contain a number of param elements that pass important information to the object when it displays or plays. Not all objects require additional parameters.

The object and param elements work together to allow authors to specify three types of information:


The implementation of the object.

That is, the executable code that runs in order to render the object. This may be a tool or player required to display an external file (such as the QuickTime plug-in for showing a .mov file), or it may be the object itself, such as a self-contained clock applet. The implementation is specified with the classid attribute.


The data to be rendered.

The data attribute specifies the URL of the data; in most cases, an external file, such as a movie or a PDF file. According to the HTML 4.01 spec, the data attribute may also be used to provide the raw data right there in the object element.


Additional settings required by the object at runtime.

Some embedded media objects require additional settings that get called into play when the object plays or is rendered. For example, when placing a Windows Media movie, authors have the option of adding a variety of controls, turning the "AutoStart" feature on or off, and many more features specific to the Windows Media Player. The runtime settings are provided with param elements within the object. Examples of the param element are provided later in this section.

Authors may not need to provide all three types of information for an object. For example, for a self-contained applet, you may only need to specify the implementation. If you know that the browser has built-in capacities to render an object (such as a GIF image), then only the data for the image and a description of the data type are required. And as noted above, not all objects require additional parameters.

12.3.1.1. Specifying data and type

To get a basic idea of how the object element works, take a look at this minimal markup example that uses the object element to place an inline image.

 <object data="daffodil.gif" type="image/gif"> A color photograph of a daffodil. </object> 

Here, the data attribute provides the URL for the source for the embedded object (in this case an image file) and type tells the browser that the content type is a GIF image. When a type attribute is provided, the browser uses that information to determine how (and if) to render the object. The browser's preferences contain a list that specifies how to handle each content type, be it via native support, a plug-in player, or an external helper application. If the type is not recognized, the browser may not be able to render the object. In this example, the browser can render a GIF image without the need of a special player.

While the syntax exists for adding images with the object element, the img element is still the most common way to go due to lack of browser support of object for image placement.


12.3.1.2. Specifying an implementation

The object element is also commonly used with the classid attribute for specifying the implementation, such as an ActiveX control, Java applet, or Python applet. This example shows an object element used to place a Java applet on a page. (Note that some applets require placement with the applet element for proper functionality.)

 <object classid="java:calendar.class" codetype="application/java" standby="Calendar loading..." width="200" height="150" title="basic calendar">...</object> 

The Java applet is called with the classid attribute. The optional codetype attribute specifies the content type of the data that will be downloaded by the classid. A browser may use the value of the codetype attribute to avoid downloading information for a content type it does not support. The optional standby attribute provides a message to be displayed while the applet is loading.

Some plug-in media and applets require width and height values in order to play correctly, so be sure to read any documentation provided for your media type. It is good practice to provide width and height measurements for every object element.

12.3.1.3. Adding parameters

These days, it is more common to see the object element used to place an ActiveX control (Internet Explorer's version of plug-ins) than an applet. ActiveX controls are identified by the naming scheme clsid, followed by a long string of characters specific to the ActiveX control required to render the media object. ActiveX controls typically require additional settings used to control the display or playback of the object. These settings are provided by param elements as shown in this example for embedding a Windows Media movie.

 <object classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" height="280" width="320" codebase="http://activex.microsoft.com/activex/controls/mplayer/ en/nsmp2inf.cab#version=6,4,7,111">    <param name="URL" value="movies/europe.wmv" />    <param name="autoStart" value="false" />    <param name="UIMode" value="full" /> </object> 

Here, the classid attribute points to the ActiveX control for the Windows Media Player 9. The codebase attribute is intended to be used to provide a base path used to resolve relative URIs specified by the classid, data, and archive attributes. In practice, however, it has come to be (mis)used as a pointer to a location for downloading the current ActiveX control or plug-in if it is not installed on the user's computer, as is the case in this example.

Within the object element, there are three param elements that pass important information to the ActiveX control. The parameters and values are provided by the name and value attributes, respectively. In this example, the URL parameter provides the location of the movie itself, autoStart is set to false, so the user needs to click to start playback, and the UIMode setting instructs the player to display the full control panel for playing the movie.

Parameter names and their values are specific to the media object, so these name/value pairs do not work with any other media type (not even older versions of Windows Media Player).

12.3.1.4. Providing alternate content

If the browser determines that it cannot render the specified object, it then proceeds to render the content of the object element. In the example from earlier in this section, should the browser not have the capacity to render the GIF, it will display the alternative content ("A color photograph of a daffodil") instead.

 <object data="daffodil.gif" type="image/gif" width="150" height="125"> A color photograph of a daffodil. </object> 

The alternative content may also be another object element. Authors may provide several layers of alternate content by nesting objects with different implementations. The user agent will keep looking inside each object element until it finds an object that it can render.

In this example, borrowed from the HTML 4.01 Recommendation, a Python applet is embedded on the page with the object element. If the browser can't render the applet, an MPEG video is provided as a backup. If the video cannot be rendered, there is a static GIF image, and finally, a text description is provided if all else fails.

 <object title="The Earth as seen from space" class>     <object data="TheEarth.mpeg" type="application/mpeg">         <object data="TheEarth.gif" type="image/gif">               The Earth as seen from space.         </object>     </object> </object> 

12.3.1.5. Cross-browser compatibility

In an ideal world, authors could embed objects by simply specifying the data and data type for the media file and perhaps a few additional parameters, as shown in this example that should be sufficient for placing a QuickTime movie:

 <object type="video/quicktime" data="/movies/arlo.mov" width="320" height="256">     <param name="autostart" value="false" />     <param name="controller" value="true" /> </object> 

Unfortunately, while most standards-compliant browsers correctly interpret the object element, the markup required to make embedded media play correctly with all their features on all browsers is determined by the individual media players, not the browsers. For example, as of this writing, the QuickTime plug-in player does not accept settings from param elements, so it still requires the nonstandard embed element for all but the default playback settings. The embed element is discussed further in the next section.

To ensure that the embedded media renders or plays for the widest range of browsers and platforms, developers use this strategy that takes advantage of nesting within object elements for providing alternate content:

  • Typically, the top-level object element contains the classid for an ActiveX control that will do the trick for the 80% or so of users with Internet Explorer on Windows.

  • Within that object, provide an alternate object specifying the data and data type that allows other browsers to choose their own method for rendering the object based on the data type.

There is a bug in Internet Explorer for Windows that causes both object elements to be rendered, even though according to the HTML 4.01 Recommendation, only the first supported object element should appear. Therefore, it is necessary to take measures to make sure only one object appears, such as those in these examples:

  • A tutorial on standards-compliant QuickTime embedding uses style sheets to hide the redundant object element (realdev1.realise.com/rossa/rendertest/quicktime.html).

  • This exploration on the "right" way to embed Flash movies uses Internet Explorer's conditional comments to display just one object based on browser version (see weblogs.macromedia.com/accessibility/archives/2005/08/in_search_of_a.cfm). The resulting code is provided in the example below.

  • At this point, the page should be tested for full functionality on all the browsers that must be supported. If the object renders or plays fine, you're done. If not, there is one more option...

  • The ultimate fallback is the embed element that works with all browsers that use the Netscape plug-in architecture. An embed element with attributes for controlling runtime parameters may be used within or in place of the inner data/type object. While this ensures that the media will play in most browsers, the trade-off is that it is a nonstandard element that will cause your document to be invalid. Authors must determine whether their greatest priority is a valid (X)HTML document or complete media support for users without IE for Windows.


The following examples show two approaches to providing alternate content for an embedded Flash movie that ensures the widest browser support. The first uses the default code generated by the Flash authoring tool for embedding the Flash object on the page. It uses the object element with an ActiveX classid for Internet Explorer and the nonstandard embed element for browsers that use plug-ins.

 <object class codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash. cab#version=6,0,40,0"         width="300" height="120">     <param name="movie" value="/flash.swf" />     <param name="quality" value="high" />     <param name="bgcolor" value="#FFFFFF" />         <embed src="/books/4/439/1/html/2//flash.swf" type="application/x-shockwave-flash"             quality="high" bgcolor="#FFFFFF" width="300" height="120"             pluginspage="http://www.macromedia.com/go/getflashplayer">         <noembed>You need the Flash player</noembed>         </embed> </object> 

This version uses standards-compliant nested objects with Microsoft's proprietary conditional comments to make sure only the correct object renders in Internet Explorer. The inner object may be used by Gecko-based browsers.

 <object class codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash. cab#version=6,0,40,0"         width="300" height="120">     <param name="movie" value="/flash.swf" />     <param name="quality" value="high" />     <param name="bgcolor" value="#FFFFFF" />    <!--[if !IE]> <-->     <object data=" /flash.swf" type="application/x-shockwave-flash" width="300" height="120" >      <param name="quality" value="high" />      <param name="bgcolor" value="#FFFFFF" />      <param name="pluginurl" value="http://www.macromedia.com/go /getflashplayer" />          You need the Flash player.     </object>   <!--> <![endif]-->    </object> 

There are other methods for ensuring cross-browser compatibility that use JavaScript and browser-sniffing techniques, but they are beyond the scope of this chapter.


12.3.2. The embed Element

The nonstandard embed element was addressed briefly in the previous section. Here it is covered in more detail. The embed element was originally created by Netscape for use with plug-in technologies. It is currently supported by most browsers; however, because it is not included in any HTML Recommendation, it will cause (X)HTML documents to be invalid. Whenever possible, authors are advised to use object for multimedia objects and use embed as a last resort fallback. All available attributes for the embed element are described in Appendix A.

embed

 <embed>...</embed> or (<embed />) 

Attributes

align="left|right|top|bottom"
height="number"
hidden="yes|no"
name="text"
palette="foreground|background"
pluginspage="URL"
src="URL" (Required)
width="number"

Netscape Navigator only

border="number"
frameborder="yes|no"
hspace="number"
pluginurl="URL"
type="media (MIME) type"
vspace="number"

There is conflicting documentation inline as to whether the embed element requires an end tag. Some sources say an end tag is required, as shown here:

 <embed src="url" type="content-type" height="n-pixels" width="n-pixels"> </embed> 

Microsoft documentation shows embed as an empty element and modern browsers seem to support the empty embed syntax, shown here:

 <embed src="url" type="contenttype" height="n-pixels" width="n-pixels" /> 

The src attribute is required to tell the browser the location of the media file to be played. The type attribute specifies the content type of the embedded media. The browser uses the content-type information (or the suffix of the media file) to find the appropriate plug-in to render or play the file. Many media types require that width and height values (the dimensions of the plug-in element in pixels) be specified in order for the plug-in to function.

The optional pluginspage attribute provides the URL of a page where the user can download information for the required plug-in should it not be found on the client machine. Netscape 4.0 introduced the pluginurl attribute, which specifies a link to a function that installs the plug-in automatically. To hide the media file or object from view, use the hidden attribute with a value of yes.

The embed element uses special attributes and their values for additional runtime settings (the same settings provided with param elements in the object element). These attributes are specific to the media type and the plug-in. For example, the autoplay and playeveryframe attributes are used by the QuickTime player only. (The attributes listed for the embed element work for all embedded media.)

12.3.2.1. noembed

The noembed element is used within the embed element and provides alternative content that displays if the browser cannot display the specified media file.

noembed

 <noembed>...</noembed> 

Attributes

None

In the following example, the browser would display a GIF image and brief message in place of the media object.

 <embed src="/books/4/439/1/html/2/movies/vacation.mov" width="240" height="196" autoplay="false" pluginspage="http://www.apple.com/quicktime/download/">    <noembed><img src="/books/4/439/1/html/2/vacation.gif"> You do not seem to have the plugin.    </noembed> </embed> 

12.3.2.2. Using embed

Although the embed element is still in common use as of this writing, and is actually recommended by multimedia format developers such as Macromedia and Apple, eventually full plug-in functionality will be possible using the standard object element alone. If you do use embed elements, consider making a note of where they appear so you can clean up your documents and make them valid when that day arrives.




Web Design in a Nutshell
Web Design in a Nutshell: A Desktop Quick Reference (In a Nutshell (OReilly))
ISBN: 0596009879
EAN: 2147483647
Year: 2006
Pages: 325

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