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 ...

Get Web Design in a Nutshell, 3rd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.