티스토리 뷰

티스토리 베타테스트의 8번째 미션은 나만의 노하우를 이야기하는 것인데.. 사실 나만의 노하우라고 할만한 것이 없어서 이래저래 생각하다. 나름데로 내가 자주 쓰는 방법을 소개하려고 생각하다 보니 역시 음악과 영상을 블로그에 게시하는 방법을 소개하는 것이 좋을 것 같다고 생각해서 글을 써 본다.

티스토리에서 기본적으로 제공하는 영상과 뮤직플래이어는 그자체로도 훌륭하지만 뭔가 색다른 것을 원하고 나만의 블로그를 특별한 모습으로 꾸미고 싶은 사람들은 음악과 영상을 올릴때 다른 여러가지 툴을 이용하게 된다.

플래시 뮤직플래이어의 모습

플래시 미디어 플래이어의 모습

1. 뮤직 플래이어 꾸미기

일단 먼저 뮤직 플래이어사용에 관한 설명부터 하려고 한다. 이 뮤직플래이어는 원래 워드프레스의 플러그인으로 mp3파일 한곡만을 플래이 해주도록 만들어져 있다. 그래서 여러곡을 동시에 담을 수 있는 플래이어를 찾는이에게는 어울리지 않을 것이다.

플래이어는 이곳에서 구할 수도 있고 아래 첨부된 파일을 다운로드 받을 수도 있다.

invalid-file

이렇게 받은 파일 가운데 player.swf라는 파일이 있는데 이 것을 개인의 계정이나 티스토리 포스팅시 업로드하여 주소를 알아두도록 한다. 그리고 티스토리에 음악을 업로한뒤 파일의 주소도 같이 알아 두도록 한다.


이렇게 파일들의 주소를 알아둔뒤 아래 글상자 내용의 mp3 플래이어 주소와 mp3 음악파일 주소부분에 자신의 것을 대체해 넣도록 한다.

<object type="application/x-shockwave-flash" data="mp3 플래이어 주소" id="audioplayer1" height="24" width="290"><param name="movie" value="mp3 플래이어 주소">
<param name="FlashVars" value="playerID=1&amp;
bg=0xf8f8f8&amp;
leftbg=0xeeeeee&amp;
lefticon=0x666666&amp;
rightbg=0xcccccc&amp;
rightbghover=0x999999&amp;
righticon=0x666666&amp;
righticonhover=0xffffff&amp;
text=0x666666&amp;
slider=0x666666&amp;
track=0xFFFFFF&amp;
border=0x666666&amp;
loader=0x9FFFB8&amp;
loop=no&amp;
autostart=no&amp;
soundFile=mp3파일 주소">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>

출처 : http://www.macloo.com/examples/audio_player/options.html

위의 내용을 자신에게 맞게 수정한 뒤 글쓰기에서 멀티미디어를 선택해 object 태그 내용을 복사해 넣어주면 된다. 소스의 내용이 복잡하기 때문에 음악관련 포스팅을 할때는 서식[각주:1]기능을 이용하여 저장해놓고 글을 슬때마다 불러오기를 하면 편하게 사용할 수 있다.

글상자의 소스를 보면 여러가지 색상을 사용자가 꾸밀 수 있도록 되어 있는 것을 알 수 있다. 갖가지 색상의 부위는 위 그림을 참고하면 쉽게 찾을 수 있을 것이다.

2. 미디어 플래이어 꾸미기

이번에는 동영상을 올릴때 사용하는 미디어 플래이어를 사용하는 법을 이야기하겠다.

먼저 동영상을 사용하기에 앞서 염두해두어야 할 점은 티스토리의 업로드 용량이 10메가로 제한되어 있다는 사실이다. 이는 티스토리에서 최대한 배려한 용량이기에 더이상의 것을 바랄 수는 없을 것이다. 10메가 제한을 피하기 위해서 다른 여타 사이트를 이용해 flv파일 주소를 가져올 수도 있는데, 잘 찾아보면 괜찮은 사이트를 만날 수 있을 것이다. 간단한 영상은 10메가 안쪽으로 프레임수를 줄이고, 이미지 크기를 줄여 flv확장자를 가진 영상으로 만들수도 있다. 일반 영상을 flv파일 형식[각주:2]으로 변환하는 것은 각자의 몫에 맡기도록 한다.

여기서 사용하는 미디어 플래이어는 jw media player라는 이름을 가지고 있다. 공식적으로 사이트도 운영하고 있으며 여기를 클릭하면 접속할 수 있다.

현재는 플래이어가 4.0으로 업데이트 되면서 조금 다른 형태의 서비스를 제공하고 있다. 그래서 이전 버젼의 플래이어를 업로드하였다.

invalid-file

역시 다운받은 플래이어 파일을 원하는 곳에 올려두고 주소를 알아낸다. 그리고 올리고자하는 영상의 프리뷰 과 영상의 주소를 함께 알아두도록 한다.

각 파일의 주소는 아래 글상자의 소스에 각각 대체해 넣도록 한다.

<EMBED type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" width="400" height="225" name="theMediaPlayer" src=미디어플래이어 주소  allowfullscreen="true" allowscriptaccess="always" type=application/octet-stream flashvars="file=flv파일 주소&width=400&height=225&displaywidth=400&displayheight=225&autostart=false&image=영상의 프리뷰 이미지 주소&backcolor=0xFFFFFF&repeat=false"></EMBED>

출처 : http://www.jeroenwijering.com/?item=Embedding_Flash

위 소스에서 주황색으로 표시된 부분은 파일에 알맞는 사이즈로 변경하도록 한다.

3. 마치면서

나만의 노하우를 소개하는 미션인데 제대로된 미션을 수행한건지 사실 잘 모르겠다.. 하지만 티스토리를 쓰는 이유 중 가장 크게작용했던 부분이 바로 이 플래이어들을 활용하는 부분이었기 때문에 나만의 노하우라는 이름으로 소개해보았다. 정리를하면서 잊고있었던 부분도 다시 볼 수 있는 좋은 기회가 되었다. 블로그를 좀더 멋찌게 나름대로 꾸며 사용하고 싶은 분들에게 도움이 되었으면좋겠다. :)


  1. 티스토리의 새로운 에디터는 글쓰기 종류에서 공지, 키워드 이외에 서식이라는 새로운 형태의 글쓰기를 제공하는데 특정 형식의 글을 저장해두어 글을 쓸때 불러올 수 있도록 해주는 편리한 기능이다. [본문으로]
  2. 기본적으로 미디어플래이어는 flv형식의 파일만을 지원하기때문에 avi나 mpg와 같은 형식의 파일을 특정 프로그램을 이용하여 변환시켜주어야한다. 이때 프래임수를 줄이거나 이미지 크기를 줄여 파일용량을 조절할 수 있다. [본문으로]
댓글
  • 프로필사진 Favicon of http://eojss.wo.tc eojss JW media player, WordPress Audio Player 둘다 사용하는데
    정말 간편하고 깔끔해서 좋아요...ㅋㅋ
    2008.07.30 22:36 신고
  • 프로필사진 Favicon of http://www.waterflow.co.kr WaterFlow WaterFlow 그렇죠 저도 저 두 플래이어의 깔금한 모습에 반해서 여태껏 사용중이네요 :) 2008.07.30 22:57 신고
  • 프로필사진 Favicon of http://tndusdl.tistory.com tndusdl 감사합니다..
    도움이 많이 됬어요..ㅎㅎ
    2008.09.26 02:05 신고
  • 프로필사진 Favicon of http://www.waterflow.co.kr WaterFlow WaterFlow 도움이 됐다니 저도 기분이 좋네요 :) 2008.09.26 17:51 신고
  • 프로필사진 Favicon of http://sgoi.tistory.com parrr 인터넷 찾다보니 간단계정에 플레이어 주소자리에 동영상 주소도 똑같이 넣어버리니 동작은 되는데 정상적으로 스킨도 여러가지 작동 시키고 싶어 플레이어 주소를 알고싶어 글 남깁니다.

    항상 플레이어 주소에서 걸리네요 아무리해도 안되길래 메시지 남깁니다. 좀 도와주시길...
    2009.01.07 16:49 신고
  • 프로필사진 Favicon of http://sgoi.tistory.com parrr 하나만 더 여쭤볼게요. 위 음악 플레이어도 압축푸니 플래쉬화일 이름이 비디오때랑 같은데 이름을 변경해 티스토리에 스킨 업로드 해야하나요?

    폴더안에 업그레이드 폴더도 있고 audio-player.php화일도 있네요.::

    바쁘신데 문의 많이드려 죄송합니다. ㅎ
    2009.01.07 16:55 신고
  • 프로필사진 Favicon of http://www.waterflow.co.kr WaterFlow WaterFlow 글쎄요.. 스킨 같은거는 어떻게 적용하는지 모르겠네요.. 저는 그냥 기본으로만 쓰고 있어서.. 위에 적힌 내용외에는 아는게 없어요.. 도움드리지 못해 안타깝네요.. :) 2009.01.08 21:08 신고
댓글쓰기 폼