Techniques for creating valid XHTML pages

This document describes techniques for embedding multimedia in XHTML pages using the object element

Standards compliant embed syntax

Although the <embed> element is often used to embed multimedia in web pages, it is not part of the XHTML specification. The <object> element is the standards compliant method for embedding multimedia in XHTML.

For example, the following XHTML fragment uses the object element to embed a Flash file in an XHTML page:

<object type="application/x-shockwave-flash" data="index.swf" width="100%" height="100%" id="object">
  <param name="movie" value="index.swf" />
</object>

The object embed syntax shown above is standards compliant and works in TLF's supported browsers (Internet Explorer 6, Netscape 6.2, and Safari 1). There are, however, a few known issues with this syntax:

1. Internet Explorer 6 on Windows does not stream multimedia embedded using the <object> element.
2. The syntax does not display content in Gecko-based browsers such as Netscape 7 and Mozilla Firefox.
3. The syntax does not check the version of plug-in used to display the content.

This document describes solutions to these issues. It also recommends other XHTML parameters to be passed to Flash and Shockwave objects.

Streaming and the object element

The object embed syntax shown above is standards compliant and works in TLF's supported browsers, but there is still a problem as Internet Explorer does not stream multimedia embedded using the object element. Internet Explorer intreprets the entire Flash object as being the same frame and as a result the entire Flash needs to be loaded before the IE Flashpalyer will display any content onscreen. Whilst this may not cause any issues for small multimedia files, it is an is an issue for large multimedia files because waiting for the complete download may violate TLF's 10 second interaction time limit .

Flash Satay

The excellent article Flash Satay: Embedding Flash While Supporting Standards documents the Internet Explorer streaming issue and a potential work-around. The so-called Flash Satay method involves creating a very small container object to load the real object.

Flash Satay uses a 'loader.swf' object that contains the following ActionScript on Frame 1 in the root of the object:

_root.loadMovie(_root.path,0);

If the real Flash object is called 'index.swf' then it is called by passing a parameter to 'loader.swf':

<object type="application/x-shockwave-flash" data="loader.swf?path=index.swf" width="100%" height="100%" id="object">
  <param name="movie" value="loader.swf?path=index.swf" />
</object>

This method will stream the index.swf file in Internet Explorer while still using the <object> element to embed the content.

TLF variations on Flash Satay

The Flash Satay technique shown above is standards compliant and streams in Internet Explorer and Netscape, but it creates a couple of other issues. Firstly, Safari on OS X does not pass the parameter correctly. Secondly, the '?' in the data URL (container.swf?path=movie.swf) is often blocked by security software.

For these reasons, TLF originally recommended a slight variation on Flash Satay. This variation still uses a container object, but the parameter for the real content is passed to the container in a text file rather than in the data URL. The resulting embed syntax looks like this:

<object type="application/x-shockwave-flash" data="loader.swf" width="100%" height="100%" id="object">
  <param name="movie" value="loader.swf" />
</object>

The container object relies on a text file 'path.txt' being in the same directory as the flash file which contains the path of the real content:

index.swf

Subsequently a simpler method was identified and it has been adopted as standard practice.  This variation uses a container object which directly references and loads the index.swf file.  This method uses a 'loader.swf' object that contains the following ActionScript on Frame 1 in the root of the object:

stop ();
this.loadMovie("index.swf");

Successful use of this method relies upon use of standardised naming conventions for the container swf 'loader.swf' and the main .swf 'index.swf' and both being located in the root directory of the learning object.  A Flash 8 loader.swf file is supplied to developers as part of the TLF branding syntax files and alternately an equivalent file may be created in Flash CS3.

Supporting Gecko browsers (Netscape 7+ and Mozilla Firefox)

The object method of embedding content above however causes issues in recent Gecko-based browsers

• Netscape 7+ and Mozilla Firefox. These browsers were not originally supported by TLF, however increased user uptake and the Netscape's cessation of support for Netscape 6.2 has resulted in TLF moving to support Firefox. We currently support Firefox 2.0.

Note that whilst Netscape 6.2 also uses the Gecko HTML rendering engine, it is unaffected by this issue. At the time of Netscape 6.2's release, the Gecko engine build version utilised did not support this functionality.

This problem is not related to the <object> tag, rather it stems from using a percentage value to specify the height of the <object> element. TLF embeds content using percentage values, allowing the object to scale to fill available space when a browser is resized (see Screen layout technical specification). For example,

<object type="application/x-shockwave-flash" data="loader.swf" width="100%" height="100%" id="object">
  <param name="movie" value="loader.swf" />
</object>

Netscape 7 and Mozilla Firefox are built using the Gecko HTML rendering engine. Gecko calculates the percentage height of an element with respect to the height of the generated box's containing block (see CSS2.1 specification). For example, in the case of TLF content, the <object> element is usually contained within a <div> element that is contained in a <body> element:

<body>
  <div>
    <object type="application/x-shockwave-flash" data="loader.swf" width="100%" height="100%" id="object">
      <param name="movie" value="loader.swf" />
    </object>
  </div>
</body>

In this scenario, the height of the <object> element is calculated based on the height of the <div> element, because the <object> element is an inline element, and the <div> element is a block-level element. The issue with our original embed syntax is that Gecko browsers by default calculate the height of this <div> element to be zero pixels. This means that the <object> element inherits a height of zero pixels. The end result is that the content is actually displayed on the page, it just has zero height and as such can't be seen.

Style sheets to the rescue

The solution is to give the <div> element containing the <object> element a non-zero height. The simplest way of ensuring that is to add the following to the style sheet for the XHTML page:

This ensures that the height of the XHTML page is equal to the 95% of height of the browser window. The <div> element inherits the height of the body element, and the <object> element in turn inherits the same height.

Checking for versions of plug-ins

The Flash and Shockwave embed syntax recommended by Macromedia uses a codebase attribute to identify the location of the plug-in so that the browser can automatically download it if it is not already installed.

If the codebase attribute is used within an <object> element then it prevents the movie from playing in Netscape and Mozilla (see Flash Satay article for details). For this reason, TLF does not use the codebase attribute in its <object> embed syntax.

As an alternative to the automatic download of plugins, TLF has created an Interrogator page to analyse a computer for plugins. The Interrogator indicates any browser plug-ins you will need to download and install to play TLF content.

Other recommended Flash parameters

Scaling

TLF requires that Flash content scale to fill available browser space (see Screen layout technical specification). To achieve this, TLF recommends using perecentages to specify height="100%" and width="100%" attributes, and passing the scale parameter to Flash:

<param name="scale" value="showall" />

Quality

TLF recommends setting Flash display quality to high:

<param name="quality" value="high" />

XHTML Flash syntax summary

The following syntax will embed a 'loader.swf' Flash file in an XHTML page:

<object type="application/x-shockwave-flash" data="loader.swf" width="100%" height="100%" id="object">
  <param name="movie" value="loader.swf" />
  <param name="scale" value="showall" />
  <param name="quality" value="high" />
</object>

Complete index.html example

An example of a complete index.html file containing a Flash object and a copyright statement is shown below.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title><!-- tlf:content-title --></title>
    <link rel="stylesheet" type="text/css" media="screen" href="css/mystyle.css" id="default" title="default" />
    <script type="text/javascript" src="js/script.js"></script>
  </head>
  <body>
    <div id="divcenter">
      <object type="application/x-shockwave-flash" data="loader.swf" width="100%" height="100%" id="loader">
        <param name="movie" value="loader.swf" />
        <param name="quality" value="high" />
        <param name="scale" value="showall" />
    <param name="bgcolor" value="#ffffff" />
        <param name="menu" value="false" />
        <param name="seamlesstabbing" value="false" />
      </object>
      <br/>
      <div class="logo">
        <img src="support_files/tlf_logo.png" id="logo" title="The Le@rning Federation" alt="TLF Logo" />
      </div>
      <div class="partnerlogo">
       <!-- <img src="support_files/partner_logo.png" id="partnerlogo" title="Insert partner institution name" alt="(partner institution) logo" /> -->
      </div>
      <div class="copyright-conditions">
        <span id="copyright"><!-- tlf:content-rights --></span>
        <span id="conditions"><!-- tlf:conditions-of-use --></span>
      </div>
    </div>
  </body>
</html>