Standards Compliant method to add Quicktime movies to pages

New update, below.

Background

The method currently used to embed Quicktime movies into pages relies on the embed tag which, while widely supported by browsers, has never been part of any W3C standard. There is a good reason for this: why add another tag to (X)HTML, when a perfectly good one already exists?

The object tag is intended as an all-purpose tag to embed [sic] external files into web pages. It has clever features such as being able to be nested, so that if a browser does not understand what is meant by the outer element, it can parse the inner element instead. This means that the inner most element could contain an image, which would be rendered to the user if all else fails.

Flash Satay

Flash Satay is a standards compliant method where by Flash movies can be added to a web page without server or client side scripting. It does this by returning to a more standards based use of the object tag, and avoiding the IE friendly method of treating the Flash movie as an Active X component. Once the classid attribute is dropped, the other browsers are much happier with the object tag, without the use of the embed tag.

Nesting Object tags

Michael Zajac first suggested nesting object tags in order to display Quicktime movies successfully. He also highlighted the problem with this technique: IE on the PC attempts to display both the outer most object tag (which it understands), as well as the inner most one (which it does not). This results in the Quicktime movie displaying what appears to be a textarea beside it of equal size. As Michael Zajac says in the Flash Satay forum Now if we figure out how to hide the second object from MSIE/win . . ..

Example Markup

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="260">
 <param name="src" value="/rossa/mov/tang.mov" />
 <param name="controller" value="true" />
 <object type="video/quicktime" data="/rossa/mov/tang.mov" width="320" height="260" class="mov">
  <param name="controller" value="true" />
  Error text.
 </object>
</object>

Hiding the second object from IE

The obvious CSS selector to use to hide the inner most object tag is object object, but after a few experiments, it became apparent that IE did not consider the two tags as nested inside each other. This led to a class (note: not a classid) being added to the second object tag, in order to select it in the style sheet, as demonstrated below:

object.mov {
    display: none;
}

Ensuring that only Internet Explorer hides the second object tag

CSS Hub documented a number of CSS quirks which can be useful in hiding content in different browsers. One of these is the Star html Selector Bug. Briefly, this is a selector which cannot match any element in a standards compliant xhtml page, but which is recognised by all versions of IE. It works like this:

* html object.mov {
    display: none;
}

As only IE understands Active X controls, it is legitimate to use a rule which only IE will follow. The problem is that IE on the Macintosh will also follow this rule, and will fail to display either object tag.

Small fix for IE on the Macintosh

Using a CSS comment bug, we can exclude IE5, IE5.1 and IE 5.2.2 on the Macintosh from parsing this declaration, by using the following rule:

* html object.mov {
    display/**/: none;
}

Note that white space is vital to this being followed correctly.

One final problem

The comment bug used above will also exclude IE5 on the PC. As the remaining comment bugs are exclusive, rather than inclusive, I'll have to hide, then display, then hide the second object for this to work in all versions of IE:

/* hides the second object from all versions of IE */
* html object.mov {
    display: none;
}

/* displays the second object in all versions of IE apart from 5 on PC */
* html object.mov/**/ {
    display: inline;
}

/* hides the second object from all versions of IE >= 5.5 */
* html object.mov {
    display/**/: none;
}

Update

Michael Zajac has tested this on a huge range of browsers, the results of which have been added below.

Testing

Browser	OS	QT version	Works?
Safari 1.0	OS X 10.2.6	6.3	Yes
MSIE 5.2.3	OS X 10.2.6	6.3	Yes
Camino 0.7	OS X 10.2.6	6.3	Yes
OmniWeb 4.5	OS X 10.2.6	6.3	Yes
Moz Firebird 0.61	OS X 10.2.6	6.3	Yes
Netscape 7.1	OS X 10.2.6	6.3	Yes
Opera 6.03	OS X 10.2.6	6.3	Yes
Lynx 2.8.5dev16	OS X 10.2.6	6.3	shows "Error text." (yes)
Netscape Navigator 4.05	Mac OS9	6.02	Yes
Netscape Communicator 4.8	Mac OS9	6.02	Crashes browser
MSIE 5.0	Mac OS9	6.02	Yes
MSIE 5.1	Mac OS9	6.02	Yes
MSIE 5	Windows 98	6.02 / None	Yes / No *
MSIE 5.5	Windows 98	6.02 / None	Yes / No *
MSIE 6	Windows 98	6.02 / None	Yes / No *
MSIE 6	Windows 2000	6.02	Yes
Mozilla 1.4	Windows 2000	6.02	Yes
Opera 7	Windows 2000	None	Yes (shows "error text")
MSIE 6	Windows XP †	6.1	Yes
* Does not display "Error text". † Tested under Virtual PC/Mac

Issues:

• Presumably, the innermost object tag should contain the content which is displayed if all else fails - in the example above, this is the paragraph with the text Error text. Unfortunately, as this is a child of a hidden element, it will be hidden in most versions of IE by default.
• If the user turns off style sheets, both objects will appear in IE.
• Future versions of IE might not support the star selecter bug, but also might try and render the second object.
• After this page received some publicity, Richard Crowest hilighted a significant drawback of this method:

"The demo movie displays correctly because the specified parameters, controller and autoplay both true, are the default behaviours for video QT movies. Try inserting a QTVR with controller set to true, though, and you won't see the controller in IE or Safari. This means its also impossible to specify hotpsot parameters for these browsers. Bizarrely, IE will read <embed> style attributes included in the opening tag, such as controller="true", but of course this isn't valid HTML any more than <embed> is. I don't think either Angus or Zajac tested for parameter passing when they did their browser checks - simply whether the object would display as they were expecting it to.

"The bottom line seems to be that if you just want to insert a vanilla QT video with a controller bar and autoplay, you're fine with this method. As soon as you want to specify any parameters, though, you're forced back to <embed>. Bummer."

Future updates

The non-display of alternative content could be fixed with additional contextual selectors. I usually try and avoid hiding a parent element, but then displaying it's child, but this might allow versions of IE which do not have QuickTime to display their alternative content.