Re: Windows Media embedded player problem - generate menu from ASX file

Tech Tip: Click here to run a free scan for Windows Errors and optimize PC performance

Thanks for your detailed information. As you realise, Firefox plugin
doesn't implement the hooks to read the ASX file contents (the FF
plugin "stops" at the top level player object).

Instead you can operate a cross-browser solution in this way :

Install a simple Ajax library, such as Prototype or JQuery. Now during
page load, make an Ajax call for the contents of the ASX file.

Although it's not *strictly* XML, it will be well formed enough (if
you personally create the ASX file) to be treated as XML

Consequently you can use DOM on this file to extract the nodes and
attributes you require to created the menu.

I'll probably put up a code sample in a few days if you haven't been
able to work it out by then ;-)

Cheers - Neil


On Fri, 15 Dec 2006 19:26:05 -0500, Ellen <ellen@xxxxxxxxxxxxxxxxxx>
wrote:

I am creating an embedded Windows Media Player for the web which will have a
variety of features useful in our elearning modules. I want to be able to
grab data from the ASX file and use it to generate a menu. I have this
working pretty well in IE, but not in Firefox on the PC, with ActiveXPlugin
installed.

The example is here:

[URL="http://thedesignspace.net/videowidget/index.htm"]videowidget[/URL]

I don't think there is a fundamental reason that this doesn't work in FF,
since I had it partially working before. It was pulliing the titles of each
entry and displaying them in alerts. I am not sure what I am doing wrong
now.
________________________
videocontrols.js:

function toggleBackground(selectedLayer){
var div = getElementsByClass(document, 'toggle', 'td');
for(var i=0; i<div.length; i++){

div[i].style.background='url(media/videowidget/UP/chapterButton.jpg)
no-repeat';
}
el=document.getElementById(selectedLayer);
el.style.background='url(media/videowidget/ACTIVE/chapterButton.jpg)
no-repeat';
el.className+=' currChap';
}

//these control the mousedown effects on the scrolling buttons.

function on(selectedLayer) {
el=document.getElementById(selectedLayer);
el.style.background='url(media/videowidget/OVER/chapterButton.jpg)
no-repeat';
}

function off(selectedLayer) {
el=document.getElementById(selectedLayer);
if (el.className=='toggle currChap'){
el.style.background='url(media/videowidget/ACTIVE/chapterButton.jpg)
no-repeat';
}
else
el.style.background='url(media/videowidget/UP/chapterButton.jpg)
no-repeat';
}


function goTo(selectedLayer,itemNo){
toggleBackground(selectedLayer);
var WMP9= document.getElementById('mediaPlayer');
WMP9.controls.currentItem = WMP9.currentPlaylist.item(itemNo);
WMP9.controls.play();
}

function cMouseover(theButton){
document.getElementById(theButton).style.background='url(media/videowidget/O
VER/'+theButton+'.jpg)'; }
function cMouseout(theButton){
document.getElementById(theButton).style.background='url(media/videowidget/U
P/'+theButton+'.jpg)'; }
function cPlay(){ document.mediaPlayer.controls.play(); }
function cStop(){ document.mediaPlayer.controls.stop(); }
function cPause(){ document.mediaPlayer.controls.pause(); }
function cReplay(){ document.mediaPlayer.currentItem.play(); }
function cNext(){ document.mediaPlayer.controls.next(); }

//these functions grab info from the asx file and generate the menu on left

function loadPlayItems() {
dp=document.getElementById("chaptersDiv");
WMP9=document.getElementById("mediaPlayer");
WMP9.url="multiItemTest.asx";
WMP9.controls.play();
var pl = WMP9.currentPlaylist;
//alert(pl.sourceURL);
}


function showPlayItems() {
//alert('hi');
WMP9=document.getElementById("mediaPlayer");
var pl = WMP9.currentPlaylist;
var playlistItems=pl.count;
//alert(playlistItems);
for (i=0; i<playlistItems; i++) {
var oneLink=(' id=\"btn'+ i +'\" class=\"toggle\"
onmouseover=\"on(this.id)\" onmouseout=\"off(this.id)\"
onmousedown=\"goTo(this.id, '+ i +')\">'+pl.item(i).name);
//alert('<div'+oneLink+'</div>')

dp.innerHTML+=('<div'+oneLink+'</div>');
//dp.innerHTML+=('hello');
}
playListLoaded=true;
WMP9.controls.stop();
}
________________________


multiItemTest.asx:

<ASX version = "3.0">
<ENTRY>

<STARTTIME VALUE = "00:00:00:00"/>
<DURATION VALUE = "00:01:00:00"/>
<REF
HREF="mms://ummcvideo02.mcit.med.umich.edu/compliance/fish/eggie.wmv"/>
<TITLE>first item</TITLE>
</ENTRY>


<ENTRY>
<TITLE>second item</TITLE>
<STARTTIME VALUE = "00:01:00:00"/>
<DURATION VALUE = "00:01:00:00"/>
<REF
HREF="mms://ummcvideo02.mcit.med.umich.edu/compliance/fish/eggie.wmv"/>
</ENTRY>

<ENTRY>
<TITLE>third item</TITLE>
<STARTTIME VALUE = "00:02:00:00"/>
<DURATION VALUE = "00:01:00:00"/>
<REF
HREF="mms://ummcvideo02.mcit.med.umich.edu/compliance/fish/eggie.wmv"/>
</ENTRY>

<ENTRY>
<TITLE>fourth item</TITLE>
<STARTTIME VALUE = "00:03:00:00"/>
<DURATION VALUE = "00:01:00:00"/>
<REF
HREF="mms://ummcvideo02.mcit.med.umich.edu/compliance/fish/eggie.wmv"/>
</ENTRY>
</ASX>
________________________

player1.js:

function writeJS(){
var str='';
str+=' <OBJECT classid = "clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6"';
str+='
codebase="http:\/\/activex.microsoft.com\/activex\/controls\/mplayer\/en\/ns
mp2inf.cab#Version=6,4,7,1112"';
str+='standby="Loading Microsoft Windows Media Player components..."';
str+='type="application\/x-oleobject" id = "mediaPlayer" name=
"mediaPlayer" width="300" height=200>';
str+=' <param name="autostart" value="0">';
str+=' <param name="showcontrols" value="0">';
str+=' <param name="uimode" value="none">';
str+=' <param name="stretchtofit" value="0">';
str+=' <param name="captioningID" value="captionTD"> ';
str+=' <param name="URL" value="\multiItemTest.asx" \/> ';
str+=' <param name="filename" value="multiItemTest.asx" /> ';
str+=' <\/OBJECT>';
//alert(document.getElementById('playerDiv').innerHTML);
document.getElementById('playerArea').innerHTML=(str);
}
writeJS();




________________________




index.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>videowidget</title>

<link href="css-local/videowidget.css" rel="style***" type="text/css" />

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

<script language="javascript" type="text/javascript">
//var playlistloaded=false;
//var gWMVob,gMOVob;
/*function initQT() {
//gMOVob = document.getElementById("vidObjectMOV");
gWMVob = document.getElementById("vidObjectWMV");
}

function playIt() {
// gMOVob.Play();
gWMVob.Play();
}
function pauseIt() {
// gMOVob.Stop();
gWMVob.Stop();
}*/
</script>
<script type="text/javascript">
var clipTop = 1; //position of top of clipped buttonsdiv from top of
widgetContainer
var clipWidth = 184; // width of clipped buttonsDiv
var clipBottom = 233;
var topper = 55; //topper keeps track of the top of the entire layer during
the scrolling. Default value is the same as that of the top property in the
style ***, 300 pixels in this case.
var lyrheight = 0;
</script>
<!--[if IE]>
<SCRIPT language="JavaScript" type="text/javascript">
//var clipTop = 1;
//var clipWidth = 280;
//var clipBottom = 220;
//var topper = -50;
//var lyrheight = 233;
</SCRIPT>
<![endif]-->

<script language="javascript" type="text/javascript"
src="scroll.js"></script>
</head>

<!--<BODY onload="loadPlayItems();init();initQT();">-->

<body onload="init();loadPlayItems();">
<div id="widgetContainerTbl">
<table border="0" cellpadding="0" cellspacing="0" id="lftColTbl">
<tr>
<td id="topLftCell"
onmouseover="scrollayer('chaptersDiv',-30,100);document.getElementById('topL
ftCell').style.background='url(media/videowidget/OVER/topLftCorner.jpg)';"

onmouseout="stopScroll();document.getElementById('topLftCell').style.backgro
und='url(media/videowidget/UP/topLftCorner.jpg)';" title="Scroll Down"
</td></tr>
<tr>
<td id="scrollTD" >
<div id="chaptersDiv">

</div>
</td>
</tr>
<tr><!--the following cell contains the "MORE" button as a background
image. -->
<td id="moreTD"
onmouseover="scrollayer('chaptersDiv',30,100);document.getElementById('moreT
D').style.background='url(media/videowidget/OVER/moreBtn.jpg)';"

onmouseout="stopScroll();document.getElementById('moreTD').style.background=
'url(media/videowidget/UP/moreBtn.jpg)';" title="More sections" ></td>
</tr>
<tr>
<td id="leftMiddle2TD"></td>
</tr>
<tr>
<td id="leftBottomTD"></td>
</tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" id="midColTbl">
<tr>
<td><img name="topMiddle" src="media/videowidget/UP/topMiddle.jpg"
width="326" height="55" border="0" id="topMiddle" alt="" /></td>
</tr>
<tr>
<td id="playerArea" >
<div id="playerDiv"></div>




<!--<script language="JavaScript" type="text/javascript"
src="videocontrols.js"></script>-->

</td>
</tr>
<tr>
<td id="captionTD"></td>
</tr>
<tr>
<td >
<table border="0" cellspacing="0" cellpadding="0" id="controlsTable">
<tr>
<td id="ctrlPlay" onclick="cPlay();" onmouseover="cMouseover(this.id);"
onmouseout="cMouseout(this.id);"></td>
<td id="ctrlStop" onclick="cStop();" onmouseover="cMouseover(this.id);"
onmouseout="cMouseout(this.id);"></td>
<td id="ctrlPause" onclick="cPause();"
onmouseover="cMouseover(this.id);" onmouseout="cMouseout(this.id);"></td>
<td id="ctrlSpace">&nbsp;</td>
<td id="ctrlReplay" onclick="cReplay();"
onmouseover="cMouseover(this.id);" onmouseout="cMouseout(this.id);"></td>
<td id="ctrlNext" onclick="cNext();" onmouseover="cMouseover(this.id);"
onmouseout="cMouseout(this.id);"></td>
</tr>
</table> </td>
</tr>
</table>


<table width="200" border="0" cellpadding="0" cellspacing="0"
id="rtColTbl">
<tr>
<td><img name="topRtCorner"
src="media/videowidget/UP/topRtCorner.jpg" width="210" height="55"
border="0" id="topRtCorner" alt="" /></td>
</tr>
<tr>
<td><img name="quizArea" src="media/videowidget/UP/quizArea.jpg"
width="210" height="335" border="0" id="quizArea" alt="" /></td>
</tr>
<tr>
<td><img name="botRightCorner"
src="media/videowidget/UP/botRightCorner.jpg" width="210" height="53"
border="0" id="botRightCorner" alt="" /></td>
</tr>
</table>
</div>
<!--
<a href="#" onclick="playIt();return false;">play</a>
<a href="#" onclick="pauseIt();return false;">pause</a>-->



<p id="test">&nbsp;</p>
<p>&nbsp;</p>
</body>

</html>

<script language="JavaScript" type="text/javascript"
src="videocontrols.js"></script>
<script type="text/javascript" src="player1.js"></script>
<script type="text/javascript" language="javascript1.2" for="mediaPlayer"
event="playStateChange">
WMP9=document.getElementById("mediaPlayer");

if (WMP9.playState==3 ) {

showPlayItems();
}
</script>
________________________


Thanks for any assistance on this!

Ellen
http://thedesignspace.net
------------------------------------------------
Digital Media MVP : 2004-2006
http://mvp.support.microsoft.com/mvpfaqs
.

Quantcast