[JW Player] 플래시 동영상 연속 재생시키기 [flv, swf 등]

    테스트 OK!

[ 관련 자료 링크 ]

: 아래 주소를 클릭하시면 web에서 사용하는 모든 동영상 관련 태그를 보실 수 있습니다.

   http://gall.dcinside.com/list.php?id=flash&no=134069

 [ JW player 동영상 리스트를 이용하여 만들기]

Jwplayer에서는 플레이를 시킬 리스트를 만들 수 있습니다. 그러면 사용자들은 자기가 보고 싶은것을 골라서 볼 수 있거나 한가지 주제로된 여러 다른 영상들을 묶어서 쉽게 볼 수 있다는 장점이 있습니다.

플레이리스트를 만들기 위해서는 xml로 리스트들을 만들고 Jwplayer로 불러오면 됩니다. 좀 귀찮은 작업이긴 하지만 해넣고 보면 좀 뿌듯합니다.

우선 밑에 있는 글을 읽어보시면 잘 이해가 되실 겁니다.

2010/03/16 - [Computer] - JWplayer 사용하기
2010/05/10 - [Computer] - Jwplayer 사용하기 - 파일 분할하고 이어서 재생하기

우선,  xml 파일을 먼저 만들어야 합니다.

1. XML 파일 만들기

2010/05/10 - [Computer] - Jwplayer 사용하기 - 파일 분할하고 이어서 재생하기

위의 글에 2. XML 파일 만들기 참조해주세요.

여기서는 예제에 쓰인 XML파일을 살펴 보겠습니다. 펼쳐서 보세요.

더보기

<playlist version="1" xmlns="http://xspf.org/ns/0/">
    <title>Example XSPF playlist</title>
    <tracklist>

        <track>
            <title>Run Devil Run</title>
            <creator>Girls' Generation</creator>
            <annotation>100319 뮤직뱅크</annotation>
            <location>파일주소</location>
            <image>https://t1.daumcdn.net/cfile/tistory/12073B044BDFEA6BAB</image>
            <meta rel="duration">201</meta>
        </track>

        <track>
            <title>Run Devil Run</title>
            <creator>Girls' Generation</creator>
            <annotation>100320 쇼!음악중심</annotation>
            <location></location>
            <image>https://t1.daumcdn.net/cfile/tistory/2066A7034BDFEB26A4</image>
            <duration>203</duration>
        </track>


        <track>
            <title>Run Devil Run</title>
            <creator>Girls' Generation</creator>
            <annotation>100321 인기가요</annotation>
            <location></location>
            <image>https://t1.daumcdn.net/cfile/tistory/177ECC024BDFE8DC8D</image>
            <duration>202</duration>
        </track>

        <track>
            <title>Run Devil Run</title>
            <creator>Girls' Generation</creator>
            <annotation>100326 뮤직뱅크</annotation>
            <location></location>
            <image>https://t1.daumcdn.net/cfile/tistory/197ECC024BDFE8DD8E</image>
            <duration>202</duration>
        </track>

        <track>
            <title>Run Devil Run</title>
            <creator>Girls' Generation</creator>
            <annotation>100410 쇼!음악중심</annotation>
            <location></location>
            <image>https://t1.daumcdn.net/cfile/tistory/190A9B174BDFE96251</image>
            <duration>203</duration>
        </track>

        <track>
            <title>Run Devil Run</title>
            <creator>Girls' Generation</creator>
            <annotation>100411 인기가요</annotation>
            <location></location>
            <image>https://t1.daumcdn.net/cfile/tistory/207ECC024BDFE8DD8F</image>
            <duration>203</duration>
        </track>

        <track>
            <title>Oh! + Run Devil Run</title>
            <creator>Girls' Generation</creator>
            <annotation>100430 뮤직뱅크</annotation>
            <location></location>
            <image>https://t1.daumcdn.net/cfile/tistory/172AD6154BDFE9ADCA</image>
            <duration>237</duration>
        </track>

        <track>
            <title>Oh! + Run Devil Run</title>
            <creator>Girls' Generation</creator>
            <annotation>100502 인기가요</annotation>
            <location></location>
            <image>https://t1.daumcdn.net/cfile/tistory/167ECC024BDFE8DC8C</image>
            <duration>239</duration>
        </track>

        <track>
            <title>Run Devil Run</title>
            <creator>Girls' Generation</creator>
            <annotation>100502Y★star</annotation>
            <location></location>
            <image>https://t1.daumcdn.net/cfile/tistory/197ECC024BDFE8DD90</image>
            <duration>205</duration>
        </track>

    </tracklist>
</playlist>

위와 같이 플레이 리스트에 나타내고자 하는 파일들의 속성을 설정해주세요. 속성중에 여러가지가 있는데 적지 않은 속성은 보이지 않습니다. 예를 들어 영상의 설명이 필요없다면 <annotation></annotation>은 빼셔도 됩니다.

note.  <meta rel="duration"></meta>과 <duration></duration>는 똑같이 사용됩니다. 안에 초단위로 적어주세요. 적은 시간만큼만 플레이됩니다.

note.  XML파일에 한글이 포함되어 있다면 UTF-8로 저장하셔야 정상적으로 나옵니다.

note.  위의 속성중에 필수는 <location>동영상 주소</locaton>입니다. 즉 파일의 주소지요. 다른 건 전부 부가적인 속성들입니다. 없어도 플레이 리스트 만드는데 상관없습니다.

여기서 한가지 짚고 넘여가야 할것이 있습니다. 플레이리스트에 나타나는 정보들은 스킨에 의존합니다. 위에 <creator></creator>를 설정했지만 스킨에 따라서 보일수도 있고 보이지 않을수도 있습니다.(예제에는 skin=을 안써주면 나오는 기본 스킨인데 creator가 나타나지 않습니다.) 또 아래와 같이 xml파일에 설정을 해줘도 preview 이미지가 없는 스킨도 있습니다.

더보기

심플하네요.
스킨 주소 : http://www.longtailvideo.com/addons/skins/59/Modieus-%28Stylish%29-Slim?q=%20alt=
위에 쓰인 예제 XML을 그대로 사용한것입니다. 보시다시피 스킨에 따라 완전히 틀리죠.

  이건 필요없는 설명이지만 혹시나 혼란이 있을꺼 같아서 적습니다. Jwplayer가 5버전으로 업그레이드 되면서 아래 그림과 같이 스킨을 1.0버전(swf)과 2.0버전(zip)으로 제공하고 있습니다.
 

2.0버전은 zip 파일로 되어 있지만 zip파일을 서버에올리고 기존 방식과 같이 그냥 skin=http://서버주소/스킨.zip 같이 쓰시면 작동합니다.

XML 파일 작성이 끝났으면 서버에 올려주시고 주소를 다른곳이 적어 놓습니다. 

2. 태그 작성

위 예제에 쓰인 태그입니다.

<embed type="application/x-shockwave-flash" src="http://cfs.tistory.com/custom/blog/49/493776/skin/images/51.swf" allowfullscreen="true" flashvars="playlistfile=http://cfs.tistory.com/custom/blog/49/493776/skin/images/RDRlist.xml&playlistsize=200&playlist=bottom&controlbar=over&menu=false" width="640" height="560">

flashvars를 살펴보겠습니다.

▒ playlistfile=  뒤에 xml 파일의 주소를 적어주세요. 4버전에서는 file= 이고 5버전에서는 playlistfile= 입니다.
▒ playlistsize : 플레이리스트 사이즈 입니다. 플레이리스트가 얼마만큼 보여질지 결정합니다.
▒ playlist : 플레이리스트가 보여질 위치를 지정합니다. none(defalut), bottom, left, right, top, over가 있습니다.
▒ height : 원래는 플레이어의 세로 사이즈이지만 여기서 플레이리스트를 bottom으로 설정하고 사이즈를 200으로 했기 때문에 원래 플레이어 사이즈에서 200을 더해줘야합니다. 원래는 640 x 360 이었는데 플레이리스트 때문에 200 픽셀이 세로로 길어지니 640 x 560이어야 합니다. 플레이리스트의 위치가 left나 right라면 width가 늘어나야겠죠?
또 한가지 더, 여기서는 controlbar=over를 해서 controlbar가 영상 위에 있습니다. 하지만 controlbar=bottom을 하면 이 역시 controlbar의 크기만큼 height에 더해줘야 한다는거 잊지마세요. 그래야 영상이 좌우에 검은 바탕이 없이 꽉차보입니다.