| |
Chapter 3: RealSystem: Embedding & Scripting
Example 1 - Controlling playback using JavaScript.
Example 2 - Controlling playback and accessing player properties using JavaScript
Example 3 - RealPlayer plug-in detection.
Links: RealPlayer Scripting
|
Embedded RealPlayer Extended Functionality Guide
Go
|
Example 1 - Controlling playback using JavaScript.
This is a simple example for a website with an embedded RealPlayer that is controlled by some JavaScript commands.
|
Source code:
|
|
<object id="realPlug1" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" WIDTH="320" HEIGHT="240">
<PARAM NAME="TYPE" VALUE="audio/x-pn-realaudio-plugin">
<PARAM NAME="CONTROLS" VALUE="ImageWindow">
<PARAM NAME="CONSOLE" VALUE="video1">
<PARAM NAME="SRC" VALUE="/media/realvideo8_sure.ram">
<PARAM NAME="AUTOSTART" VALUE="TRUE">
<embed type="audio/x-pn-realaudio-plugin"
name="realPlug1"
controls="ImageWindow"
console="video1"
src="/media/realvideo8_sure.ram"
width="320"
height="240"
autostart=true>
</embed>
</object><br>
<a href="#" onclick="document.realPlug1.DoPlay()">Play</a>
<a href="#" onclick="document.realPlug1.DoPause()">Pause</a>
<a href="#" onclick="document.realPlug1.DoStop()">Stop</a>
<a href="#" onclick="document.realPlug1.SetPosition( (document.realPlug1.GetLength()/100) *window.prompt('Where to jump (in percent)?','50'))">Jump</a>
|
|
|
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"><font size="-1">
clip title: <input type="text" name="clipTitel" size="30" readonly>
author: <input type="text" name="clipAuthor" size="30" readonly>
copyright: <input type="text" name="clipCopyright" size="30" readonly>
</font></form>
</td>
<td width="280" align="center">
<object id="realPlug1" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" WIDTH="320" HEIGHT="240">
<PARAM NAME="TYPE" VALUE="audio/x-pn-realaudio-plugin">
<PARAM NAME="CONTROLS" VALUE="ImageWindow">
<PARAM NAME="CONSOLE" VALUE="video1">
<PARAM NAME="SRC" VALUE="/media/realvideo8_sure.ram">
<PARAM NAME="AUTOSTART" VALUE="TRUE">
<embed type="audio/x-pn-realaudio-plugin"
name="realPlug1"
controls="ImageWindow"
console="video1"
src="/media/realvideo8_sure.ram"
width="320"
height="240"
autostart=true>
</embed>
</object>
<br> <font size="-1">
<a href="#" onclick="document.realPlug1.DoPlay()">Play</a>
<a href="#" onclick="document.realPlug1.DoPause()">Pause</a>
<a href="#" onclick="document.realPlug1.DoStop()">Stop</a>
<a href="#" onclick="document.realPlug1.SetPosition((document.realPlug1.GetLength()/100)*window.prompt('Where to jump (in percent)?','50'))">Jump</a> <br>
<a href="#" onclick="document.realPlug1.SetFullScreen()">Fullscreen</a>
<a href="#" onclick="document.realPlug1.SetShowStatistics(true)">Statistic</a>
</font><br></td>
<td>
<form action="" name="formular2"><font size="-1">
position: <input type="text" name="clipPosition" size="10" readonly>
clip length: <input type="text" name="clipLength" size="10" readonly>
percent played: <input type="text" name="percPos" size="3" readonly>
play status: <input type="text" name="playerStatus" size="1" 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 = document.realPlug1.GetPosition();
document.formular2.playerStatus.value = document.realPlug1.GetPlayState();
document.formular2.percPos.value = parseInt(document.realPlug1.GetPosition()/document.realPlug1.GetLength()*100);
}
function checkPlayer () {
document.formular1.clipTitel.value = document.realPlug1.GetTitle();
document.formular1.clipAuthor.value = document.realPlug1.GetAuthor();
document.formular1.clipCopyright.value = document.realPlug1.GetCopyright();
document.formular2.clipLength.value = document.realPlug1.GetLength();
}
</script>
<script language="JavaScript">
window.setTimeout("startCheckPlayer()",2500);
</script>
|
|
|
Example 3 - Cross-browser embedding with RealPlayer controls, sliders and panels.
The following example uses JavaScript to detect brwoser version, operating system and an installed RealPlayer.
|
|
Source code:
|
|
<script language="JavaScript">
var os = "Win";
var browser;
var real = false;
if (document.all) {
browser = "Microsoft Internet Explorer";
}
else if (document.layers) {
browser = "Netscape Communicator";
}
else if (document.getElementById) {
browser = "Netscape 6 or 7";
}
else {
browser = "Other than IE or Netscape.";
}
var realOnPC = false;
var realG2aOnPC = false;
var realG2bOnPC = false;
var isIE = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false; // true if we're on ie
var isWin = (navigator.appVersion.indexOf("Windows") != -1) ? true : false; // true if we're on windows
if(isIE && isWin){ // don't write vbscript tags on anything but ie win
document.write('<SCR' + 'IPT LANGUAGE=VBScript\> \n');
document.write('on error resume next \n');
document.write('realOnPC = IsObject(CreateObject("RealVideo.RealVideo(tm) ActiveX Control (32-bit).1")) \n');
document.write('realG2aOnPC = IsObject(CreateObject("RealPlayer.RealPlayer(tm) ActiveX Control (32-bit).1")) \n');
document.write('realG2bOnPC = IsObject(CreateObject("rmocx.RealPlayer G2 Control.1")) \n');
document.write('</SCR' + 'IPT\> \n'); // break up end tag so it doesn't end our script
}
if (browser=="Netscape Communicator" || browser=="Netscape 6") {
numPlugins = navigator.plugins.length;
for (i = 0; i < numPlugins; i++) {
plugin = navigator.plugins[i];
if (plugin.name.substring(0,17)=="RealPlayer(tm) G2") {
real=true;
}
}
}
if (browser=="Microsoft Internet Explorer" && (realG2aOnPC || realG2bOnPC)){
real = true;
}
document.write("<center>Browser type: <b>"+browser+"</b><br><br>");
document.write("Operating system: <b>"+navigator.platform+"</b><br><br>");
document.write("RealPlayer installed: <b>"+real+"</b></center>");
</script>
|
|
|
|
