본문 바로가기

JW Player

jw wmv player - horizontal playlist 구현


이 방법은 플레이 리스트가 플레이어 바로 밑에 있지만 스크롤바가 가로로 움직이게 되는 형식입니다.

구성파일은 below 방식과 같습니다..다만 html 태그만 조금 바꿔야 겠죠..






구현 태그

<IFRAME src="http://cfs.tistory.com/custom/blog/8/84980/skin/images/wmvplaylist_h.HTML" scrolling=no width=645  height=636>
</IFRAME>



html 태그 내용 (640*480 크기 영상에 맞게 제작됨)

 <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:124px; 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="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+='<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+='&nbsp;<b>' + tagArr[i][1] + '</b><br>';
  txt+='&nbsp;by: ' + tagArr[i][2] + '<br>';
  txt+='&nbsp;' + asLink(tagArr[i][3], "_blank", "more info");
  txt+='</p></td></tr></table></td>';
 }
 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() { 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:0px; top:504px">
<div id="listhandle">XSPF Playlist</div>
<div class="playlistbox" align="left" style="width:640px; height:104px">
<div id="writeroot"></div>
</div></div>

</body>
</html>






첨부파일