티스토리 툴바


JW player2010/03/16 22:36
요즘 웹에서 동영상 재생을 목적으로 많이 쓰이는 JWplayer의 설치와 사용하기 입니다. 사실 정말 간단합니다.

JWplayer 홈페이지 : http://www.longtailvideo.com/

위의 홈페이지에 가시면 JWplayer를 다운 받으실 수 있습니다. 현재 5.2버전까지 나왔네요

이메일 입력이 싫으신분은 여기서 다운로드 하세요


note.   홈페이지에서 직접 다운 받으시는 분은 Include Viral, a video saharing plugin 부분을 체크 해제하시고 다운로드 하십시오. Viral버전은 공유 플러그인이 기본으로 포함되어 있어 동영상이 끝나면 공유 화면이 나옵니다.


1. 설치하기

다운로드한 파일을 열어보면 파일들이 몇개 있는데 필요한건

player.swf
swfobject.js
yt.swf

3개 파일입니다. yt.swf가 5.1에 새로 추가되었는데 홈페이지 설명으로는 Youtube 동영상 지원을 위해서 필요하다고 하네요.

위 3개의 파일을 외부에 링크가능한 서버에 서로 같은 디렉토리에 올리셔야 됩니다. 혹시 로그인이 필요한 곳에다 올리시면 다른 사람은 못보잖아요 ㅎㅎ. 전 제 티스토리 계정 HTML/CSS편집의 파일 업로드에 올렸습니다.


설치는 이게 끝입니다.
 

2. 웹에서 사용하기

JWplayer는 embed 태그를 쓰면 쉽게 사용할 수 있습니다.

홈페이지에서 Setup Wizard를 제공하고 있습니다.

4버전 Setup Wizard : http://www.longtailvideo.com/support/jw-player-setup-wizard-4
5버전 Setup Wizard : http://www.longtailvideo.com/support/jw-player-setup-wizard

note.  5버전에서 로고를 사용하기 위해서는 라이센스 버전을 사용하여야 합니다.


요렇게 뜹니다. 2번 Change Your Flashvars에서 사용자가 필요한 항목을 넣고  Update Preview & Code를 누르면 3번의 Preview4번의 HTML코드가 자동으로 만들어지고 HTML코드를 복사해서 붙여넣기하면 끝입니다.

2번 Change Your Flashvars필수로 필요한 항목을 보겠습니다.


source에는 자신이 업로드한 플레이어.swf의 링크를 넣습니다.
heightwidth는 동영상의 크기에 맞게 적어주시거나 표시하고자하는 웹페이지의 크기에 맞게 적어주세요.


가장 중요한 file입니다. 자신이 올린 동영상의 주소를 입력하시면 됩니다. 괜찮은 계정 구하기가 아주 어렵더군요. 유료가 좋기는하나 돈이 들어가니 자신만의 계정을 찾아보시기 바랍니다.

※ 계정 추천

더보기




Layoutskin은 JWplayer에 스킨을 입힐 수 있게 해줍니다.

스킨 페이지 : http://www.longtailvideo.com/addons/skins 에 가셔서 자신이 원하는 스킨을 찾아 플레이어 설치하듯 설치해주세요. 없으면 그냥 기본으로 제공하는 스킨이 보여집니다.(jwplayer버전에 따라 적용할 수 있는 스킨이 있습니다. 자신의 버전에 맞는 스킨을 쓰세요)

note.  zip파일로된 스킨을 받으셨으면 그냥 그대로 서버에 올리시고 zip파일의 링크를 태그에 적으시면 됩니다.


controlbar(재생버튼과 음량표시 같은거)는 controlbar가 화면에 나타날 위치(위, 아래, 없음, 사라짐)를 정할 수 있습니다.

이제 필요한 세팅은 다 했군요. 그럼 Update Preview & Code 눌러서 Preview와 HTML코드를 생성합니다.

처음에는 HTML코드가 자바스크립트로 나옵니다. 우리에게 익숙한 EMBED태그로 바꾸기 위해서는 코드 박스 상단 오른쪽에 the embed code를 누르시면 됩니다.

제가 예제로 만든 태그는 다음과 같습니다.

<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='640' height='360' id='single1' name='single1'>
<param name='movie' value='http://cfs.tistory.com/custom/blog/49/493436/skin/images/Player.swf'>
<param name='allowfullscreen' value='true'>
<param name='allowscriptaccess' value='always'>
<param name='wmode' value='transparent'>
<param name='flashvars' value='file=http://vmffptnl.tistory.com/attachment/cfile29.uf@11497D054B9F1C0F2066BF.mp4&skin=http://cfs.tistory.com/custom/blog/49/493776/skin/images/modieus.swf&controlbar=none&dock=false'>
<embed
type='application/x-shockwave-flash'
id='single2'
name='single2'
src='http://cfs.tistory.com/custom/blog/49/493436/skin/images/Player.swf'
width='640'
height='360'
bgcolor='undefined'
allowscriptaccess='always'
allowfullscreen='true'
wmode='transparent'
flashvars='file=http://vmffptnl.tistory.com/attachment/cfile29.uf@11497D054B9F1C0F2066BF.mp4&skin=http://cfs.tistory.com/custom/blog/49/493776/skin/images/modieus.swf&controlbar=none&dock=false'/>
</object>

보시면 불필요한 object태그와 parameter태그들이 있습니다. 게시판에 따라서 저런 태그들을 지원하는곳도 있고 지원하지 않는곳도 있습니다.

우리가 필요한 부분은 EMBED태그 부분입니다. 저부분만 있으면 플레이 시키는데 문제 없습니다.

flashvars 부분을 보시면 '&' 로 이어진 부분이 있습니다. 저렇게해서 동영상 재생에 필요한 옵션(playlist, 버튼표시유무, 스킨등)을 하나하나씩 넣는겁니다. 물론 Setup Wizard에서 다 알아서 해줍니다. Setup Wizard를 하나씩 설정해보시고 자신만의 설정을 만들어보세요.

예제를 한번 보시면 이해가 되실껍니다.

3. 예제



<embed width="640" height="360" src="http://cfs.tistory.com/custom/blog/49/493776/skin/images/51.swf" allowfullscreen="true" flashvars="file=http://vmffptnl.tistory.com/attachment/cfile29.uf@11497D054B9F1C0F2066BF.mp4&skin=http://cfs.tistory.com/custom/blog/49/493776/skin/images/modieus.swf&controlbar=over">

flashvars에 재생하고자하는 파일의 위치와 스킨, controllbar의 옵션이 들어가있는걸 알수 있습니다.

혹은 자동으로 시작하고 싶을때는 &autostart=true를, 계속해서 반복 재생하고 싶을땐 &repeat=always를 뒤에 붙이시면 됩니다.

위의 예제와 같이 EMBED 태그를 메모장에 만들어두고 필요할때마다 동영상 주소나 크기 등만 바꿔서 게시판에 붙여넣기하시면 편하실껍니다.

4. JW Player 명령어 

http://developer.longtailvideo.com/trac/wiki/Player5FlashVars 에 나와있는대로 설명해드릴께요. 5버전 기준

괄호() 안에있는 것이 defalut값입니다. 따로지정하지 않으면 default값이 적용됩니다.

backcolor (undefined): controlbar와 playlist의 background color를 지정합니다. 
frontcolor (undefined): controlbar와 playlist의 아이콘과 텍스트의 색깔을 지정합니다.
lightcolor (undefined): 마우스 오버가 되면 아이콘과 텍스트가 바뀌는 색깔을 지정합니다.
screencolor (undefined): 플레이어의 바탕 색깔입니다.

note.  swf(ver1.0)로된 스킨만 적용이 됩니다. zip(ver2.0)으로된 스킨은 zip안에있는 이미지를 그대로 보여주는지 안되더군요.

controlbar (bottom): controlbar의 위치를 지정합니다. bottom(아래), top(위), over(사라짐), none(없음)

note.  bottom이나 top으로 지정할때는 player의 세로길이 즉, height에 controlbar의 길이까지 포함시켜야합니다.

dock (false): set this to true to show the dock with large buttons in the top right of the player. Available since 4.5. 
dock는 자막 플러그인 같은걸 쓰면 오른쪽 위에 Caption on아라는 버튼이 뜹니다. 이걸 눌러서 자막을 on/off 시킬수가 있게 되는거죠. 플러그인에 따라서 dock를 꼭 true로 세팅 해줘야하는 것들이 있습니다.

icons (true): 화면중간에 나오는 재생버튼이나 버퍼링 아이콘의 표시 유무를 지정합니다. false로 하면 안나옵니다.

logo.file (undefined): 자신의 로고 주소입니다. jpg, png, gif 파일을 서버에 올리시고 주소를 적으면 됩니다.
logo.link (undefined): 로고를 클릭했을때 이동할 링크를 적으시면 됩니다.
logo.hide (true): 로고는 처음 몇 초만 보이고 사라집니다. false로 설정하면 재생되는 내내 로고가 나타납니다.
logo.position (bottom-left): 로고의 위치입니다. bottom-left(왼쪽 아래), bottom-right, top-left, top-right

note.  위의 logo 관련 태그들은 Licensed players only 입니다.즉, 개인이나 기업이 라이센스를 지불한 플레이어만 해당합니다. 메가플러그의 경우 동영상을 올리면 자동으로 플레이어를 입혀서 태그를 만들어주는데요. 그 플레이어가 5.1 레이센스인것으로 알고 있습니다.

note.   logo 파일에 swf도 파일도 됩니다. adobe flash로 움직이는 무비클립을 만들고 swf를 로고로 쓰시면 영상위에서 로고가 움직입니다.

playlist (none): 플레이 리스트의 위치를 지정합니다.bottom, top, over, rightnone. 
playlistsize (180): 플레이 리스트의 사이즈 입니다. 

note.  플레이 리스트 사이즈 만큼 플레이어의 크기도 늘어나야합니다. 다시 말해서 플레이 리스트가 bottom이면 height가 playlistsize만큼 늘어나야 한다는 이야기지요. 원래 플레이어의 크기가 640 x 360 이고 플레이어 리스트의 사이즈가 180이면 플레이어의 크기는 640 x 540으로 지정해야 된다는 이야기 입니다.
2010/05/19 - [Computer] - Jwplayer 사용하기 - 플레이리스트(playlist) 만들기 참조

skin (undefined): 스킨의 주소입니다. 

autostart (false): 자동실행 여부를 설정합니다. 플레이어가 로드되자마자 플레이 시키고 싶으시면 autostart=true

bufferlength (1):  버퍼링 시간을 설정할 수 있습니다. bufferlength=10으로 설정하면 동영상이 로드되고 10초간의 버퍼링 시간을 갖습니다. 다시말해서 10초간 동영상을 다운로드하고 시작하는거죠.

item (0): 이건 플레이 리스트일때 쓰입니다. 플레이를 시킬 동영상의 번호를 입력하면 그 번호부터 시작합니다.

note.  동영상의 순서는 0부터 시작합니다. 즉, 3번째 동영상을 플레이 시키기위해서는 item=2를 설정해야합니다.

mute (false): 음소거 입니다.

repeat (none): 반복재생에 관한 설정입니다. 
repeat=list  플레이 리스트를 한번 모두 재생하고 종료합니다.
repeat=always 동영상 파일을 무한반복합니다. 플레이리스트도 마찬가지
repeat=single 플레이리스트에서 선택한 동영상 하나를 계속 반복합니다.

shuffle (false): 플레이 리스트에 있는 동영상이나 음악을 랜덤으로 재생합니다.

smoothing (true): 업스케일링해서 플레이 시키는 동영상에 블럭이 보이지 않게 부드럽게 해서 보여준다고 합니다. 요즘 고해상도 동영상이 많아서 별로 필요없는 옵션인것 같습니다. 하지만 default가 true라서 항상 실행되고 있는듯 하네요. 컴퓨터 성능이 좋지 않을때는 false로 하라고 설명되어 있군요.

stretching (uniform): 동영상을 플레이어 크기에 맞게 늘이는 옵션입니다.  912 x 512(16:9) 동영상을 640 x 480(4:3)의 플레이어로 재생시키고 옵션을 설정해 보았습니다. 펼쳐서 보세요

더보기


volume (90): 볼륨입니다. 0~100까지 설정가능.

image (undefined): 동영상이 재생되기전 preview 이미지 입니다. 블로그같은데 올리시고 주소를 적으시면 됩니다.

menu (true) : 플레이어 위에 우클릭했을때 jw player관련 메뉴가 나옵니다. false로 하시면 안나옵니다.
저작자 표시 비영리 변경 금지
Posted by loveinfinkl
TAG ,

TRACKBACK http://anrosua.tistory.com/trackback/42 관련글 쓰기

  1. 티스토리 스킨에 올린 이미지 주소 따기  삭제

    2010/05/04 14:11TRACKBACK FROM 시간을 찾아서

    1. 파이어폭스(firefox)의 경우 파일 업로드에 있는 이미지를 아무거나 하나 지정합니다. 그리고 마우스를 정확히 이미지 위에다가 올려놓고 우클릭하고 <그림 주소 복사>를 하시면 클립 보드에 저장이 됩니다.( <그림 정보 보기>해도 주소는 나옵니다) preview 창에 공백이 많다보니 잘못 클릭할 수 있습니다. 저장된 주소가 http://cfs.tistory.com/custom/blog/49/493436/skin/images/iconMore.gi..

  2. Jwplayer 사용하기 - 파일 분할하고 이어서 재생하기  삭제

    2010/05/14 00:01TRACKBACK FROM 시간을 찾아서

    이 방법은 사실 playlist를 편법으로 활용한 것입니다. 자신의 계정이 큰 파일을 한꺼번에 올리고 스트리밍 시키는데 불편함이 없다면 이 방법을 쓰지 않겠지만 그렇지 못한 분들도 있기에 차선책으로 큰 파일을 분할하고 jwplayer로 분할한 파일을 이어서 플레이 시키는 방법을 소개합니다. 1. 파일 분할하기 예제에 쓰인 파일이 mp4 파일입니다(제가 megui밖에 사용할줄 몰라서-_-). mp4 파일은 전용툴인 mp4box가 있어서 그걸로 분할 하..

  3. 서울비의 알림  삭제

    2010/06/09 23:40TRACKBACK FROM seoulrain's me2DAY

    JWplayer 사용하기 — 블로그에서 mp3,mp4,flv,youtube 재생을 보다 깔끔하게! 이전 버전 사용자의 경우 player.swf 는 덮어쓰고, yt.swf와 swfobject.js 파일 올리면 유튜브 적용 바로 가능. (via anrosua)

  4. 좋은 정보 감사합니다  삭제

    2011/08/28 01:48TRACKBACK FROM Here is MonologWorld

    앞으로 동영상 올릴때 이런 방법을 써야 겠군요 ㅎㅎ

  5. Jwplayer Wizard 주소  삭제

    2012/01/10 01:05TRACKBACK FROM Radup

    Jwplayer Wizard 주소 http://www.longtailvideo.com/support/jw-player-setup-wizard 위 링크를 클릭하면 보다 더 쉽게 빠르게 만들수 있다.. 티스토리에서 Jwplayer 사용 하시고싶은신데 모르시겠다면 ,, 여기 http://anr..

댓글을 달아 주세요

  1. aysul

    저기 그러면 니코니코 동화 같은 경우는 주소를 어떻게 하면 되죠?

    2010/05/07 14:20 [ ADDR : EDIT/ DEL : REPLY ]
    • 니코니코 동화.. 라는걸 첨 듣는군요.

      위키 설명을보니 일본 UCC 사이트군요. 궁금한게 뭔가요??

      2010/05/07 22:17 [ ADDR : EDIT/ DEL ]
  2. aysul

    file에 있는 동영상 주소라는게 혹시 그동영상을 받아서 다시 업로드하는 것을 얘기하나요?

    2010/05/08 18:24 [ ADDR : EDIT/ DEL : REPLY ]
    • UCC사이트면 유튜브같은 퍼가기 기능이 있지 않을까요? 일어라서 제가 니코동을 테스트할 수가 없어요 ㅜㅜ;

      만약 퍼가기 기능이 있다면 굳이 다운을 받아서 다시 올릴필요는 없을것 같습니다.

      2010/05/08 20:38 [ ADDR : EDIT/ DEL ]
  3. 영상 자르기 무슨 프로그램 사용하는지 여쭈어도 될까요? 2분 30초가량의 동영상을 버츄얼덥으로 잘랐는데 화질 유지하게 코덱설정 안하고 FLV파일로 저장했더니 용량이 어마어마해져서 티스토리에서 계정을 못따겠네요ㅠㅠ어떤 프고그램 사용하시길래 화질도 좋고 용량도 10M아래로 맞추시는지..ㅠㅠㅠ

    2010/05/26 02:55 [ ADDR : EDIT/ DEL : REPLY ]
    • 영상 자르기라면 소개해드릴 블로그가 한군데 있습니다. http://snoopybox.co.kr/ 스누피님 블로그인데요. 원래 윈도우즈 분야에서 유명하신분입니다. 인코딩도 강좌도 가끔 하시는지라 소개해드릴께요. 분류에 "인코딩"이라는 카테고리를 가시면 동영상 컨테이너 별로 자르기 강좌가 있습니다. 거기 가시면 원하시는 대답을 얻으실 수 있을 겁니다.

      이건 여담입니다만 2분 30초 가량을 화질도 고려하면서 10메가로 맞추기가 여간 어렵지 않으실껍니다.

      2010/06/07 03:24 [ ADDR : EDIT/ DEL ]
  4. 오오 유튜브 적용도 아주 잘 됩니다. 감사합니다.

    2010/06/09 23:32 [ ADDR : EDIT/ DEL : REPLY ]
    • 별말씀을요. 유튜브를 활용해서 자신의 홈페이지에 배경음악을 깔 수도 있습니다. 유튜브에는 음악이라던지 뮤직비디오가 많이 있습니다. 이것을 jw player로 불러와서 영상부분을 안보여주게 height를 줄이고 플레이를 시키면 음악만 나오는것 같이 만들수가 있죠

      2010/06/10 22:38 [ ADDR : EDIT/ DEL ]
  5. 앗! 정말 좋은 팁이에요! : )

    2010/06/13 15:04 [ ADDR : EDIT/ DEL : REPLY ]
  6. 5버전 말고 4버전으로는 그런데 못 바꿀가요? ㅎㅎ

    2010/06/16 20:14 [ ADDR : EDIT/ DEL : REPLY ]
  7. 비밀댓글입니다

    2010/06/26 02:51 [ ADDR : EDIT/ DEL : REPLY ]
    • 플레이 시키려는 파일이 wmv 파일인것 같은데 맞나요?
      jw player는 wmv 파일을 지원하지 않습니다.
      jw player에서 사용가능한 코덱은 flv, h264/mpeg-4, mp3랑 유튜브 영상들입니다.
      WMP로 플레이 시켜보세요 :)

      2010/06/27 01:06 [ ADDR : EDIT/ DEL ]
  8. 비밀댓글입니다

    2010/06/27 14:06 [ ADDR : EDIT/ DEL : REPLY ]
    • 넹. 그건 jw player가 5버전으로 업그레이드 되면서부터 바뀐겁니다.
      스킨을 다운 받으시면 zip으로된 파일을 받으실텐데요
      그걸 그대로 서버에 올리시고 그냥 zip파일 링크를 태그에 써주시면 됩니다. :)

      2010/06/27 17:18 [ ADDR : EDIT/ DEL ]
  9. 비밀댓글입니다

    2010/06/27 18:21 [ ADDR : EDIT/ DEL : REPLY ]
    • 올리신 파일을 받아봤는데요.
      인코딩이 잘못된거 같습니다.
      Xvid + mp3 인가요?
      mp4 컨테이너에는 x264 + aac 코덱의 조합이여야 정상적으로 플레이됩니다. :)

      2010/06/27 23:07 [ ADDR : EDIT/ DEL ]
  10. 비밀댓글입니다

    2010/06/28 10:17 [ ADDR : EDIT/ DEL : REPLY ]
    • 우리가 말하는 동영상이라는 avi, mp4 형식들은 컨테이너라고 부릅니다. 컨테이너라는 이름에서 알 수 있듯이 무엇인가 담을 수 있는 박스를 말하죠. 여기에는 영상, 음성, 챕터, 자막 같은게 들어 갑니다.
      영상과 음성은 각각이 인코딩된 코덱이 틀립니다.

      jw player는 flv, h264, mp3 같은 파일만 지원합니다.

      요즘 스트리밍에 자주쓰는 컨테이너로는 wmv, flv, mp4가 있는데요. jw player는 flv, mp4가 많이 쓰입니다.

      flv 컨테이너는 flv+mp3 조합이나 h264+mp3 조합이 쓰이고 mp4 컨테이너는 x264+aac가 쓰입니다.

      위의 조건이 맞지 않는 영상은 재인코딩을 해야합니다.

      로렌토님과 같이 컨테이너를 바꾼다고 해서 영상과 음성의 코덱도 바뀌는게 아닙니다. 인코딩에 관해서는 인터넷 많이 있으니 참고하세요. 참고로 초보자가 쉽게 인코딩할 수 있는 프로그램으로 다음 팟 인코더를 추천해드립니다.

      2010/06/28 20:07 [ ADDR : EDIT/ DEL ]
  11. 비밀댓글입니다

    2010/06/28 13:52 [ ADDR : EDIT/ DEL : REPLY ]
    • 제가 질문을 잘 이해했는지 모르겠습니다.
      결과적으로 안됩니다. 반드시 외부링크가 가능한 서버에 업로드 되어야합니다.

      2010/06/28 13:58 [ ADDR : EDIT/ DEL ]
  12. 포스트 잘 보았습니다. 현재 사용하고 있는 버전이 아니라서 간략하게 훑어만 봤는데요.
    명령어 부분에서 제가 좀 자주 쓰는 캡션(자막)관련한 명령어는 없네요.
    현재 3.x버전 쓰고 있습니다만 4.x버전에서는 자막이 미묘하게 싱크가 안맞아서 못쓰고 있고 5는 어떤지 궁금합니다.
    명령어에 언급조차 안되고 있으니 알길이 없네요. (듣기로는 이전버전과 명령어가 많이 달라졌다고도 하고요..)
    지원은 되는건가요? 지원된다면 3.x버전을 버리고 5를 한번 만져보고자 하는데...

    2010/06/29 17:26 [ ADDR : EDIT/ DEL : REPLY ]
    • 제가 캡션 기능 jwplayer로 써볼려는 생각조차 못해봐서 조금 당황스럽네요 ㅋㅋ. 전 그냥 자막을 입해서 인코딩을 해버렸거든요. jwplayer에 caption관련 내장 플러그인이 있습니다.

      http://www.longtailvideo.com/addons/plugins/84/Captions?q=%20alt=

      이 링크로 가셔서 캡션 플러그인을 한번 사용해 보세요. timedText나 SRT 자막을 지원하는군요. timedText가 먼지는 저도 잘 모르겠어요 ㅋ

      2010/06/30 01:23 [ ADDR : EDIT/ DEL ]
  13. 감사합니다. 알려주신곳 가서 몇번 시도해본 끝에 단일 플레이어에서는 자막 넣기 성공하였습니다. 싱크도 아주 잘 맞네요. 플레이 리스트용으로 적용시키려면 또 xml 만들어서 하는것 같지만 아직은 잘 모르겠고 계속 시도하다보면 성공할것 같습니다.
    도움 주셔서 감사합니다.!!

    2010/06/30 17:01 [ ADDR : EDIT/ DEL : REPLY ]
    • 오오 성공하셨다니 다행입니다.

      노하우 좀 포스팅 해주세요.

      2010/06/30 18:34 [ ADDR : EDIT/ DEL ]
  14. 전 이런 프로그램 설명같은건 포스트 안하는지라...;; (해본적도 없고요..)
    대신 결과보고는 지금 리플로 남기겠습니다.
    단일 플레이어 (영상 1개짜리)에서는
    flashvars="file=http://flv.tagstory.com/MEDIA/FLV/20100612/V000435754.flv&plugins=captions-1&captions.file=http://올린 서버위치주소/자막파일명.srt 이고요. (자막 활성화 시켜주는게 plugins=captions-1 입니다. " " 안에 기입해주시면 되네요. 그리고 플러그인이라고 해서 스킨같이 다운받는거 있는줄 알았는데 그런건 없고요. 프로그램 자체에서 지원하네요.)
    좀전까지 계속 롱테일사 홈페이지 검색하면서 계속 실패한 끝에 방금 플레이 리스트 방식도 성공하였는데요.
    그곳에서 하라는것과는 좀 다릅니다. 어쩌다 보니 되어서 글 남겨봅니다.
    제가 영어는 못하는지라 잘 알아들은건지는 모르겠지만 그곳에서는 캡션.xml 파일을 만들어서 링크걸라고 하는거 같았는데 캡션소스.xml을 구하는게 어려워서..가지각색이고 어쩌다 구했는데 영 이상해서 그냥 포기하고 롱테일사 질문답글 포럼같은데서 검색하면서 발견한건데요.
    기존버전 (저의 기준 3.14)에서 했던걸 약간 변경한 방식입니다.
    3.14버전에서 xml 만들때 캡션부분은 <link rel="captions">http://서버에자막올린위치주소/자막파일명.srt</link> 이렇게 각 파일마다 대입시켰습니다.
    여기서 <meta rel="captions.file">http://서버에 자막 올린 위치 주소/자막파일명.srt</meta> 이렇게 해주시면 자막이 됩니다. 그리고 웹에 올릴때에 단일영상에서 했던 plugins=captions-1을 써줘서 캡션 활성화 시켜주시면 끝입니다. 플레이 리스트 방식일때는 자막위치는 기입 안하셔도 되고요. (이미 xml로 만들어서 위치를 잡아주었기 때문에..)

    써보니까 자막의 마지막 부분은 영상이 끝날때까지 지속되는 버그가 있네요.
    그리고 3.14에서는 <br>태그는 물론이고 폰트 색깔 태그등 아무것도 안먹혔는데 여기선 최소한 <br>태그는 먹혀서 번역가사를 넣을 수 있어서 가장 좋았습니다. (폰트 색깔 태그도 들어가나 실험해봤는데 폰트 태그는 안되더군요.)

    단점은 기존 3.14는 스킨도 작고 아담해서 좋았는데 이번껀 스킨 대형에 폰트도 대형이라..게다가 creator 정보는 표시도 안되고..블로그 보면 스킨에 따라 영향이 있으시다고 하셨는데 creator 표시되는 추천스킨이라도 알려주시면 감사하겠습니다..ㅠ
    그리고 기존 3.14는 MP4가 지원이 안되서 마이스페이스에서 링크를 못걸었지만 4.x대부터 MP4가 지원되서 유용하게 쓸수 있다는 점..
    서로간 장단점이 있어서 고민좀 해봐야할 듯 하네요.
    아참..그리고 <annotation> 이나 <creator>에 표시되는 폰트는 키우는 방법이 없나요? 타이틀의 폰트는 대형인데 쟤네들은 너무 소형이라 미스매치라 보기가 안좋네요..

    아..그리고 한가지 더 빠진게 있는데 컨트롤바를 over로 하면 자막 출력 위치가 무척이나 위로 올라가버려서 컨트롤바가 사라지면 화면 정가운데 기준으로 약간 밑으로 출력되서 아주 이상합니다. 자막시엔 bottom이 가장 좋네요.

    그리고 러브인핑클님이신가요? 이 포스트 덕분에 아직 알지 못했던 jw 5버전에 대해 많이 배웠습니다. 다시한번 감사의 말씀 드립니다.

    2010/07/01 11:07 [ ADDR : EDIT/ DEL : REPLY ]
  15. 따라서 하는데 잘 안되서 질문 드려요. 저위에 예제에 제 티스토리에 파일업로드시킨 플레이어주소와 플짤주소를 대신해서 넣었는데요...콘트롤바는 나오는데 정지는 눌러도 멈추지 않고 시간도 나오지 않습니다. 아래껀데 한번 봐주심 감사하겠습니다.
    <embed width="640" height="360" src="http://cfs.tistory.com/custom/blog/59/599795/skin/images/player.swf" allowfullscreen="true"
    flashvars="file=
    http://xltmxhflrpwjddyd.tistory.com/attachment/cfile1.uf@1128011B4C417B2C0B4166.swf&skin=http://4.file.snoin.com/data0w/peon/196sn/modieus.zip&controlbar=over">

    2010/07/27 22:13 [ ADDR : EDIT/ DEL : REPLY ]
    • jwplayer는 swf를 플레이 시키는게 아닙니다. swf파일은 embed 태그를 쓰면 됩니다. embed 태그는
      <embed width="640" height="360" src=http://xltmxhflrpwjddyd.tistory.com/attachment/cfile1.uf@1128011B4C417B2C0B4166.swf>
      이렇게 하시면 되겠네요 ;)

      2010/07/27 22:23 [ ADDR : EDIT/ DEL ]
  16. jwplayer는 swf를 플레이 시키는게 아니군요...기초적인걸 모르고 질문했네요. . 위에 빠른답변 감사해요.

    2010/07/27 22:40 [ ADDR : EDIT/ DEL : REPLY ]
  17. 비밀댓글입니다

    2010/07/29 12:29 [ ADDR : EDIT/ DEL : REPLY ]
    • jw player는 flv나 mp4같은 동영상을 플레이시킵니다. file을 보니 다음팟에 올리셨네요. jw player는 다음팟을 지원하지 않습니다. ucc업체는 youtube만 지원합니다.

      그리고 스킨은 zip으로 받으신거 같은데 티스토리 스킨에는 zip파일이 올라가지 않습니다. 외부 링크 가능한 서버에 올리셔야 됩니다.

      다음팟에 올리셨으면 그냥 다음팟 플레이어를 쓰시면 됩니다.

      사람들이 왜 다음팟이나 네이버, youtube같은 ucc 업체를 쓰지 않냐면 저런 사이트들은 원활한 스트리밍과 서버의 부하를 줄이기 위해서 자체 인코딩을 해버립니다. 그래서 자신이 간지나게 인코딩을 해놔도 막상 ucc업체에 올리면 깍두기가 난무하거나 화질이 떨어지죠. 이걸 방지 하기 위해서 자신만의 공간(혹은 돈을 들여서 웹스토리지 업체에 결제를 하고)에 올리고 jw player로 플레이 시키는 겁니다.

      요약

      다음 팟에 올린 동영상은 jw player 플레이할 수 없다. ucc업체는 youtube 밖에 되지 않는다.

      2010/07/31 03:25 [ ADDR : EDIT/ DEL ]
  18. ㄻ오라ㅓㅁ

    jwplayer로 올라온 동영상 저장할수있는 방법은 없나요?

    2010/07/29 18:56 [ ADDR : EDIT/ DEL : REPLY ]
    • 소스 보기를 하셔서 jw player에 태그에 file=에 해당하는 부분을 복사해서 주소창에 복사하고 엔터치시면 됩니다.

      예제에 쓰인 태그가

      <embed width="640" height="360" src="http://cfs.tistory.com/custom/blog/49/493776/skin/images/51.swf" allowfullscreen="true" flashvars="file=http://vmffptnl.tistory.com/attachment/cfile29.uf@11497D054B9F1C0F2066BF.mp4&skin=http://4.file.snoin.com/data0w/peon/196sn/modieus.zip&controlbar=over">

      이거니까

      http://vmffptnl.tistory.com/attachment/cfile29.uf@11497D054B9F1C0F2066BF.mp4 이 부분이 해당되겠죠?

      2010/07/31 03:27 [ ADDR : EDIT/ DEL ]
  19. 비밀댓글입니다

    2010/08/05 11:52 [ ADDR : EDIT/ DEL : REPLY ]
    • 팟인코더를 많이 안써봐서 로고 제거 기능이 있는지 없는지는 모르겠네요. avisynth filter로는 로고 제거 필터가 있습니다.

      http://vidcorea.net/2865

      여기에 가시면 방송사 로고를 제거하는 법이 있습니다.

      저도 해봤는데 완벽하게 되진 않더라고요. ㅋㅋ

      2010/08/05 21:41 [ ADDR : EDIT/ DEL ]
  20. 비밀댓글입니다

    2010/08/06 22:33 [ ADDR : EDIT/ DEL : REPLY ]
    • 태그나 올리신 웹페이지 주소를 주셔야 제가 문제점을 찾아볼 수 있습니다. ;)

      지금 당장 유추 할 수 있는건 플레이어가 로드되지 않은것 같군요.

      2010/08/07 01:54 [ ADDR : EDIT/ DEL ]
  21. 비밀댓글입니다

    2010/08/07 20:26 [ ADDR : EDIT/ DEL : REPLY ]
    • 보니까 mp4를 다음 팟 인코더로 인코딩하셨네요. 맞는지요? 다음 팟 인코더로 mp4 인코딩을 하시면 스트리밍이 안되고 다 다운받은 다음에 플레이가 됩니다. 그래서 mp4box로 mux를 한번 더 해줘야 합니다. yamb 같은 mp4box gui로 한번 mux를 하시던지 아니면 flv로 인코딩을 해보세요.

      그리고 파란에 업로드를 하셨는데 파란은 파일 다운이 가끔 안되는 경우가 있습니다. 여기다가 모두 다운이 되야 플레이 되기 때문에 안된다고 보여질 수 있습니다.



      선미야 ㅜㅜ

      2010/08/08 23:14 [ ADDR : EDIT/ DEL ]
  22. 비밀댓글입니다

    2010/08/08 02:37 [ ADDR : EDIT/ DEL : REPLY ]
    • 티스토리는 가입형 블로그이지만 사용자가 설치를 할 수 있게 서버 공간을 줍니다.(현재 20메가로 제한) 그래서 제일 만만한게 티스토리이고 사람들이 많이 사용하죠.

      그외에는 모두 메가플러그(스트리밍에 중점을 둔 웹스토리지 서비스)나 웹호스팅 서비스 업체에 비용을 지불하고 공간을 확보해야 하죠.

      플레이어 설치에 어려움이 있다면 제가 예제에 써놓은 주소를 그대로 쓰셔도 됩니다. ;)
      하시면 제가 변덕이 생겨 지워버린다면 쓰실 수가 없겠죠 ㅜㅜ;

      2010/08/08 23:30 [ ADDR : EDIT/ DEL ]
  23. 1

    http://www.imdb.com/video/screenplay/vi1502873113/

    위 주소에 올라온 동영상이 jw player로 올라온건데 다운 받을수 있는 방법 없나요?..

    소스보기로 검색해도 안떠서..

    2010/08/08 16:41 [ ADDR : EDIT/ DEL : REPLY ]
    • 이럴때 유용한 유틸이 있지요!!

      url snooper나 orbit downloader로 동영상의 주소를 알아 낼 수 있습니다.!!

      orbit downloader는 마침 제가 포스팅한게 있네요.
      http://anrosua.tistory.com/8

      그 외에도 브라우저 플러그인 형태로 되어 있는 동영상 다운로더들이 많이 있습니다. 파폭이나 크롬을 쓰신다면 한번 찾아보세요

      2010/08/08 23:22 [ ADDR : EDIT/ DEL ]
  24. 비밀댓글입니다

    2010/08/09 17:14 [ ADDR : EDIT/ DEL : REPLY ]
  25. fw플레이어 정보 여기서 보고 어느정도 마스터했습니다. 일단 감사하다고 하고싶구요.!!
    지금 마지막단계에서 막히는데요. 어디에서도 정보를 찾을수없어서....
    동영상에 로고를 넣고 싶은데 어떻게 해야하나요? 유료결제라도 해서 하고싶은데..
    만약 유료결제하면요. 셋업 위저드에 목록이 생기는건지, 아니면 태그를 입혀야되는건지도 아이러니하네요
    도와주세요!!!! 슈퍼맨 !!

    2010/08/10 23:03 [ ADDR : EDIT/ DEL : REPLY ]
    • 유료로 살 필요는 없습니다. 라이센스 버전이 인터넷에 많거든요. 동영상 스트리밍 업체가 입혀주는 플레이어도 라이센스 버전입니다. 당장 가까이에도 있습니다. X)

      셋업 위저드에는 생기지가 않습니다. 태그로 넣어줘야하니다. 본문에 4. jw player 명령어에 logo관련 태그가 있습니다. 다른 옵션처럼 사용하시면 됩니다. :)

      2010/08/11 03:32 [ ADDR : EDIT/ DEL ]
  26. 은행나무

    웹에서 사용하기 3번 플레이어의 controlbar - 마우스오버가 아닌 플레이어가 작동되는
    동시에 색상이 그대로 나오게 끔 하고 싶어서 플래시 강좌를 열어보았는데 무슨말인지 ㅠ.ㅠ.

    그래도 loveinfinkl님 포스트를 보면서 궁금했던 부분이 많이 해결되서 고맙습니다.

    2010/08/18 14:22 [ ADDR : EDIT/ DEL : REPLY ]
    • 컨트롤바를 사라지지 않고 계속 보여주고 싶으신거 같은데. 제가 질문을 제대로 이해했는지 모르겠네요.

      controlbar 옵션을 바꾸세요. bottom, top, over, none중에 선택할 수 있답니다. <4. jw player 명령어> 부분을 참조하세요 ;)

      2010/08/18 15:16 [ ADDR : EDIT/ DEL ]
    • 은행나무

      lightcolor (undefined): 마우스 오버가 되면 아이콘과 텍스트가 바뀌는 색깔을 지정합니다

      마우스오버를 시키지 않고 동영상이 play되면서 색상이 나오는 ..제가 설명을 잘 드리지 못했는데요.

      jw 플레이어 동영상을 보여드릴께요. 스킨에 변화를 주고 싶지만 너무 어려워요.

      2010/08/18 17:14 [ ADDR : EDIT/ DEL ]
    • 아하. 그 말이셨군요.. 저 설명은 마우스가 컨트롤 바에 오버되었을때 이야기입니다.

      컨트롤 바의 색깔을 바꾸시고 싶으시면 backcolor와 frontcolor를 바꿔보세요~.

      단 swf로 된 스킨만 가능합니다

      2010/08/18 23:29 [ ADDR : EDIT/ DEL ]
    • 은행나무

      컨트롤바를 수정하고 싶은데 플래시가 어려워서.
      이리저리 자료들을 찾아서 둘러보는데 무슨 말인지 모르겠어요. ㅠ

      2010/08/20 16:53 [ ADDR : EDIT/ DEL ]
    • 컨트롤 바 자체를 수정하고 싶으신거군요. 소스가 있어야 될텐데..

      longtailvideo 홈페이지에 가면 스킨 제작 방법도 있습니다.
      물론 adobe flash를 모르신다면 할 수 없지만.

      그리고 요즘 나오고 있는 zip으로 된 스킨은 xml로 제작되고 있습니다. 이 역시 longtailvideo 홈페이지에 가면 있습니다.

      전 스킨 제작 같은건 안해봤기 때문에 답변을 해드릴수가 없네요.

      2010/08/20 19:07 [ ADDR : EDIT/ DEL ]
  27. 비밀댓글입니다

    2010/08/19 15:21 [ ADDR : EDIT/ DEL : REPLY ]
    • 1. 예상하신대로 비디오 코덱이 잘못되었습니다. h264나 flv로 인코딩되어야 하지요. 원본을 보니 mp4v네요

      2. 용량이 많아진 이유는 bitrate가 높기 때문입니다. 적당하게 타협을 보세요. 원본을 보니 bitrate가 2415로 나오네요. 그대로 주시거나 더 적게 주세요.

      3. 고화질과 저용량 둘 다 잡을 수 있는 코덱이 있으면 저도 좀 ㅋㅋ

      4. <중요>
      다음 팟 인코더로 mp4를 인코딩하시면 jwplayer로 플레이했을때 동영상을 다 다운 받고 시작합니다. 이를 해결하기 위해서는 mp4box로 다시 한번 mux를 해주어야합니다.
      저로서는 별로 추천하지 않습니다. 귀찮아서요 ㅋ
      다음 팟 인코더로 인코딩 하실때는 파일 형식을 flv로 하시고 비디오 코덱을 x264로 오디오 코덱을 mp3로 설정하시고 인코딩 해보세요. ;)

      2010/08/19 17:55 [ ADDR : EDIT/ DEL ]
  28. 이제 거의 구조와 사용법을 알았는데 zip 스킨 어디로 올려서 주소를 어떻게 따와야 실행되는지 알기만 하면 되요

    어떻게 해야하는지?

    2010/08/24 01:55 [ ADDR : EDIT/ DEL : REPLY ]
    • 가장 큰 문제를 물어보시네요 ㅎㅎ. 계정에 대한 문제를 제가 머라고 말씀 드리기가 그렇습니다.

      티스토리 스킨에는 zip파일이 올라가지 않습니다. 그래서 좀 난감하죠.

      영상을 올리시는 공간이 파일명을 바꾸지 않는다면 거기에 올리시면 될것 같습니다.(스킨 파일은 파일명이 처음 다운받았을때와 같아야 됩니다.)

      2010/08/24 02:56 [ ADDR : EDIT/ DEL ]
  29. ㅎ_ㅎ

    사이트가서 다운받으려햇는데 영어보니까 어지러워서 찾아다니다가 요기에서 받앗어요 감사합니다~

    2010/09/20 02:43 [ ADDR : EDIT/ DEL : REPLY ]
  30. 왕초보라 하나하나 따라서 만들었는데요 저는 왜 플레이를 하면 처음시작에 왼편 하단에 JWPlayer 라는 로고가 나오는 걸까요?ㅠㅠㅠ

    2010/09/25 03:34 [ ADDR : EDIT/ DEL : REPLY ]
    • 공짜라서 그렇습니다. ;)

      안나오게 할려면 라이센스 버전을 쓰셔야 됩니다.

      본문에 있는 플레이어가 라이센스 버전입니다. 그걸 저장해서 쓰세요 ;)

      2010/09/26 01:13 [ ADDR : EDIT/ DEL ]
  31. 비밀댓글입니다

    2010/10/02 09:14 [ ADDR : EDIT/ DEL : REPLY ]
    • 아 그건 플레이어 입니다. 본문에 있는 zip파일은 아마 plyer.swf라고 되어 있을겁니다. 저걸 그냥 저장 해서 쓰세요. 저건 라이센스 버전입니다. 스트리밍 업체(아마 메가플러그)에서 구입한걸 껍니다.

      그리고 저거완 상관없이 본문의 설명대로만 하시면 동작할겁니다.

      2010/10/07 23:28 [ ADDR : EDIT/ DEL ]
  32. 와 포스트 잘 읽고 갑니다 도움 많이 됐어요 좋은 정보 감사합니다~~

    2010/10/07 00:39 [ ADDR : EDIT/ DEL : REPLY ]
  33. ㅈㅈㅈ

    jW 플레이어로 되어있는 동영상을 제 블로그에 퍼갈려면 어떻게 해야하죠?

    2010/11/01 11:20 [ ADDR : EDIT/ DEL : REPLY ]
    • 소스 보기를 하셔서 본문에 있는 유사한 태그를 복사하시면 되겠네요.

      그리고 이곳은 jwplayer에 관한 질문만 해주세요.

      2010/11/01 16:22 [ ADDR : EDIT/ DEL ]
  34. 비밀댓글입니다

    2010/11/03 18:53 [ ADDR : EDIT/ DEL : REPLY ]
    • 안녕하세요~

      jw player는 동영상을 플레이시키는 툴이지 플래쉬를 플레이시키는게 아닙니다.

      님이 올리신 코드는

      <embed src=http://koreanwolf.tistory.com/attachment/cfile10.uf@16730B134CCD6D61285128.swf width="480" height="273">

      이렇게 고치시면 정상적으로 나옵니다.

      좋은 하루 되세요 ;)

      그리고 댓글이 중복되어 올라왔네요. 하나는 지울께요.

      2010/11/03 21:10 [ ADDR : EDIT/ DEL ]
  35. 비밀댓글입니다

    2010/11/19 12:54 [ ADDR : EDIT/ DEL : REPLY ]
  36. 비밀댓글입니다

    2010/11/19 16:44 [ ADDR : EDIT/ DEL : REPLY ]
    • flv로 인코딩해보세요. flv는 아마 저작권 검사를 안할 겁니다.

      2010/11/19 21:44 [ ADDR : EDIT/ DEL ]
  37. 좋은글 감사합니다... 이 글을 보고 따라하니 쉽게 동영상을 업로드 할 수 있네요^^

    2010/12/01 14:23 [ ADDR : EDIT/ DEL : REPLY ]
  38. 김은지

    좋은정보입니다 +_+ 감사합니다

    2011/01/01 19:44 [ ADDR : EDIT/ DEL : REPLY ]
  39. 루핏

    감사합니다. flv 실행이 잘되네요~

    2011/01/14 16:51 [ ADDR : EDIT/ DEL : REPLY ]
  40. 비밀댓글입니다

    2011/01/20 02:23 [ ADDR : EDIT/ DEL : REPLY ]
    • 혹시 무료 버전을 사용하시는지요. 유료버전에서만 로고가 삽입됩니다. 본문에 있는걸 쓰시면 됩니다

      2011/01/20 02:34 [ ADDR : EDIT/ DEL ]
  41. 안녕하세요.
    질문 하나 부탁드립니다.
    제 경우에 repeat= 을 list나 always로 해도 자동으로 넘어가지 않고 쉐어,엠베드,인포 창이 뜨는데 왜 그런지 도저히 모르겠네요.
    http://www.jungjinkyo.com/jukebox/index.html

    2011/04/03 03:05 [ ADDR : EDIT/ DEL : REPLY ]
  42. 비밀댓글입니다

    2011/04/15 15:07 [ ADDR : EDIT/ DEL : REPLY ]
  43. 최승석

    질문 드립니다..
    1),다음팟인코더로 다음 카페에 업로드 한 파일을 JW 플레이어 SETUP WIZARD에 파일주소를 넣어 보면 정상적으로 소스가 안보입니다(파일 오류 라고 영어가 뜨네요). 플레이어 소스도 넣었구요..

    2),다음카페에는 영상이 재생이 되는데
    naver 카페 에서는 재생이 안되는군요,,
    처음에는 태그로 올릴때는 보였다가 나중에 보려면 영상 자체도 안보입니다.
    아마 차단 하는것 같은데요 네이버에 올릴수 있는 방법좀 알려 주세요..
    소스는 아래와 같습니다
    <EMBED height=390 type=application/x-shockwave-flash width=680 src=http://cfile245.uf.daum.net/original/16251D4B4E71A3862BBB50 flashvars="file=
    http://211.233.35.145/daumblog/1001/68/44776868.flv&amp;stretching=exactfit" allowfullscreen="true" allowscriptaccess="always" bgcolor="000000" allowNetworking='internal' allowScriptAccess='sameDomain'>
    email 로 간곡히 답변 기다리게습니다.
    부탁 드립니다..csscom5@hanmail.net 입니다..
    전화번호 010-5157-8634 입니다..
    문자 주시면 전화 올려 도움 받고 싶습니다.
    꼭좀 도와 주시길 기다리게습니다..
    도움 주시면 답례 하고 싶습니다..
    노여워 마시고 간절한 마음에서 드린 마음으로 생각해 주시기 바랍니다.

    늘 건강 하시고 행복 하세요,,
    감사합니다..

    2012/05/16 14:43 [ ADDR : EDIT/ DEL : REPLY ]