본문 바로가기

JW Player

jw wmv player - below playlist 구현

 
플레이 리스트가 플레이어 아래에 위치하는 형식이다.

이 형태를 구현하기 위해서는 일부 파일이 더 있어야 한다.



 
기존 파일에 추가로 들어가야 할 파일 (아래 3파일은 반드시 같은 위치에 업로드 해야 합니다.)

플레이 리스트는 xspf 리스트 방식으로 합니다..





썸네일보다 플레이 리스트 높이를 작게하면 저절로 스크롤바가 생깁니다..






구현 태그

<IFRAME src="http://cfs.tistory.com/custom/blog/8/84980/skin/images/wmvplaylist below1.HTML" scrolling=no width=647  height=800>
</IFRAME>




html 태그 내용이다...

640*480 영상에 최적화 시킨것이며,,,영상크기를 다르게 할경우 크기등을 알아서 수정해야 합니다..

굵은 글자 부분을 수정해서 영상 및 리스트 사이즈 조절 됩니다..

 <html>

<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="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+='&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></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() { 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:260px">
<div id="writeroot"></div>
</div></div>

</body>
</html>