본문 바로가기

HTML

JW Player

사용해본 코드 예 - 플레이리스트 xml 사용


목차

1. 플레이리스트 파일 만들기

2. 플레이리스트 파일 사용

3. 기타 환경설정 xml 파일 사용

4. 3D 플레이리스트


JW Player를 사용하는 임베디드 코드에는 JW EmbedderSWFObject, simple embed code 3종류가 있습니다.

제가 주로 쓰는 코드는 simple embed code 입니다. 다른 코드는 스크립트가 막혀있는 곳에서는 안되는 경우도 있지만,

simple embed code가 안되는 경우는 못봤습니다. 다행히 다음 블로그는  JW Embedder 도 되더군요.

간혹 simple embed code 에서는 안되는 기능이 있는데 그 경우에는  JW Embedder 를 썼습니다.



1. 플레이리스트 파일 만들기

플레이리스트는 여러개의 동영상,음악 파일을 재생하고 싶을 때 하나의 파일로 재생할 목록을 만들어 쓰는 것입니다.

플레이리스트 파일은 xml 파일입니다.

xml 포맷도 여러개 있어서 각포맷마다 사용하는 명칭이 다릅니다.

http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12537/xml-playlist-support

제가 사용한 것은 링크된 곳에 있는 RSS 입니다.

 


음악파일, 동영상파일, 이미지파일, 유투브동영상을 플레이리스트에서 쓸 수 있습니다.

test1.xml


<rss version="2.0" xmlns:jwplayer="http://developer.longtailvideo.com/trac/" xmlns:media="http://search.yahoo.com/mrss/"> 

  <channel> 

    <title>Playlist</title> 

    <item> 

      <title>Here I am</title>

      <media:credit role="author">Natalie Gauci</media:credit>

      <media:content url="음악파일주소" /> 

      <media:thumbnail url="썸네일 이미지 주소" />

      <description>austrailian</description>

      <jwplayer:provider>sound</jwplayer:provider>

      <jwplayer:duration>224</jwplayer:duration>

    </item>

    <item> 

      <title>sherlock</title>

      <media:credit role="author">unknown</media:credit>

      <media:content url="동영상 파일주소" /> 

      <media:thumbnail url="썸네일 이미지 주소" />

      <description>none</description>

      <jwplayer:provider>video</jwplayer:provider>

      <jwplayer:duration>1:11</jwplayer:duration>

      <jwplayer:captions.file>http://dl.dropbox.com/u/숫자/sherlock.srt</jwplayer:captions.file>

    </item>

    <item> 

      <title>pcsx2</title>

      <media:credit role="author">unknown</media:credit>

      <media:content url="유투브 동영상 주소" /> 

      <description>none</description>

      <jwplayer:provider>youtube</jwplayer:provider>

      <jwplayer:duration>6:43</jwplayer:duration>

    </item>

    <item> 

      <title>001</title>

      <media:credit role="author">By me</media:credit>

      <media:content url="이미지파일 주소" />

      <media:thumbnail url="썸네일 이미지 주소" />

      <description></description>

      <jwplayer:provider>image</jwplayer:provider>

      <jwplayer:duration>2</jwplayer:duration>

    </item>

  </channel>

</rss>


첨부파일에서 녹색부분을 수정해서 쓰시는게 편할 겁니다. 수정은 그냥 메모장으로 하시면 됩니다.

1. <channel>과</channel> 사이에 재생할 리스트가 들어가고

2. 각각의 동영상이나 음악은  <item>와 </item> 사이에 들어가게 됩니다.

3. <media:credit role="author"> 에는 저작권자를 씁니다.(스킨에 따라 표시 안 될 수도 있습니다)

4. <description> 에는 쓰고싶은 설명을 씁니다.(스킨에 따라 표시 안 될 수도 있습니다)

5. <jwplayer:provider> 에는 파일 타입을 씁니다. 보통은 안써도 되는데 파일주소에 확장자가 나타나지 않으면 써야합니다.

   예) 다음 첨부파일 주소

   https://t1.daumcdn.net/cfile/blog/1260783D6F01D76129

   위의 경우 <jwplayer:provider> 를 써줘야 재생이 됩니다.

6. <jwplayer:duration>

   영상 또는 음악의 길이를 씁니다. 220처럼 초단위로 써도 되고, 1:11 처럼 분:초 로 써도 됩니다.

   주의할 점은 여기서 정한 duration과 실제 동영상길이가 다르면 duration 만큼만 재생됩니다.

   예를 들어) 2분 10초짜리 동영상인데, duration 에 1:30 라고 쓰면, 1분30초만 재생되고, 40초가 재생이 안됩니다.

   일일이 맞추기 귀찮다면 아예 쓰지 않아도 되는 옵션이니 쓰지않는것도 하나의 방법입니다.

7. <jwplayer:captions.file>

   자막 플러그인을 사용하는 것인데, 자막 사용은 여기를 참고하세요

 

흔히 고화질동영상 재생을 위해 한다고 하는 이어붙이기의 경우 아래처럼 동영상주소만 쭉 넣어주면 됩니다.

test2.xml


<rss version="2.0" xmlns:jwplayer="http://developer.longtailvideo.com/trac/" xmlns:media="http://search.yahoo.com/mrss/"> 

  <channel> 

    <title>Playlist</title> 

    <item> 

      <title>1</title>

      <media:content url="동영상 파일주소-1" /> 

      <media:thumbnail url="썸네일 이미지 주소" />

      <jwplayer:provider>video</jwplayer:provider>

    </item>

    <item> 

      <title>2</title>

      <media:content url="동영상 파일주소-2" />

      <jwplayer:provider>video</jwplayer:provider>

    </item>

     .......................(중략)......................

    <item> 

      <title>마지막</title>

      <media:content url="동영상 파일주소-마지막" />

      <jwplayer:provider>video</jwplayer:provider>

    </item>

  </channel>

</rss>


2. 플레이리스트 파일 사용

플레이리스트 파일인 xml 파일이 준비되면, 사용하는 것은 쉽습니다.

홈페이지의 마법사를 사용해서 임베디드 코드를 만들거나 아래 코드처럼 flashvars 를 고쳐주면 됩니다.

수정해야 될 부분은 녹색으로 표시했습니다.

code1.txt


<embed

type='application/x-shockwave-flash'

id='single2'

name='single2'

src='http://dl.dropbox.com/u/숫자/player.swf'

width='640'

height='480'

bgcolor='undefined'

allowscriptaccess='always'

allowfullscreen='true'

wmode='transparent'

flashvars="playlistfile=http://dl.dropbox.com/u/숫자/test1.xml&playlist=over&repeat=list&config=http://dl.dropbox.com/u/숫자/config.xml"

/>


플레이리스트에 관련된 옵션입니다.

playlistfile : xml 파일 주소를 써줍니다.

playlist : 플레이리스트 위치를 정합니다.

  bottom(아래), top(위), right(오른쪽), left(왼쪽), over(가운데) 의 5가지가 있고, over의 경우 크기를 별도로 안정해도 되서 편합니다.

playlistsize : 플레이리스트 크기를 정합니다. over를 제외한 모든 경우 width, height에 영향을 줍니다.

  플레이리스트 위치가 left(왼쪽) 혹은 right(오른쪽) 일때

    width= playlistsize + 동영상화면 가로길이

  플레이리스트 위치가 bottom(아래) 혹은 top(위) 일때

    height=playlistsize + 동영상화면 세로길이 + jw player 컨트롤바(컨트롤바 위치가 bottom 일 때, 스킨마다 값이 다름)

  플레이리스트 위치가 over 일 때는 그냥 동영상 가로,세로 길이를 width, height로 하면 됩니다.(편해서 이것을 권장)

예1) 동영상 크기가 640 x 360 이고, playlist=left  또는  playlist=right , playlistsize=150 이면

  width=640+150=790, height=360

예2) 동영상 크기가 640 x 360 이고, playlist=bottom 또는 playlist=top , playlistsize=150 , controlbar=bottom 이면

  width=640, height=360+150+20(기본스킨 컨트롤바 높이)=530

예3) 동영상 크기가 640 x 360 이고, playlist=over, controlbar=bottom 이면

  width=640, height=360+20(기본스킨 컨트롤바 높이)=380

예4) 동영상 크기가 640 x 360 이고, playlist=over, controlbar=over 이면

  width=640, height=360    <---  가장 간편함.

repeat : 반복되는 종류를 정합니다. 기본값은 none.

  none : 반복하지 않습니다. 재생목록이 있어도 1개의 파일이 재생이 끝나면 멈춤니다.

  list : 재생목록에서 마지막까지 재생합니다. 플레이리스트를 쓸 때는 list로 해주는게 좋습니다.

  always : 무한반복됩니다.

 

3. 기타 환경설정 xml 파일 사용

config는 기타 설정을 xml로 만들어 쓴 것입니다.

코드가 복잡해 져서 알아보기 힘드니 보통쓰는 환경설정을 config.xml 로 만들어 놓는 것입니다.

파일리스트 파일과는 전혀 무관하지만 사용하는 방법이 거의 동일하기 때문에 같이 알아두면 좋을 것 같아서 추가했습니다.


xml 파일에 쓰는 태그 형식은 파일리스트 파일과 전혀 다르니 아래의 예시를 참고하세요.

제가 쓰는 파일입니다. 필요한것만 놔두고 편집해서 쓰시면 됩니다. 편집은 역시 메모장.

config.xml


<config>

  <file></file>

  <image></image>

  <repeat></repeat>

  <controlbar></controlbar>

  <controlbar.idlehide>true</controlbar.idlehide>

  <autostart>false</autostart>

  <mute>false</mute>

  <stretching>uniform</stretching>

  <volume>80</volume>

  <backcolor>FFFFFF</backcolor>

  <frontcolor>2E6EF2</frontcolor>

  <lightcolor>000000</lightcolor>

  <screencolor>000000</screencolor>

  <captions.state>true</captions.state>

  <captions.fontfamily>Arial</captions.fontfamily>

  <captions.fontsize>14</captions.fontsize>

  <captions.fontWeight>normal</captions.fontWeight>

  <captions.fontStyle>normal</captions.fontStyle>

</config>


설정에 대한 설명

caption에 대한 설명

4. 3D 플레이리스트

  평범한 플레이리스트가 별로 마음에 들지 않는다면 3D 플레이리스트를 사용할 수 있습니다.

  단, 무료사용자의 경우 화면 오른쪽 아래에 제작자의 로고가 표시된다는 단점이 있습니다.

  (플레이리스트 목록화면에만 표시되고, 동영상재생시에는 표시되지 않습니다)


  3D 플레이리스트 플러그인을 사용하는 것입니다.

  플러그인 사용이라고 해도 그냥 옵션쓰는 것과 거의 차이가 없습니다.

  http://www.longtailvideo.com/addons/plugins 에 가보시면 플러그인 중에 3D 플레이리스트를 찾을 수 있습니다.

  basic-1, carousel-1, depth-1, dna-1, flow-2, Grid-2 6가지가 현재까지 나와있습니다. 형태는 대략 다음과 같습니다.

 

플러그인 사용방법은 간단합니다.

  사용예시(flashvars 옵션은 보기쉽게 띄어쓰기를 했지만 실제로 쓸 때는 한줄로 써야 합니다)

예시.txt

<embed id="list1" 

height="360" 

name="list1" 

type="application/x-shockwave-flash" 

width="640" 

src="http://dl.dropbox.com/u/숫자/player.swf" 

allownetworking="internal" 

flashvars="playlistfile=http://dl.dropbox.com/u/숫자/youtube.xml

&skin=http://dl.dropbox.com/u/숫자/classic.zip

&plugins=basic-1

&config=http://dl.dropbox.com/u/숫자/config.xml

&controlbar=none

wmode="transparent" 

allowfullscreen="true" 

allowscriptaccess="always" 

bgcolor="000000">

  임베디드 코드에서 

  &plugins=플러그인 이름

  의 형태를 추가해주면 됩니다. 플러그인 이름은 위에 처음에 말한대로

  basic-1, carousel-1, depth-1, dna-1, flow-2, Grid-2 6가지가 있습니다.

  각 플러그인마다 세부옵션이 별도로 있는데 굳이 그것까지 설정할 필요는 없어 보입니다.

  세부옵션까지 필요하신분은 원래 출처인 http://www.longtailvideo.com/addons/plugins 에서 각플러그인을 찾아 보시면 됩니다.


  자막플러그인 같은 것과 같이 여러 개의 플러그인을 함께 쓰고 싶다면 ,로 구분해주면 됩니다.

  예) &plugins=captions-2,basic-1


  실제 사용예

  유뷰브 트레일러 동영상을 사용했습니다. &plugins=basic-1 만 사용했고, 세부옵션은 사용하지 않았습니다.(알아보기 귀찮아서)

youtube.xml


'HTML' 카테고리의 다른 글

줄바꿈  (0) 2013.02.13
border collapse 스타일  (0) 2012.05.02