QuickTime Information

QuickTime Evoking

Here's a list of the methods that can be used to evoke QuickTime into a web page. My goal was to find a valid HTML solution which works in multiple browsers. For the ease of reading I'm only mentioning Internet Explorer (IE) and Mozilla but if a method works in Mozilla, it will probably work in other browsers besides IE as well. To provide you with a complete overview, I felt it was necessary to mention the valid not working methods as well. "Officially" these methods should work, because this is how the W3C recommended the use of the object tag, but unfortunately they don't (in some cases).

Due to a MIME type configuration bug in Opera it won't evoke QuickTime in the object tag at all. The bug can be manually fixed by setting the MIME type "video/quicktime" to "Use plug-in" in the preferences. In Opera 8.0 this would be under "Tools - Preferences... - Advanced - Downloads", un-check "Hide file types opened with Opera", select the "video/quicktime" MIME type and click the "Edit..." button.
The Opera team confirmed this bug and they said it will probably be fixed in the next release (after version 8.0).

An example is provided for each method for you to be able to test it in your browser. Each example uses the same movie of 544 KB which will be cached on your system so it only has to be downloaded once.

  1. Minimum Requirements
  2. Official Method
  3. Conventional Method
  4. JavaScript Method
  5. Conditional Comments Method
  6. "Ideal" Method

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>

example 1a
Mozilla

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

example 1b

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>

example 2

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>

example 3

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>

example 4

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>

example 5

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

example 6