JW Player 5 - playlist 적용하기

만들어진 playlist의 xml 파일을 적용하기 위해서는 file 대신 playlistfile 이라는 예약어를 사용을 합니다. 예를 보시죵..

 

1. <object> 태그를 이용하는 예제

 

<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='500' height='548' id='single1' name='single1'>    
<param name='movie' value='http://dl.dropboxusercontent.com/u/25802134/jw5/player.swf'>    
<param name='allowfullscreen' value='true'>    
<param name='allowscriptaccess' value='always'>    
<param name='wmode' value='transparent'>    
<param name='flashvars' value='skin=http://dl.dropboxusercontent.com/u/25802134/jw5/Skins/Yyht/yyht.zip&playlistfile=http://dl.dropboxusercontent.com/u/25802134/plist/jwplayer/playlist-flashsong.xml&playlistsize=144&controlbar=bottom&playlist=bottom&repeat=list'>    
<embed type='application/x-shockwave-flash'    
  id='single2'    
  name='single2'    
  src='http://dl.dropboxusercontent.com/u/25802134/jw5/player.swf'    
  width='500'    
  height='548'    
  bgcolor='undefined'    
  allowscriptaccess='always'    
  allowfullscreen='true'    
  wmode='transparent'    
flashvars='skin=http://dl.dropboxusercontent.com/u/25802134/jw5/Skins/Yyht/yyht.zip&playlistfile=http://dl.dropboxusercontent.com/u/25802134/plist/jwplayer/playlist-flashsong.xml&playlistsize=144&controlbar=bottom&playlist=bottom&repeat=list'/>    
</object>

 

 

 

 

 

 

2. SWFObject를 이용하는 예제

 

<script type='text/javascript' src='swfobject.js'></script>    
<div id='playlist1'>This text will be replaced</div>    
   
<script type='text/javascript'>    
  var so = new SWFObject('http://dl.dropboxusercontent.com/u/25802134/jw5/player.swf','mpl','500','548','9');    
  so.addVariable('playlistfile','http://dl.dropboxusercontent.com/u/25802134/plist/jwplayer/playlist-flashsong.xml');    
  so.addVariable('skin','http://dl.dropboxusercontent.com/u/25802134/jw5/Skins/Yyht/yyht.zip');    
  so.addParam('allowfullscreen','true');    
  so.addParam('allowscriptaccess','always');    
  so.addParam('wmode','transparent');    
  so.addVariable('playlistsize','144');      
  so.addVariable('controlbar','bottom');      
  so.addVariable('playlist','bottom');      
  so.addVariable('repeat','list');      
  so.write('playlist1');    
</script>

This text will be replaced

   

 

 

 

 

3. JW Embedder를 이용하는 예제

 

<script type="text/javascript" src="http://dl.dropboxusercontent.com/u/25802134/jw5/jwplayer.js"></script>
<div id="playlist2" align="center">Loading the player ...</div>

<script type="text/javascript">    
  jwplayer("playlist2").setup({    
    flashplayer: "http://dl.dropboxusercontent.com/u/25802134/jw5/player.swf",    
    playlistfile: "http://dl.dropboxusercontent.com/u/25802134/plist/jwplayer/playlist-flashsong.xml",    
    skin: "http://dl.dropboxusercontent.com/u/25802134/jw5/Skins/Yyht/yyht.zip",    
    playlist: "bottom",      
    wmode: "transparent",      
    controlbar: "bottom",      
    playlistsize: 144,      
    repeat: "list",      
    width: 500,      
    height: 548      
});    
</script>    

Loading the player ...

   

 

 

Playlist와 관련해서는 설명할 것들이 조금 있군요..

 

1. playlistfile 먼저 플레이 리스트 파일의 주소를 정해줍니다. 플레이 리스트의 파일 이름은 playlist-flashsong.xml로 정했습니다. 방법은 playlistfile 항목에 주소를 적어주면 됩니다.    
2. playlistsize는 말 그대로 플레이 리스트를 보여줄 공간의 크기를 이야기 합니다. 이 공간은 전체 width와 height의 안에서 설정이 되는데 가령 전체의 height가 500이고 playlistsize를 200으로 설정을 했다면 남은 300의 공간 안에서 controlbar가 표시 되고 또 영상이 플레이 되게 됩니다.    
3. controlbar는 플레이를 컨트롤 해 줄 컨트롤바의 위치를 이야기 합니다. top, bottom, over, none이 올 수 있습니다. top은 위, bottom은 아래, over는 영상 위에 자리했다가 영상의 플레이가 시작되면 사라집니다. none은 아예 표시되지 않습니다.    
4. playlist는 플레이 리스트가 위치할 자리를 지정합니다. 위치는 전체 화면의 상, 하, 좌, 우가 올 수 있습니다.    
5. repeat은 반복하는 옵션을 지정하는데 값은 none, list, always, single이 올 수가 있습니다. none은 반복을 안 하겠다는 이야기이고 always는 playlist 전체의 내용을 무한정 반복합니다. list는 playlist의 내용을 끝까지 플레이하고는 멈추는 옵션이고 single은 현재 플레이하는 한 내용만 무한 반복하는 것입니다.

 

width와 height에 대해서 약간의 설명이 필요할 것 같습니다. width와 height는 playlist와 controlbar 그리고 영상의 크기를 모두 합친 값입니다..