Chapter 1: Synopsis and Basics
Chapter 2: Production
Chapter 3: RealMedia
Chapter 4: Windows Media
Chapter 5: QuickTime
Code and Examples: Embedding
Code and Examples: Scripting and PlugIn Detection
Chapter 6: Further Solutions
About the author...
Click here for information
Back to start page.





 

Chapter 5: QuickTime: Embedding & Scripting


Example 1 - Controlling playback using JavaScript.
Example 2 - Controlling playback and accessing player properties using JavaScript
Example 3 - QuickTime Player plug-in detection.


Links: QuickTime Player Scripting

Open this link.

QuickTime API Documentation:
JavaScript Support. Go
Open this link.

QuickTime API Documentation:
Sample JavaScript Usage. Go


Example 1 - Controlling playback using JavaScript.

This is a simple example for a website with an embedded QuickTime Player that is controlled by some JavaScript commands.

Source code:
<OBJECT classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab"
width="320" height="255"
id="movie1" >
<PARAM name="src" value="/media/qt6_bb.mp4">
<PARAM name="autoplay" value="false">
<PARAM name="controller" value="true">
<PARAM name="pluginspage" value="http://www.apple.com/quicktime/download/">
<EMBED width="320" height="255"
src="/media/qt6_bb.mp4"
name="movie1"
enablejavascript="true"
autoplay="false"
controller="true"
pluginspage="http://www.apple.com/quicktime/download/">
</EMBED>
</OBJECT><br>
<a href="#" onclick="document.movie1.Play()">Play</a>
<a href="#" onclick="document.movie1.Stop()">Stop</a>
<a href="#" onclick="document.movie1.SetTime( ((document.movie1.GetDuration()/100) * window.prompt('Where to jump (in percent)?','50')))">Jump</a>

See it in action.

Back to top of page.


Example 2 - Controlling playback and accessing player properties using JavaScript

Additionally to the JavaScrpt controls in example 1 we now add several functions that display the player status and update this every second.

Source code:
<table align="center" width="100%" cellspacing="2" cellpadding="2" border="0">
;<tr><td>
<form action="" name="formular1">
QuickTime version: <input type="text" name="qtVer" size="30" readonly><br>
QuickTime language: <input type="text" name="qtLang" size="30" readonly><br>
Connection speed (Kbps): <input type="text" name="qtSpeed" size="30" readonly>
</form>
</td>
<td width="280" align="center">

<OBJECT classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab"
width="320" height="255"
id="movie1" >
<PARAM name="src" value="/media/qt6_bb.mp4">
<PARAM name="autoplay" value="false">
<PARAM name="controller" value="true">
<PARAM name="pluginspage" value="http://www.apple.com/quicktime/download/">
<EMBED width="320" height="255"
src="/media/qt6_bb.mp4"
name="movie1"
enablejavascript="true"
autoplay="false"
controller="true"
pluginspage="http://www.apple.com/quicktime/download/">
</EMBED>
</OBJECT><br>

<a href="#" onclick="document.movie1.Play()">Play</a>
<a href="#" onclick="document.movie1.Stop()">Stop</a>
<a href="#" onclick="document.movie1.SetMute(!document.movie1.GetMute()
)">Mute</a>
<a href="#" onclick="document.movie1.SetTime( ((document.movie1.GetDuration()/100) * window.prompt('Where to jump (in percent)?','50')))">Jump</a>

</td>
<td>
<form action="" name="formular2"><font size="-1">
Position:<br> <input type="text" name="clipPosition" size="10" readonly> <br>
Clip length:<br> <input type="text" name="clipLaenge" size="10" readonly><br>
Percent played:<br> <input type="text" name="percPos" size="3" readonly><br>
Percent loaded:<br> <input type="text" name="percLoad" size="3" readonly><br>
Plugin status:<br> <input type="text" name="playerStat" size="10" readonly>
</font></form>
</td></tr>
</table>

<script language="JavaScript">
function startCheckPlayer() {
window.setTimeout("checkPlayer()",1000);
window.setInterval("checkPlayerStatus()",1000);
}
function checkPlayerStatus() {
document.formular2.clipPosition.value = parseInt(document.movie1.GetTime());
document.formular2.playerStat.value = document.movie1.GetPluginStatus();
document.formular2.percPos.value = parseInt(document.movie1.GetTime()/document.movie1.GetDuration()*100);
document.formular2.percLoad.value = parseInt(document.movie1.GetMaxTimeLoaded()/document.movie1.GetDuration()*100);
}
function checkPlayer () {
document.formular1.qtVer.value = document.movie1.GetQuickTimeVersion();
document.formular1.qtLang.value = document.movie1.GetQuickTimeLanguage();
document.formular1.qtSpeed.value = document.movie1.GetQuickTimeConnectionSpeed();
document.formular2.clipLaenge.value = parseInt(document.movie1.GetDuration());
}
window.setTimeout("checkPlayer()",1000);
window.setInterval("checkPlayerStatus()",1000);
</script>
<script language="JavaScript">
window.setTimeout("startCheckPlayer()",2500);
</script>

See it in action.

Back to top of page.


Example 3 - QuickTime Player plug-in detection.

The following example uses JavaScript to detect brwoser version, operating system and an installed Windows Media Player.
Since Internet Explorer and Netscape use different approaches to integrate plug-ins, we also have to use different approaches to detect the installed Windows Media Player.
First we write a JavaScript that loops through the navigator.plugins object in Netscape browsers. This object is also used to display all installed plug-ins (in Netscape: Help: About Plug-Ins.). The property navigator.plugin.name contains the name of the plug-in.
If the script is executed in the Internet Explorer it simply calls a VBScript, that tries to initiate a QuickTimeCheckObject object. If this possible the QuickTime Player ActiveX control is available.

Source code:
<script language="JavaScript">
var browser;
var haveqt = false;
if (document.all) {
browser = "Microsoft Internet Explorer";
}
else if (document.layers) {
browser = "Netscape Communicator";
}
else if (document.getElementById) {
browser = "Netscape 6 or higher";
}
else {
browser = "unknown";
}

var isIE = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
var isWin = (navigator.appVersion.indexOf("Windows") != -1) ? true : false;

if(isIE && isWin){
document.write('<SCR' + 'IPT LANGUAGE=VBScript\> \n');
document.write('on error resume next \n');
document.write('haveqt = IsObject(CreateObject("QuickTimeCheckObject.QuickTimeCheck.1"))');
document.write('</SCR' + 'IPT\> \n');
}

if (browser=="Netscape Communicator" || browser=="Netscape 6") {
for(i=0; i<navigator.plugins.length; i++) {
if (navigator.plugins[i].name.indexOf("QuickTime") >= 0) {
haveqt = true;
}
}
}

document.write("<center>Browser: <b>"+browser+"</b><br><br>");
document.write("Operating system: <b>"+navigator.platform+"</b><br><br>");
document.write("QuickTime Player installed: <b>"+haveqt+"</b></center>");
</script>

See it in action.
     
Synopsis and Basics  Production  RealMedia  Windows Media  QuickTime
Further Solutions  About the author
Any bugs, problems or comments? Please send a mail.
Copyright © 2003 Tobias Künkel.