JW Player 5 - Audio 링크하기

JW Player를 포함시키는 데에는 두 가지 방법이 있습니다. <object> 태그를 이용을 하는 방법과 java script를 이용을 하는 방법이 있습니다.. 이 두 가지 방법으로 JW Player를 삽입시키는 예를 한 번 들어보도록 하겠습니다.

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

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

JW Player의 실행과 관련해서는 대략 두 가지를 중요하게 살펴보아야 합니다. JW Player의 실행 파일은 player.swf 파일인데, 이 파일의 인터넷상의 주소를 지정해 주는 것이 중요하겠지요.. 다음은 내가 플레이 하기를 원하는 파일의 주소를 정해줘야 될테고요.. <object> 태그를 사용을 할 때에는 <object> 태그를 위해서 한 번, <embed> 태그를 위해서 한 번 이렇게 실행파일과 미디어 파일의 주소를 두 번을 지정해 주어야 합니다. .. <object> 태그는 html4와 xhtml 규격에서 사용되는 태그이고 <embed> 태그는 html4 이하의 버전에서 사용되는 태그로 브라우저에 따라서는 <object> 태그를 인식하고 <embed> 태그는 인식하지 못하거나 또는 <embed> 태그는 인식하고 <object> 태그는 인식하지 못 하는 경우가 있습니다. 따라서 호환성을 위해서 두 태그를 모두 같이 사용을 해 주게 됩니다.. 아래는 태그를 적용시킨 예입니다.

 

 

 

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','340','24','9','#000000'); 
  so.addParam('allowfullscreen','true'); 
  so.addParam('allowscriptaccess','always'); 
  so.addParam('wmode','opaque'); 
  so.addVariable('repeat','always'); 
  so.addVariable('file','http://dl.dropboxusercontent.com/u/25802134/Music/Friends%26Lovers.mp3'); 
  so.write('audio-mp3'); 
</script>

SWFObject를 이용을 할 때는 <object> 태그를 이용을 할 때 보다 몇 가지 더 신경을 써 주어야 합니다.. 먼저 Player.swf 실행 파일과 미디어 파일의 주소를 정해주는 것이 필요합니다.. 이 것은 <object> 태그때와 같습니다.. 그 외에 두 가지를 더 신경을 써 주어야 하는데 스크립트 라이브러리 파일의 경로를 지정을 해 주어야 합니다. 스크립트 라이브러리는 swfobject.js 파일인데 JW Player를 개발한 longtailvideo에서 JW Player를 배포하는 패키지 안에 포함되어 있는 파일입니다.. 이 패키지 안에는 Player.swf, swfobject.js, Jsplayer.js, yt.swf 이렇게 네 개의 파일이 있는데 이 파일들은 설치 하실 때 같이 설치를 하셔야 합니다.. 어쨋든 SWFObject script를 사용하기 위해서는 이 swfobject.js 파일의 경로를 지정해 주어야 하고요.. 그 다음으로 빨간색으로 표시한 id를 신경을 써 주어야 하는데.. 위에 빨간색으로 표시 해 놓은 것처럼 스크립트 안에 두 개의 id 값이 나옵니다.. 이 두 개의 id 값을 서로 똑같이 해 주면 됩니다.. 저는 임의로 audio-mp3로 정했는데 그 문자는 영문자와 숫자의 조합이라면 무엇이 되든 상관이 없고요.. 똑같기만 하면 됩니다.

위의 예에 보면 so.addParam과 so.addVariable 이 나오는데.. 순서는 큰 상관이 없습니다.. 단 so.write는 반드시 스크립트의 제일 밑에 와야 합니다. 위와 같이 하신 후 html 편집 모드로 들어가셔서 원하시는 곳에 위의 코드들을 붙여주시면 되겠습니다. Script는 그냥 일반 편집 모드에서는 붙일 수 없으니 반드시 html 편집 모드에서 붙여주세요.

저는 개인적으로 Script 방식을 더 선호합니다. 겉보기에는 좀 복잡해 보일 수도 있는데.. 일단 한 번 세팅만 해 두면 <object> 태그를 쓸 때 보다 알아보기도 쉽고 깔끔해서요.. 아래는 태그를 적용시킨 예입니다.

* 네이버의 블로그는 스크립트를 제한하기 때문에이 스크립트 방식을 사용할 수 없습니다.

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='embadder-mp3' align='center'>Loading the player ...</div> 

<script type="text/javascript"> 
  jwplayer('embadder-mp3').setup({ 
    flashplayer: 'http://dl.dropboxusercontent.com/u/25802134/jw5/player.swf', 
    file: 'http://dl.dropboxusercontent.com/u/25802134/Music/Friends%26Lovers.mp3', 
    controlbar: 'bottom', 
    width: 340, 
    height: 24 
  }); 
</script>

JW Embedder 방식은 플래시와 HTML5를 동시에 지원을 하는 방식입니다. 대부분의 브라우저들은 플래시를 지원을 합니다만 유독 애플의 경우 플래시를 지원을 안 하고 있지요.. 따라서 애플의 아이패드는 앞의 <object> 태그나 또는 두 번째의 Script 방식으로 로딩을 했을 때 정상적으로 동영상이나 음악을 감상을 할 수가 없습니다.. 애플의 아이패드에서 JW Player로 정상적으로 동영상이나 음악을 감상하려면 HTML5 표준태그인 <video> 태그를 사용을 해야 하는데 이 JW Embedder는 플래시와 HTML5 표준을 동시에 지원을 합니다.. 따라서 JW Embedder 방식은 아이패드를 지원하는 유일한 방식입니다.

우선 순위를 살펴보면 먼저 플래시를 이용을 해서 JW Player를 열어보고, 플래시로 열리지 않는다면 HTML5 태그를 이용을 해서 여는 방법을 사용합니다.. 따라서 JW Embedder 방식이 사실 가장 권장할만한 방법이라고 할 수 있을 것 같습니다.. 사용법은 위와 같습니다..

JW Embedder는 jwplayer.js 스크립트 라이브러리를 사용을 합니다. 이 파일은 JW Player의 배포 패키지 안에 이미 포함이 되어 있으며, 역시 설치할 때 Player.swf, swfobject.js yt.swf 파일과 아울러 같이 업로드 되어야 합니다.. 먼저 이 파일의 주소를 설정해 주는게 필요하겠네요..

다음은 id를 설정을 해 주어야 합니다. 위의 script를 사용할 때와 마찬가지로 위의 빨간 색으로 표시된 두 개의 id는 서로 같은 값을 가져야 합니다…

그리고 실행파일인 player.swf의 주소와 해당 음악 파일의 주소를 잘 설정하시고 html 편집 모드에서 위의 내용을 붙여주시면 됩니다.

* 네이버의 블로그는 스크립트를 제한하기 때문에이 스크립트 방식을 사용할 수 없습니다.

Loading the player ...