본문 바로가기

블로그/꾸미기

티스토리에서 JW Player 영상 올리기

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','http://www.youtube.com/watch?v');
  so.addVariable('title','[하츠네 미쿠] 하츠네 미쿠의 소실');
  so.addVariable('repeat','always');
  so.write('mediaspace');
</script>

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

'멀티미디어'로 넣을 수 없을 때는 HTML 편집 모드에서 넣으면 됩니다.