JW Player 5 - 스킨 적용하기

스킨을 적용하는 것은 크게 많이 설명할 것은 없습니다.. JW Player를 만들어서 배포하고 있는 longtailvideo사의 홈페이지에 스킨들이 많이 올라와 있는데 그 스킨들 중에서 마음에 드는 것을 받아서 자신의 플레이어가 있는 웹 계정에 올리고 라인 한 줄만 추가하면 됩니다..

 

먼저 Longtailvideo사의 스킨이 있는 페이지로 가야겠지요. 아래를 클릭하면 바로 이동할 수 있습니다.    
http://www.longtailvideo.com/addons/skins

 

혹 스킨을 수정하고 싶거나 또는 자신의 스킨을 만들고 싶다면, 스킨과 관련된 자세한 정보는 아래에 있습니다.  
http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/14/building-skins

 

그 중에서 마음에 드는 것을 골라서 받습니다.. 받아보면 그냥 zip 파일로 묶여 있습니다.. 다른 어떤 수정도 가할 필요가 없습니다.. 그냥 zip 파일로 묶여 있는 그대로 자신의 Player.swf를 올려놓은 곳에 같이 업로드를 시킵니다. Dropbox에 계정을 만들고 올리신 분은 그 곳에 올리시면 되고 혹 티스토리의 스킨 이미지를 저장하는 곳에 올리신 분은 거기에 올리시면 됩니다..

 

여기서 한 가지 주의할 점이 있는데 스킨 데이타는 반드시 자신의 Player.swf 즉 플래시 실행파일이 있는 곳에다 올리셔야 합니다. 꼭 같은 폴더에 올려야 할 필요는 없지만 도메인은 같아야 합니다. 그렇지 않고 다른 도메인에 올리시면 크로스 도메인 정책 (Cross Domain Policy)에 걸려서 스킨이 정상적으로 적용이 되지 않습니다.. Player.swf는 티스토리에 올렸는데 스킨은 Dropbox에 올려서 불러오려고 한다거나 하면 적용이 되지 않습니다..

 

그렇게 인터넷 계정에 올리셨으면 아래의 소스코드의 예처럼 자신이 올린 스킨의 주소만 추가해 주시면 정상적으로 스킨이 적용이 됩니다. 저는 Longtailvideo 홈페이지에서 xero.zip 파일을 받아서 약간 수정을 해서 사용을 하고 있습니다..

 

1. <object> 태그를 활용한 예제

 

<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='600' height='32' 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='file=http://dl.dropboxusercontent.com/u/25802134/Music/Friends%26Lovers.mp3&skin=http://dl.dropboxusercontent.com/u/25802134/jw5/Skins/Yyht/yyht.zip&repeat=always'>    
<embed type='application/x-shockwave-flash'    
  id='single2'    
  name='single2'    
  src='http://dl.dropboxusercontent.com/u/25802134/jw5/player.swf'    
  width='600'    
  height='32'    
  bgcolor='undefined'    
  allowscriptaccess='always'    
  allowfullscreen='true'    
  wmode='transparent'    
  flashvars='file=http://dl.dropboxusercontent.com/u/25802134/Music/Friends%26Lovers.mp3&skin=http://dl.dropboxusercontent.com/u/25802134/jw5/Skins/Yyht/yyht.zip&repeat=always'/>    
</object>

 

<object> 태그를 사용을 할 때는 플레이할 동영상의 주소에 '&' 문자를 포함해서 붙여주시면 됩니다. 안의 주소와 파일 이름은 자신의 스킨 파일 이름과 주소로 물론 바꿔주어야 되겠지요.. <object> 와 <embed> 두 개의 태그를 사용을 하기 때문에 두 군데에 붙여 주셔야 하겠지요.. 아래는 스킨을 적용한 예제입니다.

 

 

 

 

 

 

 

 

2. SWFObject를 활용한 예제

 

<script type='text/javascript' src='http://dl.dropboxusercontent.com/u/25802134/jw5/swfobject.js'></script>    
<div id='audio-mp3'>This text will be replaced</div>
 
<script type='text/javascript'>    
  var so = new SWFObject('http://dl.dropboxusercontent.com/u/25802134/jw5/player.swf','ply','600','32','9','#000000');    
  so.addParam('allowfullscreen','true');    
  so.addParam('allowscriptaccess','always');    
  so.addParam('wmode','transparent');    
  so.addVariable('repeat','always')    
  so.addVariable('file','http://dl.dropboxusercontent.com/u/25802134/Music/Friends%26Lovers.mp3');    
  so.addVariable('skin','http://dl.dropboxusercontent.com/u/25802134/jw5/Skins/Yyht/yyht.zip');      
  so.write('audio-mp3');    
</script>

 

중간에 파란색 라인 하나만 추가해 주시면 되겠습니다.. 라인의 맨 뒤에는 반드시 세미콜론(;) 이 있어야 한다는 것 유념 하시고요.. 이 세미콜론이 빠지면 정상적으로 실행이 안 됩니다.. 위치는 아무데나 와도 상관이 없는데 var so 로 시작하는 절과 so.write로 끝나는 절 사이에 위치해야 합니다. 아래는 예제입니다.

 

 

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='embedder-mp3' align='center'>Loading the player ...</div>
 
<script type="text/javascript">    
  jwplayer('embedder-mp3').setup({    
    flashplayer: 'http://dl.dropboxusercontent.com/u/25802134/jw5/player.swf',    
    file: 'http://dl.dropboxusercontent.com/u/25802134/Music/Friends%26Lovers.mp3',    
    skin: "http://dl.dropboxusercontent.com/u/25802134/jw5/Skins/Yyht/yyht.zip",      
    controlbar: 'bottom',    
    width: 600,    
    height: 32    
  });    
</script>

 

역시 파란색 라인 한 줄만 추가해주시면 됩니다.. 안의 주소는 자신의 스킨 주소로 바꿔주어야 되겠지요.. 이 경우 라인의 제일 끝에 쉼표(,)가 반드시 있어야 한다는 것에 주의해 주시고요.. 쉼표가 없으면 역시 정상적인 실행이 보장되지 않습니다. 위치는 아무데나 와도 상관이 없습니다. jwplayer('embedder-mp3) 로 시작하는 줄과 height줄 사이에 위치하면 되겠습니다. 아래는 예제입니다.

Loading the player ...

 

 

관련 사이트들

zip 스킨 설치하기
zip 스킨 적용하기
HTML5에서 zip 스킨 적용하기
zip 스킨 만들기
스킨 장터가기
유료 스킨들