|
<html>
<!-- page by andersen -->
<head>
<style type=text/css>
body { padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:0px; margin:0px;
font-size:12px;
font-family:verdana,helvetica,arial;
background-color: #ffffff;
}
#playerroot { position:absolute; width:640px; height:523px; border-right:#333 1px solid; border-top:#333 1px solid; border-left:#333 1px solid; border-bottom:#333 0px solid; background-color: #f4f4f4; z-index:1000 }
#listroot { position:absolute; width:640px; height:260px; border-left:#333 1px solid; border-right:#333 1px solid; border-top:#333 1px solid; border-bottom:#333 1px solid; background-color: #f4f4f4; z-index:2 }
#playerhandle { width:636px; padding-left:2px; padding-right:2px; padding-top:2px; padding-bottom:2px; margin:2px; color:white; background-color:#426300; font-weight: bold; }
#listhandle { width:636px; padding-left:2px; padding-right:2px; padding-top:2px; padding-bottom:2px; margin:2px; color:white; background-color:#426300; font-weight: bold; }
.playlistlo { font:12px verdana,arial,helvetica,sans-serif; vertical-align:top; text-transform:none; color:#000000; background-color:#7bad00; text-align: left }
.playlisthi { font:12px verdana,arial,helvetica,sans-serif; text-transform:none; color:#000000; background-color:#c6ef74; }
.playlistbox { margin: 0px; border-right: #7bad00 1px solid; border-top:#7bad00 1px solid; border-left:#7bad00 1px solid; border-bottom:#7bad00 1px solid; overflow: auto; }
</style>
<script type="text/javascript" src="periboea.js"></script>
<script type='text/javascript' src="dom-drag.js"></script>
<script type='text/javascript' src="silverlight.js"></script>
<script type='text/javascript' src="wmvplayer.js"></script>
<script type="text/javascript">
function xmlDocReady() {
storeTags();
showTags();
play(0, true);
}
function storeTags() { //xspf playlist
getListOf("track");
for (i=0; i<tagList.length; i++) {
clearRow();
addToRow(getTag(i, "location"));
addToRow(getTag(i, "title"));
addToRow(getTag(i, "creator"));
addToRow(getTag(i, "info"));
addToRow(getTag(i, "image"));
addRowToArr();
}
}
function showTags() { //alert('first cell:' + tagArr[0][0] );
var txt='<table cellPadding="2" width="620">';
for (i=0; i<tagArr.length; i++) {
txt+='<tr><td><table width="610" onclick="play(' + i + ', true)" ';
txt+='class="playlistlo" onmouseover="this.className = \'playlisthi\';" onmouseout="this.className = \'playlistlo\';">';
txt+='<tr>' + asCell(asImage(tagArr[i][4], "90", "68", "1", "Click to Play"));
txt+='<td width="516" valign=middle><p>';
txt+=' <b>' + tagArr[i][1] + '</b><br>';
txt+=' by: ' + tagArr[i][2] + '<br>';
txt+=' ' + asLink(tagArr[i][3], "_blank", "more info");
txt+='</p></td></tr></table></td></tr>';
}
txt+='</table>';
document.getElementById("writeroot").innerHTML=txt;
}
function play(idx, go) {
if (go) { createPlayer(tagArr[idx][0], tagArr[idx][4], 'true'); }
else { createPlayer(tagArr[idx][0], tagArr[idx][4], 'false'); }
}
function createPlayer(theFile, theImg, go) {
var cnt = document.getElementById("container");
var src = 'wmvplayer.xaml';
var cfg = {
file: theFile,
image: theImg,
autostart: go,
overstretch: 'true',
height:'500',
width:'640'
};
var ply = new jeroenwijering.Player(cnt,src,cfg);
}
function init() {
Drag.init(document.getElementById("playerhandle"), document.getElementById("playerroot"));
Drag.init(document.getElementById("listhandle"), document.getElementById("listroot"));
document.getElementById("playerhandle").style.cursor = 'move';
document.getElementById("listhandle").style.cursor = 'move';
importXML('wmv_xspf_playlist.xml');
}
</script>
</head>
<body onload="init()">
<div id="playerroot" style="left:0px; top:0px">
<div id="playerhandle">JW WMV Player</div>
<div id="container"></div>
</div>
<div id="listroot" style="left:10px; top:545px">
<div id="listhandle">XSPF Playlist</div>
<div class="playlistbox" align="left" style="width:640px; height:236px">
<div id="writeroot"></div>
</div></div>
</body>
</html> | 
dom-drag.js
wmv draggplaylist.HTML