JW Player는 동영상 파일을 변환하지 않고 그대로 사용하기 때문에 형식 변환에서 발생하는 화질 감소 문제를 줄일 수 있고 반복 재생도 가능합니다.
경고) JW Player를 상업적 목적으로 사용할 경우, 라이선스 신청을 해야 합니다.

지원되는 파일 형식 : FLV, MP4, AAC, MP3, JPG, GIF, PNG

다음은 티스토리에서 JW Player 영상을 올리는 방법입니다.

우선, 블로그에 JW Player를 설치해야 합니다. 설치하기 싫으신 분은 제 블로그에 올린 JW Player 주소를 쓰셔도 되지만, 제 블로그가 문닫으면 사용이 불가능해질 겁니다. ^^;

최신 버전(버전 5.1)
player.swf 주소 : http://cfs.tistory.com/custom/blog/36/360864/skin/images/JWP_player.swf
player-viral.swf 주소 : http://cfs.tistory.com/custom/blog/36/360864/skin/images/JWP_player-viral.swf
swfobject.js 주소 : http://cfs.tistory.com/custom/blog/36/360864/skin/images/JWP_swfobject.js
yt.swf 주소 : http://cfs.tistory.com/custom/blog/36/360864/skin/images/JWP_yt.swf

구 버전(버전 4.6)
player.swf 주소 : http://serna.tistory.com/attachment/cfile7.uf@187D45224B0793025E9534.swf
player-viral.swf 주소 : http://serna.tistory.com/attachment/cfile27.uf@1661671F4B07879C2D0DF6.swf
swfobject.js 주소 : http://serna.tistory.com/attachment/cfile27.uf@1541AB1F4B07879C470C6A.js
yt.swf 주소 : http://serna.tistory.com/attachment/cfile29.uf@1843241F4B07879D372CF2.swf


4. 동영상 파일을 티스토리 글에 파일로 첨부하거나 다른 어딘가에 업로드 합니다. 티스토리 파일로 첨부할 때는 파일 하나 당 최대 용량이 10MB이므로 10MB가 넘는 동영상의 경우, 동영상 변환으로 파일 크기를 줄이거나 짧은 길이의 동영상 여러 개로 나눠야 합니다.(JW Player는 여러 개의 동영상을 연속적으로 재생할 수 있지만 약간 더 복잡합니다.)

티스토리 글에 첨부한 동영상 파일의 주소는 위의 설치 과정에서 소개한 방법으로도 할 수 있지만, 그림이나 음악 또는 swf 파일이 아닌 경우 글을 올린 다음 첨부 파일에서 마우스 오른쪽 단추를 눌러 링크 주소 복사를 눌러도 됩니다.

5. 이제 삽입할 HTML 코드를 생성합니다.
http://www.longtailvideo.com/support/jw-player-setup-wizard
위의 사이트에 들어가서 필요한 내용을 채워 넣으면 됩니다.

flvplayer with a single video로 설정한 다음(xml 파일을 이용한 여러 파일 재생도 이걸로 설정합니다.) 다음 값을 설정합니다.(다른 것을 재생하려면 (예를 들어 노래 : flvplayer with a single song) 다르게 설정해 놓고 마찬가지로 하면 됩니다.)

source : 업로드한 player.swf 또는 player-viral.swf 파일의 주소(player.swf는 반복 재생이, player-viral.swf는 퍼 가기가 쉽습니다.)
height : 동영상 높이 + 20(재생 막대 높이) + 플레이 리스트 높이(만약 여러 개의 플레이 리스트를 설정하고 보이게 할 경우에만)
width : 동영상 폭

description : xml 파일을 사용하지 않을 경우, 파일 설명
file : 업로드한 동영상 파일 주소
image : 썸네일 이미지
title : xml 파일을 사용하지 않을 경우, 파일 제목

backcolor : 배경 색깔
frontcolor : 글자 색깔
lightcolor : 마우스 포인터 갖다 댔을 때 바뀔 색깔

playlist ; 플레이리스트 위치. over로 설정하면 플레이어 재생화면 위치에 나타납니다.
playlistsize : 플레이리스트의 높이(또는 크기)

autostart : 자동 시작. true로 하면 자동 시작됩니다.
repeat : 반복 재생.

플레이리스트의 기본 높이는 61입니다.

따라서 원본 동영상이 하나이고 높이가 480이면 height는 500으로 설정하면 되며, 여러 개이고 높이 480, 플레이리스트를 보이게 했을 경우는 561로 설정하면 됩니다.

Update Preview & Code 를 누른 다음, Preview Your Player에서 제대로 돌아가는지 확인할 수 있습니다.
제대로 작동하면 Copy Your Code를 복사하여 티스토리 글에 HTML로 넣으세요.(아까 동영상을 업로드한 글을 수정해서 사용해도 상관없습니다.) 마지막으로, 코드 가장 윗부분의 swfobject.js를 업로드한 swfobject.js 파일 주소로 바꾸세요.

xml 파일을 사용해 여러 파일을 재생할 경우, 다음과 같이 xml 파일을 작성하고 file에 동영상 파일 대신 xml 파일 주소를 넣으면 됩니다.(업로드 필요)


끝내면 다음과 같이 보이게 됩니다.
동영상을 재생할 수 없습니다.

위의 HTML 코드는 다음과 같습니다.

<script type="text/javascript" src="http://serna.tistory.com/attachment/cfile27.uf@1541AB1F4B07879C470C6A.js"></script>
 
<div id="mediaspace">
동영상을 재생할 수 없습니다.</div>
 
<script type="text/javascript">
  var so = new SWFObject('http://serna.tistory.com/attachment/cfile7.uf@187D45224B0793025E9534.swf','mpl','480','380','9');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('wmode','opaque');
  so.addVariable('description','하츠네 미쿠의 소실 PV풍(MAD)');
  so.addVariable('file','http://serna.tistory.com/attachment/cfile29.uf@113599274B078B5D61CEFD.mp4');
  so.addVariable('link','https://www.youtube.com/watch?v');
  so.addVariable('title','[하츠네 미쿠] 하츠네 미쿠의 소실');
  so.addVariable('repeat','always');
  so.write('mediaspace');
</script>

티스토리에서 JW Player 사용하는 방법 동영상

'멀티미디어'로 넣을 수 없을 때는 HTML 편집 모드에서 넣으면 됩니다.
은빛냇물님이 쓴 글입니다.
댓글을 달아 주세요.
  1. BlogIcon 붉은토끼씨 2009.11.21 20:14 신고 댓글 주소 고치기/지우기 댓글 쓰기

    애니존에서 보내신 쪽지보고 왔습니다. 친절하게 설명해주셔서 정말 감사합니다 ㅎㅎ
    나름 혼자서 해결해볼려고 애써봤는데 역시 안되는 사람은 안되는 군요(...)

  2. BlogIcon 불치병 2010.01.05 21:50 신고 댓글 주소 고치기/지우기 댓글 쓰기

    하고있는데 jw플레이어는 나오는데 동영상이 안나오는군요/... 뭐가문제죠 플레이 누르면 0초에서 시작되질 않아요 ㅠ.ㅠ

  3. selendis 2010.03.26 16:29 댓글 주소 고치기/지우기 댓글 쓰기

    이글루스도 그냥 파일첨부하면 되는건가요?
    아무튼 좋은 정보 감사합니다.

  4. BlogIcon loveisstory 2010.04.09 04:23 신고 댓글 주소 고치기/지우기 댓글 쓰기

    jw player 여려개의 연속적으로 재생하는방법 좀 가르쳐주세요 부탁드러요 ㅠ.ㅠ

  5. BlogIcon 노흐 2010.04.10 05:06 신고 댓글 주소 고치기/지우기 댓글 쓰기

    은빛냇물님 mp4 동영상 티스토리에 파일로 올리셔서 url 복사하신거죠?
    저 flv 파일로 올려서 url 복사해서 그 주소 그대로 jw player file 부분에 적었는데
    Update Preview & Code눌러서 재생해보니까 자꾸 오류뜨네요ㅠㅠㅠㅠㅠ
    티스토리 업로드 부분에서 문제가 생긴것 같은데 은빛냇물님은
    mp4 파일 어떻게 올리신건가요?ㅠㅠㅠㅠ

  6. BlogIcon SU_ 2010.04.10 16:09 신고 댓글 주소 고치기/지우기 댓글 쓰기

    연속재생은 어떻게 하나요ㅠㅠ? 가르쳐주세요ㅠㅠ;

  7. BlogIcon 은빛냇물 2010.05.01 01:33 신고 댓글 주소 고치기/지우기 댓글 쓰기

    죄송하지만 저는 JW Player를 쓰지 않으므로 더 이상 JW Player에 관한 질문은 받지 않습니다.

  8. BlogIcon erynmore 2010.08.14 20:47 신고 댓글 주소 고치기/지우기 댓글 쓰기

    아, 어려워서 봐도 봐도 모르겠어요 ㅠㅠ 우아...악