QuickTime Information

1 | Minimum Requirements

The reason why each of the minimum requirements aren't working in all browsers is because of the use of the classid attribute. In case of IE, QuickTime only provides a way to call the ActiveX plugin by using the classid attribute. This means that the type attribute can't be used to achieve the same unlike e.g. the Flash plugin. Mozilla doesn't support ActiveX plugins and therefor it ignores the object tag, like it should according to the W3C recommendation.

Internet Explorer

<object id="movie" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="380" height="285">
  <param name="src" value="movie.mov" />
  <p>Error Text</p>
</object>

Mozilla

<object id="movie" data="movie.mov" type="video/quicktime" width="380" height="285">
  <p>Error Text</p>
</object>

2 | Official Method

Not Working in multiple browsers.

The official method should solve this problem.
As the W3C recommendation states:
"If the user agent is not able to render the object for whatever reason (configured not to, lack of resources, wrong architecture, etc.), it must try to render its contents."
Unfortunately IE has a wrong implementation of the object tag. Although this method does work in Mozilla, IE is trying to render both objects, including the nested object tag, eventhough it is rendering the first object tag correctly.

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="380" height="285">
  <param name="src" value="movie.mov" />
  <object id="movie" data="movie.mov" type="video/quicktime" width="380" height="285">
    <p>Error Text</p>
  </object>
</object>

3 | Conventional Method

Invalid HTML but working in multiple browsers.

The way to make the evoking of the QuickTime plugin work in all browsers used nowadays, is by using the old embed Netscape tag. Because IE doesn't understand this tag at all, it will ignore it completely. Unfortunately the embed tag isn't part of the W3C recommendation (and it never has been). Although this method does the trick in all browsers it shouldn't be used for the obvious reasons.

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="380" height="285">
  <param name="src" value="movie.mov" />
  <embed src="movie.mov" width="380" height="285"></embed>
</object>

4 | JavaScript Method

JavaScript dependant but working in multiple browsers.

To fix the problem and to get a valid html output JavaScript can be used. By including a simple browser check it can output the object tag IE is requiring if the client browser in IE. For all other browsers it can output the other object tag.
Although this method does the trick in all browsers, the main problem is that it is depending on javascript support. When a browser doesn't support JavaScript or the client has JavaScript disabled, it won't display QuickTime at all.

HTML head section code:

<script type="text/javascript">
<!--
  function showqt(movieurl) {
    var detect = navigator.userAgent.toLowerCase();
    if (detect.indexOf('msie') + 1) document.write (
      '<object id="movie" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="380" height="285">');
    else document.write ('<object id="movie" type="video/quicktime" data="'+movieurl+'" width="380" height="285">');
    document.write ('<param name="src" value="'+movieurl+'" />');
    document.write ('<p>Error text</p>');
    document.write ('</object>');
  }
//-->
</script>

HTML body section code:

<script type="text/javascript">
<!--
  showqt('movie.mov');
//-->
</script>

5 | Conditional Comments Method

Invalid HTML but working in multiple browsers.

Condition Comments is something Microsoft introduced because they probably realized they failed in creating a proper browser. Because there was no turning back for them they had to think of something else. Conditional Comments was the result of this. Conditional Comments is an extention to the HTML comment tags which will only be recognized by IE 5 and up. All other browsers will see it as just comments and ignore it. Although this solution works in each browser, the use of just <! to specify a comment is invalid HTML. Therefor, again, this solution shouldn't be used.

<!--[if IE ]>
  <object id="movie" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="380" height="285">
<![endif]-->
<![if ! IE ]>
  <object id="movie" data="movie.mov" type="video/quicktime" width="380" height="285">
<![endif]>
  <param name="src" value="movie.mov" />
  <p>Error Text</p>
</object>

6 | "Ideal" Method

Valid HTML and working in multiple browsers.

The final method is probably one of the most "ideal" solutions which can be used if it comes to creating valid HTML and not being dependant on JavaScript and browser checks. This method makes use of a combination of two different "hacks". It takes the valid HTML part of the conditional comments and combines it with a valid CSS method called Child selectors which isn't supported by IE. This produces a valid HTML output which works in multiple browsers.

HTML head section code:

<style type="text/css">
  #goodtag{display: none;}
  html>body #goodtag{display: block;}
</style>

HTML body section code:

<object id="goodtag" data="movie.mov" type="video/quicktime" width="380" height="285">
  <p>Error Text</p>
</object>
<!--[if IE]>
  <object id="badtag" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="380" height="285">
    <param name="src" value="movie.mov" />
    <p>Error Text</p>
  </object>
<![endif]-->