| |
Chapter 4: Windows Media: Embedding & Scripting
Example 1 - Controlling playback using JavaScript.
Example 2 - Controlling playback and accessing player properties using JavaScript
Example 3 - Windows Media Player plug-in detection.
Links: Windows Media Player Scripting
|
MSDN: Advanced Scripting for Cross-Browser Functionality
MSDN article about cross-browser embedding and scripting.
Go
|
Example 1 - Controlling playback using JavaScript.
This is a simple example for a website with an embedded Windows Media Player that is controlled by some JavaScript commands.
|
Source code:
|
|
<OBJECT ID="MediaPlayer" width=320 height=240
classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/
en/nsmp2inf.cab#Version=6,4,5,715"
standby="Loading Microsoft Windows Media Player components..."
type="application/x-oleobject">
<PARAM NAME="AutoStart" VALUE="True">
<PARAM NAME="FileName" VALUE="mms://www.streaming-media.info/media/wm_demo.wmv">
<PARAM NAME="ShowControls" VALUE="False">
<PARAM NAME="ShowStatusBar" VALUE="False">
<EMBED type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
SRC="mms://www.streaming-media.info/media/wm_demo.wmv"
name="MediaPlayer"
width=320
height=240
autostart=1
showcontrols=0>
</EMBED>
</OBJECT>
<br>
<a href="#" onclick="document.MediaPlayer.Play()">Play</a>
<a href="#" onclick="document.MediaPlayer.Pause()">Pause</a>
<a href="#" onclick="document.MediaPlayer.Stop()">Stop</a>
|
|
|
Example 2 - Controlling playback and accessing player properties using JavaScript
Additionally to the JavaScript 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%" cellpadding="4" border="0">
<tr>
<td>
<form action="" name="formular1"><font size="-1">
clip title:
<input type="text" name="clipTitel" size="30" readonly> <br>
author:
<input type="text" name="clipAuthor" size="30" readonly><br>
copyright:
<input type="text" name="clipCopyright" size="30" readonly>
</font></form>
</td>
<td width="280" align="center">
<OBJECT ID="MediaPlayer" width=320 height=240
classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/
en/nsmp2inf.cab#Version=6,4,5,715"
standby="Loading Microsoft Windows Media Player components..."
type="application/x-oleobject">
<PARAM NAME="AutoStart" VALUE="True">
<PARAM NAME="FileName" VALUE="mms://www.streaming-media.info/media/wm_demo.wmv">
<PARAM NAME="ShowControls" VALUE="False">
<PARAM NAME="ShowStatusBar" VALUE="False">
<EMBED type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
SRC="mms://www.streaming-media.info/media/wm_demo.wmv"
name="MediaPlayer"
width=320
height=240
autostart=1
showcontrols=0>
</EMBED>
</OBJECT>
<br>
<a href="#" onclick="document.MediaPlayer.Play()">Play</a>
<a href="#" onclick="document.MediaPlayer.Pause()">Pause</a>
<a href="#" onclick="document.MediaPlayer.Stop()">Stop</a><br>
<br></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="clipLength" size="10" readonly><br>
percent played:<br>
<input type="text" name="percPos" size="3" readonly><br>
play status:<br>
<input type="text" name="playerStatus" size="3" 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.MediaPlayer.currentPosition);
document.formular2.playerStatus.value = document.MediaPlayer.PlayState;
document.formular2.percPos.value = parseInt(document.MediaPlayer.currentPosition / document.MediaPlayer.duration*100);
}
function checkPlayer () {
document.formular1.clipTitel.value = document.MediaPlayer.GetMediaInfoString(8);
document.formular1.clipAuthor.value = document.MediaPlayer.GetMediaInfoString(9);
document.formular1.clipCopyright.value = document.MediaPlayer.GetMediaInfoString(10);
document.formular2.clipLength.value = parseInt(document.MediaPlayer.duration);
}
</script>
<script language="JavaScript">
window.setTimeout("startCheckPlayer()",2500);
</script>
|
|
|
Example 3 - Windows Media 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 Mediaplayer object. If this possible a Windows Media Player installation is available.
I also included another script that detects the version of an installed Windows Media Player in Internet Explorer (© Webocaster)
|
|
Source code:
|
|
<script language="JavaScript">
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 newer";
}
else {
browser = "Other than Netscape or IE.";
}
var wminst = 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('wminst =
IsObject(CreateObject("MediaPlayer.MediaPlayer.1"))');
document.write('</SCR' + 'IPT\> \n'); // break up end tag so it doesn't end our script
}
if (browser=="Netscape Communicator" || browser=="Netscape 6 or newer") {
numPlugins = navigator.plugins.length;
for (i = 0; i < numPlugins; i++) {
plugin = navigator.plugins[i];
if (plugin.name.indexOf("Windows Media Services")!=-1) {
wminst=true;
}
}
}
document.write("<center>Browser: <b>"+browser+"</b><br><br>");
document.write("Operating system: <b>"+navigator.platform+"</b><br><br>");
document.write("Windows Media Player installed: <b>"+wminst+"</b></center>");
</script>
//detect player version on IE
<OBJECT classid=CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95
codeBase=#Version=6,4,5,715 height=1 id=WMP64 width=1></OBJECT>
<OBJECT classid=CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6
codeBase=#Version=7,0,0,1954 height=1 id=WMP7 width=1></OBJECT>
<SCRIPT language=VBScript>
<!--
On error resume next
WB_DWM52 = (IsObject(CreateObject("MediaPlayer.MediaPlayer.1") ) )
WB_DWM64 = (WMP64.FileName="")
WB_DWM79 = WMP7.versionInfo
//-->
</SCRIPT>
<SCRIPT language=JavaScript>
var WB_WM="undefined";
if (document.all) {
if( WB_DWM79 ) {WB_WM=WB_DWM79.slice(0,3);}
else if( WB_DWM64 ) {WB_WM="6.4";}
else if( WB_DWM52 ) {WB_WM="5.2";}
else {WB_WM="undefined";}
document.write('<hr width="90%"> Installed Windows Media Player Version: ' + WB_WM + '');
}
</SCRIPT>
|
|
|
|
