이 플레이어를 사용을 하다보면 여러개의 playlist들을 한 화면에서 뿌려주고 싶은 경우가 생기는데.. 그럴 때 써먹을 수 있는 방법입니다. 일단 예제부터 올려놓고 보겠습니다.

 

메뉴를 선택해 주세요 ...

플래시 송들
만화영화 주제가들

 

위의 html 링크를 클릭을 하면 '메뉴를 선택해 주세요 ..' 라는 메세지가 사라지면서 그 자리에 JW Player 화면이 나타나게 됩니다. 위와 같은 방법으로 한 화면에서 다중 플레이 리스트를 구현을 할 수가 있게 되는데요.. 자바 스크립트를 써야 하는 관계로 네이버에서 블로그를 운영하시는 분들은 이 방법은 사용하실 수 없습니다. 자바 스크립트의 실행을 허용하는 블로그에서 서비스를 이용하시는 분들만 사용을 하실 수 있으시겠습니다.. 밑에 소스코드를 보도록 하겠습니다.

 

<script type="text/javascript" src="http://dl.dropboxusercontent.com/u/25802134/jw5/jwplayer.js"></script>
<center><div id="bgm">메뉴를 선택해 주세요 ...</div></center>

<script type="text/javascript">
  function createplayer(MyPlaylist) {
    jwplayer("bgm").setup({
      flashplayer: "http://dl.dropboxusercontent.com/u/25802134/jw5/player.swf",
      playlistfile: MyPlaylist,
      skin: "http://dl.dropboxusercontent.com/u/25802134/jw5/Skins/Yyht/yyht.zip",
      playlist: "bottom",
      controlbar: "bottom",
      playlistsize: 144,
      repeat: "list",
      width: 630,
      height: 648
    });
  }
</script>

<p align="center">
<a href="javascript:createplayer('http://dl.dropboxusercontent.com/u/25802134/plist/jwplayer/playlist-flashsong.xml')">플래시 송들</a><br />
<a href="javascript:createplayer('http://dl.dropboxusercontent.com/u/25802134/plist/jwplayer/playlist-ani-ost.xml')">만화영화 주제가들</a>
</p>

 

일단 소스 구성을 제가 좋아하는 JW Embedder 방식을 썼습니다.. 먼저 다들 <a href=""> 태그에 대해서는 아실겁니다. 어떤 특정 링크를 불러오는 태그입니다. 이 태그의 링크로 자바 스크립트의 함수를 불러올 수가 있는데 사용법은 아래와 같습니다.

<a href="javascript:함수이름()">

위와 같이 해 놓으면 이 링크를 클릭을 했을 때 함수이름()에 해당하는 자바스크립트 함수가 실행이 됩니다. 이 예에서는 createplayer라는 함수를 정의를 해서 링크를 누르면 createplayer 라는 자바 스크립트 함수가 실행이 되도록 했습니다.

중요한 것은 playlistfile 의 인수인데요.. createplayer 함수에서는 playlistfile의 값을 임의로 정의를 하지 않고 createplayer를 불러오는 <a href=""> 태그에서 정의한 값을 MyPlaylist 라는 변수로 받아서 사용을 하도록 했습니다. 따라서 이 변수값은 밑의 <a href=""> 태그에서 정의를 하는 것이지요.. 밑의 <a href=""> 태그의 파란색으로 정의된 부분이 바로 playlistfile에 들어갈 값입니다.. 각각 플레이 리스트 파일의 인터넷상의 주소들입니다.

위와 같은 방법으로 한 페에지 안에서 복수개의 플레이 리스트를 하나의 JW Player 화면으로 구성을 할 수가 있습니다. 복수개의 플레이 리스트를 적용을 하고 싶다면 위의 <a href=""> 부분을 복사해서 더 만들면 되겠지요..

 

 

 

 

플레이 리스트를 짜다보면 비디오와 오디오를 섞어서 사용을 하고 싶은 경우도 있습니다.. 이런 경우 문제가 되는 것이 화면이 크기일텐데요.. 화면의 크기 역시 <a href=""> 태그에서 정해주면 되겠지요.. 이 경우 소스를 살짝 바꿔주면 되겠지요..

<script type="text/javascript" src="http://dl.dropboxusercontent.com/u/25802134/jw5/jwplayer.js"></script>
<center><div id="bgm2">메뉴를 선택해 주세요 ...</div></center>

<script type="text/javascript">
  function createplayer2(MyWidth, MyHeight, MyPlaylist) {
    jwplayer("bgm2").setup({
      flashplayer: "http://dl.dropboxusercontent.com/u/25802134/jw5/player.swf",
      playlistfile: MyPlaylist,
      skin: "http://dl.dropboxusercontent.com/u/25802134/jw5/Skins/Yyht/yyht.zip",
      playlist: "bottom",
      controlbar: "bottom",
      playlistsize: 144,
      repeat: "list",
      width: MyWidth,
      height: MyHeight 
    });
  }
</script>

<p align="center">
<a href="javascript:createplayer2(630, 648, 'http://dl.dropboxusercontent.com/u/25802134/plist/jwplayer/playlist-flashsong.xml')">비디오 화면</a><br />
<a href="javascript:createplayer2(400, 176, 'http://dl.dropboxusercontent.com/u/25802134/plist/jwplayer/playlist-ani-ost.xml')">오디오 화면</a></p>

 

한 페이지 안에 같은 이름을 가진 함수가 존재하면 안 되기 때문에 편의를 위해서 createplayer2로 함수 이름을 바꾸었습니다. id 도 또한 중복되어선 안 되기 때문에 bgm2 로 바꾸어 놓았습니다.

위의 점을 빼면 바뀐 부분이 createplay 함수에 Mywidth와 MyHeight 인수를 추가했고, width와 height를 이 두 인수로부터 받아서 사용을 하도록 바꾸었습니다. 그리고 <a href=""> 태그에서 MyWidth와 MyHeight에 대해 넘겨줄 인수 값을 추가되었습니다..

참고로 인수를 넘길 때에 문자는 '문자' 와 같이 따옴표로 묶어줍니다. 반면 숫자는 따옴표 없이 써 줍니다. 그리고 인수와 인수 사이는 콤마(,)로 구분을 해 줍니다. 아래는 예제입니다.

메뉴를 선택해 주세요 ...

비디오 화면
오디오 화면

 

 

<a href=""> 태그 대신 <button> 태그를 사용을 할 수도 있습니다. <button> 태그를 사용을 했을 경우에는 주소가 외부로 노출이 되지 않는다는 장점이 있습니다.. 사용 방법은 <a href=>부분을 <button onClick=>으로 바꾸어주고 중간에 javascript: 부분을 빼고 바로 자바스크립트의 함수 이름을 써주면 됩니다. 실제 예제에서는 style="width: 150px"를 추가해서 버튼 사이즈에 변화를 좀 주었습니다.

<p align="center">
<button onClick="createplayer2(630, 648, 'http://dl.dropboxusercontent.com/u/25802134/plist/jwplayer/playlist-flashsong.xml')">비디오 화면</button><br />
<button onClick="createplayer2(600, 176, 'http://dl.dropboxusercontent.com/u/25802134/plist/jwplayer/playlist-ani-ost.xml')">오디오 화면</button></p>


Posted by yyht
,