Using JavaScript to Embed QuickTime Content

Apple provides a JavaScript utility to generate the required tags to embed QuickTime content in a web page. Using this utility greatly simplifies the necessary code to embed a movie, as it automatically supplies such information as the QuickTime Class ID, code base, and plugins page. This has two main advantages over typing the tags manually: it requires much less code; and it works seamlessly with Internet Explorer for Windows, versions 6 and later, avoiding the “Click OK to enable ActiveX control” dialog box.

To use the utility, first download the JavaScript file, AC_QuickTime.js, from http://developer.apple.com/internet/licensejs.html.

Include it in your web page by inserting the following line of code into your HTML head:

<script src="AC_QuickTime.js language="javascript"> </script>

Wherever you want QuickTime content to appear in your web page, place a line of JavaScript that calls the function QT_WriteOBJECT( ), passing the URL of the QuickTime content, the width and height of the display area, the preferred ActiveX version (typically left blank) and any optional QuickTime attributes. A simple example follows.

<script language="javascript>
    QT_WriteOBJECT('MyMovie.mov' , '320', '240' , '');
</script>

At run time, this will generate the correct <OBJECT> and <EMBED> tags and insert them into your web page. This example passes the URL MyMovie.mov, the filename of a QuickTime movie in the same directory as the web page. The allocated width is 320 pixels, and the allocated height is 240 pixels. The ActiveX version is left blank, so it defaults to the most recent version.

Important: The fourth parameter, the preferred ActiveX version, is typically left blank, but it may not be omitted. It is a mandatory entry.

Optional QuickTime parameters are passed as name/value pairs, that is, the name of the attribute is passed, followed by the value. An example follows.

<script language="javascript>
    QT_WriteOBJECT('../Movies/MyMovie.mov' , '100%', '95%', '', 'AUTOPLAY', 'True', 'SCALE', 'Aspect') ;
</script>

In this example, the URL is ../Movies/MyMovie.mov, the allocated width is 100% of the browser window, the allocated height is 95% of the browser window, the ActiveX version is left blank, the AUTOPLAY attribute is set to True, and the SCALE attribute is set to Aspect. The movie will autoplay, scaled to fill almost the entire browser window, while preserving the movie’s aspect ratio.

In rare instances, you may want to pass different parameters to the <OBJECT> and <EMBED> tags, or pass a parameter to only the one of the tags. You can do this by prefacing the name of the attribute with #obj or #emb.

The following example passes different movies to the <OBJECT> and <EMBED> tags in the QTNEXT parameter. In this example, after MyMovie.mov plays, viewers whose browsers executed the <OBJECT> tag (typically users of Internet Explorer for Windows) will see IEUsers.mov, while all others will see AllOthers.mov

<script language="javascript>
    QT_WriteOBJECT('MyMovie.mov' , '100%', '95%', '', '#objQTNEXT1', 'IEUsers.mov', '#embQTNEXT1', 'AllOthers.mov') ;
</script>

In addition the the QT_WriteOBJECT function, the JavaScript utility provides three other functions, which use the same input syntax as QT_WriteOBJECT.

QT_GenerateOBJECTText generates the same output as QT_WriteOBJECT, but instead of inserting it into your HTML, it returns the output as a text string, allowing you to inspect it or modify it.

QT_WriteOBJECT_XHTML generates and inserts the OBJECT and EMBED tags in your file using strict XHTML syntax, and should be used if you are embedding QuickTime in XHTML rather than HTML.

QT_GenerateOBJECTText_XHTML generates the same output as QT_WriteOBJECT_XHTML, but instead of inserting it into your XHTML, it returns it as a text strting.

For more information on embedding QuickTime content in HTML, see HTML Scripting Guide for QuickTime.

http://developer.apple.com/documentation/QuickTime/Conceptual/QTScripting_JavaScript/bQTScripting_JavaScri_Document/chapter_1000_section_3.html

Leave a Reply