Advanced Search

Log In | Not a Member?

Contact ADC

< Previous PageNext Page > Hide TOC

Controlling QuickTime Using JavaScript

QuickTime exposes a powerful set of objects, properties, and methods to JavaScript. The objects include QuickTime itself, the browser plug-in, any embedded movies, and all the tracks within those movies.

The methods allow you to control a movie—start it, stop it, step it forward or back, or replace it with another movie. Setting properties allows you to control how a movie behaves—enable and disable tracks, select a language, change a video track’s size, position, and rotation, modify a sound track’s volume, set the movie’s rate of play and direction, set or unset looping, and so on.

Getting properties allows you to obtain information—the installed version of the QuickTime plug-in, the duration of a movie, what percentage of it has been downloaded, whether it is playing or has finished, how many tracks it has, and more.

Recent versions of the QuickTime plug-in are fully scriptable using JavaScript in most browsers for the Mac OS and Windows. There are exceptions, however, depending on the QuickTime version, browser type, browser version, and operating system.

In this section:

Supported Interfaces
Supported Browsers and Operating Systems
Before You Start
Addressing QuickTime Movies
JavaScript Usage Example

Supported Interfaces

Not all browsers support communication between JavaScript and plug-ins. Those that support such communication do so using a variety of interfaces, including LiveConnect, COM (ActiveX), XPCOM, npruntime, and Cocoa. QuickTime currently supports all of these interfaces.

Support for LiveConnect was added to QuickTime in version 4.1. Support for COM, XPCOM, and Cocoa were added in QuickTime 6. Support for npruntime was added in QuickTime 7.1.6.

Supported Browsers and Operating Systems

The QuickTime plug-in is scriptable from all browsers that support the LiveConnect, XPCOM, Cocoa, npruntime, or COM interface. This includes all versions of Netscape and Mozilla for Windows and Macintosh, AOL 5 and later for Windows, Firefox, Opera, MSN 6 and later, and all versions of Internet Explorer for Windows.

In QuickTime 7 and later, the QuickTime plug-in is scriptable from the Safari browser; Safari 2.0 or later is required (Safari 1.3 or later is supported on Panther). Safari for Windows is also supported.

Before You Start

The browser must load a copy of the QuickTime plug-in before you can query or control QuickTime using JavaScript. In addition, the interface between the browser and the plug-in must be initialized. In most cases, you also want to give an embedded movie a name so it can be addressed by name in your script.

This is accomplished by the following steps:

• Use the HTML <EMBED> tag and <OBJECT> tag to cause the browser to load a copy of the QuickTime plug-in.

• Set the attribute EnableJavaScript=”true” in the <EMBED> tag.

• Set the <OBJECT> id attribute and the <EMBED>NAME attribute to a name for the movie. Use the same name for both attributes.

• If you are using QuickTime DOM events, set an id attribute for the <EMBED> tag as well, using a unique value.

The easiest way to perform these steps is to include the AC_QuickTime.js script and pass the name and id attributes, set to the same value, along with the movie url and other parameters.

An example that loads the QuickTime plug-in, enables JavaScript, and gives a name to a movie is shown in listing 1-3.

Listing 1-3  Load QuickTime, enable JavaScript, assign a name

<OBJECT

classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"

codebase="http://www.apple.com/qtactivex/qtplugin.cab"

width="320" height="256"

id="movie1">

<PARAM name="src" value="MyMovie.mov">

<EMBED HEIGHT=256 WIDTH=320

SRC="MyMovie.mov"

TYPE="video/quicktime"

PLUGINSPAGE="www.apple.com/quicktime/download"

EnableJavaScript="true"

NAME="movie1"

/>

</OBJECT>

You can dramatically shorten the previous code example by taking advantage of the AC_QuickTime.js file, as described in “Using JavaScript to Detect QuickTime.” The shortened code is shown in Listing 1-4.

Listing 1-4  Enabling JavaScript Using AC_QuickTime.js

<script language="javascript" type="text/javascript">

    QT_WriteOBJECT('MyMovie.mov' , '320', '256', '', 'EnableJavaScript', 'True', 'emb#NAME' , 'movie1' , 'obj#id' , 'movie1') ;

</script>

See HTML Scripting Guide for QuickTimefor more information about the <EMBED> and <OBJECT> tags and the attributes or parameters that can be passed to QuickTime.

Addressing QuickTime Movies

JavaScript treats each embedded QuickTime movie in a web page as a separately addressable object.

All methods are addressed to a movie. Methods that act on a movie are addressed to the target movie. Methods that operate on a track are addressed to the track’s parent movie (the track is specified in a parameter). Methods that operate on QuickTime or the QuickTime plug-in can be addressed to any movie embedded in the document.

Movies can be identified by name if there is a NAME attribute in the movie’s EMBED tag and an id attribute in the movie’s OBJECT tag. Internet Explorer for Windows uses the id attribute. All other browsers use the NAME parameter. Both NAME and id should be set to the same value.

Because Internet Explorer and some other browsers do not always support the embeds[] array, it is recommended that you assign a name to each movie and address the movie by name in your script, instead of addressing movies by their place in the document.embeds[] array.

JavaScript Usage Example

Listing 1-5 gives an example of JavaScript usage with QuickTime.

Listing 1-5  Using JavaScript to play, stop, and replace a QuickTime movie

<html>

 <head>

         <title>Simple QuickTime Movie Controls</title>

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

</script>

 </head>

 <body >

        <P>

        This page uses JavaScript to control a QuickTime movie...

        </P>

<div align=center>

      <table>

           <tr>

           <td width=200>

           <script language="javascript" type="text/javascript">

           QT_WriteOBJECT('MyMovie.mov', '180','160', '',

           'obj#id', 'movie1', 'emb#name', 'movie1', 'enablejavascript', 'true');

           </script>

           <P> Movie1 </P>

           </td>

           <td width=200>

           <script language="javascript" type="text/javascript">

           QT_WriteOBJECT('MyOtherMovie.mov', '180','160', '',

           'obj#id', 'movie2', 'emb#name', 'movie2', 'enablejavascript', 'true');

           </script>

           <P> Movie2 </P>

           </td>

           </tr>

      </table>

</div>

 <P>Play and Stop Movies: <br>

 <a href="javascript:document.movie1.Play();">Play Movie1</a><br>

 <a href="javascript:document.movie1.Stop();">Stop Movie1</a><br>

 <a href="javascript:document.movie2.Play();">Play Movie2</a><br>

 <a href="javascript:document.movie2.Stop();">Stop Movie2</a><br>

 </P>

 <P>Replace One Movie with Another: <br>

 <a href="javascript:document.movie1.SetURL('MyOtherMovie.mov');">movie1.SetURL(MyOtherMovie.mov)</a>

<br>

 <a href="javascript:document.movie1.SetURL('MyMovie.mov');">movie1.SetURL(MyMovie.mov)</a>

<br>

 <a href="javascript:document.movie2.SetURL('MyOtherMovie.mov');">movie2.SetURL(MyOtherMovie.mov)</a>

<br>

<a href="javascript:document.movie2.SetURL('MyMovie.mov');">movie2.SetURL(MyMovie.mov)</a><br>

 </P>

 </body>

 </html>

< Previous PageNext Page > Hide TOC

Did this document help you? Yes: Tell us what works for you. It’s good, but: Report typos, inaccuracies, and so forth. It wasn’t helpful: Tell us what would have helped.

	Get information on Apple products. Visit the Apple Store online or at retail locations. 1-800-MY-APPLE Copyright © 2007 Apple Inc. All rights reserved. | Terms of use | Privacy Notice