블로그 배경음악 만들기 (티스토리)

 

블로그 배경음악 만들기 (티스토리)

우선 전체적인 것을 간단히 설명드리면

YouTube의 영상 파일을 Jwplayer를 이용하여 배경음악으로 사용하는 것입니다. Mp3파일이 없고 Mp3파일이 있다하더라도 저작권의심으로 올릴수가 없다면 이방법이 매우 유용하다 생각됩니다. 

Jw player 란 : 웹 Flv플레이어 입니다. 오픈소스제공으로 파워유저는 수정까지 하여 사용가능 합니다.

(제가 파워유저가 아니라서... 간단히 설치 및 사용법만 알려드리겠습니다. 수정법은 노노!! )

재생가능 포맷 : FLV, H.264, MP4, MP3, AAC, JPG, PNG, GIF

<요넘이 Jw player입니다. 재생해보세요 ^^ >

<스킨을 사용한 Jw player #1>

 <스킨을 사용한 Jw player #2>

 <스킨을 사용한 Jw player #3>

Jw player 티스토리에 설치하기

1. 설치 파일을 준비합니다.

Jw player 홈페이지 (http://www.longtailvideo.com)에서 직접 다운 받으시거나 밑의 첨부파일을 받습니다.

mediaplayer.zip

2. 다음 3개의 파일을 스킨 업로드에 올립니다.

player.swf

swfobject.js

yt.swf

주의! > player.swf 파일은 반듯이 스킨업로드에 올리셔야합니다.

글쓰기 첨부파일에 업하시고 링크를 따시면 flash10과 충돌이 일어날수 있습니다. 

설치 끝~!!!!!!!!!  간단하죠^^

Jw player 사용하기 (You Tube 링크하기)

1. 플레이어 파일 주소 준비하기

 player.swf 

 swfobject.js

http://cfs.tistory.com/custom/blog/12/345678/skin/images/player.swf 

http://cfs.tistory.com/custom/blog/12/345678/skin/images/

swfobject.js

두 파일의 주소를 준비해 놓습니다. (메모장 같은 곳에 복사해 두시면 편하시겠죠 ^^)

파일의 링크 따는 법을 모르신다면 < Jw Player - 티스토리 파일 링크 따기 > 페이지를 참조하세요.

2. 태그 생성하기

가장 쉬운 방법은 Jwplayer 홈페이지에서 지원하는 자동 태그 생성기를 이용하시는것 입니다.

embed코드와 swobject코드 둘다 지원하므로 아주 편하게 사용하실 수 있습니다.

자동 태그 생성 도우미 : http://www.longtailvideo.com/support/jw-player-setup-wizard#preview

- select an Example Setup : 플레이어의 형식을 지정하는 메뉴입니다. 싱글비디오로 설정합니다.

- source : 준비 하셨던 player의 주소를 적으시면 됩니다.

- height : 플레이어의 세로 크기 입니다. 

- width : 플레이어의 가로 크기 입니다.

영상에 맞게 사이즈를 지정해주시면 됩니다. 배경음악용으로는 값이 다르니 밑에서 설명드리겠습니다.

일단 여기까지 하시고 하단의 "Update Preview & Code 버튼"을 클릭 후

프리뷰를 확인합니다. 만약 재생이 된다면 지금까지 설치를 잘하신것 입니다.

file : 재생되어질 파일 주소입니다. 우리는 유투브의 주소를 넣겠습니다.

유투브의 주소를 넣으셔도 되고, 포스팅중 직접 파일을 올리신 주소를 넣으셔도 됩니다.

(위와 마찬가지로 첨부파일의 주소를 모르신다면 < Jw Player - 티스토리 파일 링크 따기 > 페이지를 참조하세요)

3. 유투브에서 영상 고르기

임의적으로 유투브에 제가 올려놓은 파일을 사용해보겠습니다.

http://www.youtube.com/watch?v=Ip8sxEe1anM

오른쪽 하단에 URL 의 주소를 복사하여 태그생성기의 file란에 붙여넣습니다.

다시한번 프리뷰를 확인합니다. 재생이 된다면 OK!!!!

<swfobject code>

주소를 복사하여 블로그의 포스팅의 Html모드에 붙여넣습니다.

(일부러 swf플레이어의 주소는 적지 않았습니다.)

<embed code>

둘 중 어느 태그를 사용하셔도 상관은 없습니다. 그런데 이상하게도 티스토리에서 embed코드를 사용할때 줄바꿈을 하면 재생이 안되더라구요 ^^ 전 그냥 수정하기 편한 swfobject 코드를 사용합니다.

여기까지 하시면 블로그에 영상 재생은 가능하실듯 합니다.
(만약 재생이 안되신다면 <script type="text/javascript" src="swfobject.js">

swfobject.js의 절대 주소를 넣어보세요.

<script type="text/javascript" src="http://cfs.tistory.com/custom/blog/12/345678/skin/images/swfobject.js">

4. 완 성

<예제 태그 - 이런식으로 되겠죠>

<center>
<script type="text/javascript" src="http://cfs.tistory.com/custom/blog/12/345678/skin/images/swfobject.js"></script>

<div id="mediaspace64-1">
This text will be replaced</div>

<script type="text/javascript">
  var so = new SWFObject('http://cfs.tistory.com/custom/blog/12/345678/skin/images/player.swf'
,'mpl','500','300','9');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('wmode','opaque');
  so.addVariable('file','http://www.youtube.com/watch?v=Ip8sxEe1anM');
  so.write('mediaspace64-1');
  so.addVariable('stretching','fill');
</script>
</center>

< 미리보기 - 확인해보세요 >

Jwplayer를 이용하여 배경음악 만들기

1. 높이 지정하기

자동 태그 생성기의 옵션입니다.

single song으로 지정하셔도 되고 그냥 하셔도 됩니다.
그 이유는 위에서 본 single video랑 다른점은 hight값만 달라지기 때문입니다.
원리는 플레이어의 높이를 조정함으로써 영상부분을 보여주지 않는 것입니다. 잔머리죠 ㅡㅡ;;
(다른 스킨을 사용하신분들은 single video를 추천합니다.스킨마다 플레이어의 높이가 다르기 때문에...)
기본적으로 주어지는 디폴트 플레이어의 높이는 20px입니다.(스샷에는 24로 표기되는데 실제로 사용해보니 20px이더군요.)


2. 유투브에서 음악 및 영상 선택하기

- 유투브에서 영상을 고르실때는 일단 태그생성기에 주소를 넣어보시고 링크를 따시기 바랍니다.
  JW player가 flv, mp4파일만 재생되어 혹시나 안될수도 있기때문입니다.
  하지만 걱정은 마세요. 거의 대부분이 flv파일입니다. ^^

- 영상은 최대한 꾸리꾸리 한것을 선택합니다.
 유투브의 HD급 영상들을 보시면 알겠지만 화질이 좋아 질수록 버퍼링이 무쟈게 심해집니다.
 그리고 우리가 원하는것은 배경음악이지 영상은 아니잖아요 ^^

- 자동재생
 배경음악이니 당연히 자동으로 재생되는것이 더 나을 듯 합니다.

Behaviour의 나머지 옵션도 프리뷰를 보시면서 확인해보세요. 반복재생, 볼륨등 적용할 수 있습니다.


3. 완성

<예제 태그 - 이런식으로 되겠죠>

<script type="text/javascript" src="http://cfs.tistory.com/custom/blog/12/345678/skin/images/swfobject.js"></script>

<div id="mediaspace64-2">
This text will be replaced</div>
<script type="text/javascript">
  var so = new SWFObject('http://cfs.tistory.com/custom/blog/12/345678/skin/images/player.swf'
,'mpl','300','20','9');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('wmode','opaque');
  so.addVariable('file','http://www.youtube.com/watch?v=Ip8sxEe1anM'); 
  so.write('mediaspace64-2');
</script>

미리듣기 - 확인해보세요(포스팅 목적이니 자동시작 옵션은 적용안했습니다.)

Bonus 1 - Jw player Skin

1. Jw player 홈페이지 스킨모음 : http://www.longtailvideo.com/addons/skins

2. 아쿠아 스킨 모음 : http://www.flashskins.co.uk/jw_player_skins.html

        (유료라고 하지만 페이지를 여신후 IE인터넷 임시파일 폴더에 가면 있습니다. ;;;)

3. 적 용 - 티스토리 스킨 업로드에 올리시고 스샷처럼 주소를 붙여넣으시면 됩니다.
플레이어의 크기에따라 가로, 세로도 조절하세요. 

마지막으로 코덱 문제로 ToyStory3 어제 안보이시는 분들 많았죠?

JW player로 재생해보겠습니다. 전체화면으로 보세요.

(높은 비트레이로 컴사양이 딸리시는 분들은 버벅거릴수 있습니다.)

글이 무쟈게 길어 졌네요. 
최대한 쉽고 필요한것은 언급 드렸다고 생각은 되는데... 너무 길다보니 읽으실때 무료함도..

배경음악으로 사용하시는 분들은 한번 적용시켜 놓으시면 유투브 주소만 바꾸시면되니 화이팅~