| Netscape (ver 7.2) |
Firefox (ver 1.5.7) |
Safari (ver 1.37) |
IE - Internet Explorer 6&7 |
|
| Macintosh |
Ok (except for window display
anomaly) |
Ok (except for window display anomaly) | Ok (except for window display anomaly and the embeds array does not work) | Not Available |
| Windows |
untested |
untested | Not Available | No javascript control of quicktime |
| Unix |
untested | untested | Not Available | untested |
Unfortunately even now there are few guides or tutorials for using Javascript to control quicktime. Even Apple's documentation does not do a good job of explaing. Here are some links that might be useful:
The example illustrates loading two files. One is a midi sound file called "Jesu-Joy.mid" and the other is a quicktime movie file called "test.mov". Your src would need to include the full or relative url leading to where your files are stored. (2 files are loaded here just for the sake of this example). Each file needs a name or id assigned because Javascript would need these properties to direct commands. The id/name of the first one is declared to be "movie1" and the second is declared as "movie2" in the first quictime instance. Quicktime loaded later is given different names such as movie3,movie4. You can pick whatever names you want. These OBJECT sequences are placed within the BODY html tags. This example is based on resources for an Apple developer What's New web page on Quicktime.
The height and width would need to be set appropriately for your files. Also note the setting of the property enablejavascript="true". This is required to make Quicktime able to respond to Javascript commands. Also you need to treat these quicktime files as visual elements of your page and use html, styles, tables, etc to position them on the page. The height must allow approximately 20 pixels extra for the controller if you are going to include it. This example places the 2 files side by side in a 2 column table; other html page elements have been omitted in the example code.Loading two files by Object and Embed method
| <BODY> ---- (other html code) ---- <table> <tbody> <tr> <td width="200"> <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="180" height="160" id="movie1"> <param name="src" value="jesu-joy.mid"> <param name="Autoplay" value="false"> <embed width="180" height="160" src="jesu-joy.mid" name="movie1" enablejavascript="true" autostart="false"> </object> <br> </td> <td width="200"> <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="180" height="160" id="movie2"> <param name="src" value="test.mov"> <param name="Autoplay" value="false"> <embed width="180" height="160" src="test.mov" name="movie2" enablejavascript="true" autostart="false"> </object> <br> </td> </tr> </tbody> </table> ---- (other html code)
|
Possible Workaround
proposed by Dave Comfort Comfort claims that putting the quicktime movie out of view at -1000, -1000 seems to solve the problem by fooling quicktime into thinking the movie is visible and allowing javascript control <body> <embed classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" id="QTPlayer" src="mansong.wav" volume="100" enablejavascript="true" type="audio/wav" height="16" width="200" style='position:absolute;left:-1000;top:-1000' > <div onclick="pause()">Pause</div> <div onclick="play()">Play</div> </body> |
| |
|
| <a href="javascript:document.jesu.Play();">javascript:document.movie1.Play()</a> |
| <a href="javascript:document.jesu.Play();">javascript:PlayIt(document.movie1);</a> |
|
function PlayIt(movname) { movname.Play(); } function StopIt(movname) { movname.Stop(); } |
| |
|
| javascript:document.movie3.SetRate(2.0) (double speed) | <a href="javascript:document.movie3.SetRate(2.0);"> javascript:document.movie3.SetRate(2.0)</a> |
| javascript:document.movie3.SetRate(1.0) (normal speed) | <a href="javascript:document.movie3.SetRate(1.0);">
javascript:document.movie3.SetRate(1.0) )</a> |
| javascript:document.movie3.SetTime(22000);
(22 seconds in - milliseconds - only for sound) note sound different than video javascript:document.movie4.SetTime(60); (video is indicated in frames - the movie above - movie4 is approx 10 frames/sec so 60 is 6 seconds - aprox 5/8 of movie) |
<a href="javascript:document.movie3.SetTime(22000);">
javascript:document.movie3.SetTime(22000) </a> <a href="javascript:document.movie4.SetTime(60);"> javascript:document.movie4.SetTime(60) </a> |
| javascript:document.movie3.SetVolume(128 (half Set 0-255) | <a href="javascript:document.movie3.SetVolume(128);">
javascript:document.movie3.SetVolume(128) </a> |
| javascript:document.movie3.SetVolume(255) (full vol) | <a href="javascript:document.movie3.SetVolume(255);"> javascript:documen.tmovie3.SetVolume(255) </a> |
| |
|
Creation of javascript functions to control sound placed in the Head section
| <html> <head> <title>example controls</title> <!--hiding <script language ="JavaScript"> function PlayIt(movname) function rewindIt(movname) function VolumeIt(movname,v) </script> |
For example, all the routines illustrated in sections above
could have called
one
of these functions rather than using direct Javascript reference to the
html code. The link
would call the PlayIt function and feed it the identifier for the sound
file - movie1 in this example. These functions are so simple that
not much is gained by using them instead of a direct reference to the
javascript quicktime control commands
Illustration of use of functions -
Controlling volume
| |
|
<script language = "Javascript"> //just the VolumeIt function is shown ----other functions<script> |
html to set up volume control button and indicator:<form name="volform1"> <input name="play tester" type="button" value="play jesu1" onclick="PlayIt(document.movie7);"> <input name="stop jesu1" type="button" value="stop jesu1" onclick="StopIt(document.movie7);"><br> Please set the volume you want and then click the button <br> <input name="volcontrol" type="button" value="Set volume" onclick="VolumeIt(document.movie7,document.volform1.level.value);">Volume level (0-255): <input name="level" type="text" value="128" size="3" maxlength="3"> <br> <input name="rate2" type="button" value="play 2x rate" onclick="SetRate(document.movie7,2.0);"> <input name="rate1" type="button" value="play normal rate" onclick="SetRate(document.movie7,1.0);"> </form> Note the new element here is the text field in which users can indicate desired volume level. In the html example above that text field is given the name "level" Then the onclick javascript refers to that field - "document.volform1.level" . The form's name is volform1 and the text field with the level is called "level" . The routine VolumeIt needs 2 parameters. The first is the name of the movie object being referred to movie7 and the second parameter is the rate desired document.volform1.level.value. |
| |
|

<map name="volmap"> |
The play and stop areas of the image call the same functions as the buttons illustrated in the section above. A simple function called upvol() controls raising the volume and a function called downvol() which lowers volume. The both work by using the Javascript GetVolume() function to read current volume, adding or subtracting 10 to the value, checking that limits have not been exceeded, putting the value into the form text item called levelindicator, and then using the setvol() function to set the new changed volume. The code appears below.
function downvol1(movname) { nowvol=movname.GetVolume(); nowvol=nowvol-10; if(nowvol<0) { nowvol=0 }; movname.SetVolume(nowvol); document.lev.levelindicator.value=nowvol } |
function
upvol1(movname) { nowvol=movname.GetVolume(); nowvol=nowvol+10; if(nowvol>255) { nowvol=255 }; movname.SetVolume(nowvol); document.lev.levelindicator.value=nowvol ; } |
These commands can be used directly attached to links or buttons
or incorporated into more complex Javascript funtions. The
command needs to reference the movie and then invoke the javascript
command.
The method of identifying the movie object can differ in different
browsers.
The examples above illustrated referring by name such as
"document.movie1" and
referring
by the array Javascript keeps of all objects that have been
loaded. In these examples regular HREF html is used
but
the url is replaced with the call to javascript. ** Note there
are
other commands available; see the Apple
developer What's New web page on Quicktime. Here is alist of
the javascript commands listed on that page.
| Play( Stop() Step(int count) SetRate(float rate) GetRate() SetTime(int time) GetTime() SetVolume(int volume) GetVolume() |
SetMovieName(string movieName)
GetMovieName() SetMovieID(int movieID) GetMovieID() SetStartTime(int time) GetStartTime() SetEndTime(int time) GetEndTime() |
SetIsLooping(boolean loop)
GetIsLooping() SetLoopIsPalindrome(boolean loop) GetLoopIsPalindrome() GetMute() SetMute(boolean mute) SetBgColor(string color) GetBgColor() |
Other plug ins use slightly different systems.
Microsoft windows media player ships with Explorer on windows
systems.
It is available on Mac systems. It claims to have some limited
Javascript
scriptability. Similarly flash video/shockwave offers javascript
capability. The principles would be similar. You would need to follow
the following steps similar to the javascript treatment described above.
The WebDeveloper's viritual library offers an
excellent
tutorial
on using Javascript to control Window's media player. Some of
the code is reproduced here to give you an idea of the similariites
with
Quicktime examples illustrated above.
The windows media object must be embedded with its
own
classId. The commands are slightly different. (Remember
they
won't work with newest w3org standards compliant browsers (eg Navigator
or Explorer 6) until the plug in is rewritten. (wmp 7.1 was not
compliant0 at one poing. See Windows
Media Player and Netscape 6.x
(*** Note This section of the tutorial has not been recently updated so
check online sources for the most current information.)
| Embedding code <OBJECT ID="WinMedia" width=160 height=120 </OBJECT> |
Sample of Javascript commands <A HREF="javascript:document.WinMedia.Play()">
<A HREF="javascript:document.WinMedia.Pause()">
<A HREF="javascript:document.WindMedia.Stop()">
|
For information on another plug-in here are links;
Infoarts
guide on how to use javascript to control Netscape's LiveAudio plug in
(LiveAudio was the main plug-in used by Netscape to control Audio
but now other plug-ins have come into prevalence.)
Web
Monkey tutorial on controlling real player.
Web
Review on javascript real player skin control
Microsoft
Developer Network information on bgsound for listing of possible
commands.
DrJavascript's pages on use of activeX to control audio in Explorer
- Embedding
Sound in Web Pages, Part I: Audio Control Example Code - Doc JavaScript
.
There are other approaches possible with Internet Explorer.
The bgsound method of embedding sounds also allows use of
Javascript.
Although details cannot be offered here, please visit Microsoft
Developer Network information on bgsound for listing of possible
commands.
Also, see DrJavascript's pages on use of activeX to control audio in
Explorer
- Embedding
Sound in Web Pages, Part I: Audio Control Example Code - Doc JavaScript
. Finally the Windows Media Player plugin responds to
its
particular set of javascript commands. (Unfortunately, even with
media player version 7 the newest browsers Netscape and Explorer
6 do not allow javascript controls because of the change to the w3 org
new standards for plugins.) The examples below should
be useful because they illustrate the ways javascript can be used to
control
sound and video.The approaches illustrated below should work with other
plug-ins provided you used the correct DOM identifiers and the
particular
javascript commands allowed with each plugin.. See
mini-tutorial
for Windows
Media Player below for more
details
Sniffers: Although it is beyond the scope of this
tutorial,
it should be possible to write Javascript functions that used detection
of browser, version, and os to make routines that would work in most
situations.
The function "sniffs" what browser the visitor is using and branches to
the appropirate commands. Here are links to some samples of
detectors.
** Note the Midi sequence of Bach's Jesu, Joy of Man's Desiring
used
this tutorial is from the wonderful MIDI archives site. Sequence ©
Pierre
R. Schwob - by permission
- This page created by Stephen
Wilson, Professor Conceptual/Information Arts(CIA), SFSU
(http://userwww.sfsu.edu/~swilson) swilson@sfsu.edu
|
Consideration #1 Plugp-in support: The plug in must be designed to be controllable by Javascript. Most are now. For example, Quicktime, Windows Media Plaayer, Netscape Live Audio, Real Player, Crescendo, etc claim to be controllable by Javascript. The web visitor must have their MIME options set to use the plug-in you are embedding although the new w3 standards will allow the original OBJECT command to specify the plug in to be used.
Consideration # 2 Communication between browser and plug-in. The Browser must be designed with the capabilility of letting Javascript talk to the plug in. Netscape introducted the "Live connect" method which both Navigator and Explorer supported the feature for a while. Complexities emerged. For some reason developers of the Mac version of Explorer left out that feature in Explorer 4 & 5. The Windows version of Explorer supposedly supports the feature although the author was not able to verify it.
The w3organization has introduced a new world wide web standard for communication between plug-ins and browsers called. xxxx. New versions of browsers will use this method in the future - for example, it is supported by netscape 6 and explorer 6. Plug in developers will similarly need to rewrite their plug ins to use this method. For example, quicktime 6 supports it while quicktime 5 does not. For now, the switch creates major compatibility problems although eventually the development environment will be easier.
Consideration # 3 The DOM (Document Object Model) Javascript requires the ability to identify the object in the web page that is to be acted on. The method for indicating objects is called the Document Object Model or DOM. Navigator, Explorer, and the W3org starnadars all use different methods of locating objects on a page. Thus javascript functions will need to be different in the way they identify the sound or video object. This is explained more below.
As an illustration of the complexities, this table summarizes
Quicktime
compatibility
Javascript Scriptability of the Quicktime plug in on various
versions
of browsers
| Browser/OS version | version 4 | version 5 | version 6 | version 7 |
| Windows Explorer |
yes1 ie-dom qt 5 & 6 |
yes1 ie-dom qt 5 & 6 |
yes1 w3dom 3 qt 6 only |
|
| Windows Navigator |
yes1 ie-dom qt 5 & 6 |
no version 5 | yes1 w3dom3 qt 6 only |
|
| Mac Explorer |
No (no javascript scripting)2 | No (no javascript scripting)2 | yes1 w3dom3 qt 6 only |
|
| Mac Navigator |
Yes nav-dom |
no version 5 | yes1 w3dom3 qt 6 only |
Different forms of DOM
(Document
Object Model): navigator = nav ie =
explorer
w3 = w3organization model
1 Documentation
suggests these should work but they are not fully tested or verified.
2 The
Macintosh version of Explorer 4 & 5 did not include the
interface
for quicktime scriptability
3
Browsers based on w3organization's standards for DOM's and for w3org
plug
in architecture Only quicktime 6 is compliant.
If you want more details, here are some links to developer sources
on
the javascript media control problems and possible work-arounds with
various
browser/plugins combinations