티스토리에서 기본적으로 제공하는 영상과 뮤직플래이어는 그자체로도 훌륭하지만 뭔가 색다른 것을 원하고 나만의 블로그를 특별한 모습으로 꾸미고 싶은 사람들은 음악과 영상을 올릴때 다른 여러가지 툴을 이용하게 된다.
플래시 뮤직플래이어의 모습
플래시 미디어 플래이어의 모습
일단 먼저 뮤직 플래이어사용에 관한 설명부터 하려고 한다. 이 뮤직플래이어는 원래 워드프레스의 플러그인으로 mp3파일 한곡만을 플래이 해주도록 만들어져 있다. 그래서 여러곡을 동시에 담을 수 있는 플래이어를 찾는이에게는 어울리지 않을 것이다.
플래이어는 이곳에서 구할 수도 있고 아래 첨부된 파일을 다운로드 받을 수도 있다.
audio-player.zip
이렇게 파일들의 주소를 알아둔뒤 아래 글상자 내용의 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&
bg=0xf8f8f8&
leftbg=0xeeeeee&
lefticon=0x666666&
rightbg=0xcccccc&
rightbghover=0x999999&
righticon=0x666666&
righticonhover=0xffffff&
text=0x666666&
slider=0x666666&
track=0xFFFFFF&
border=0x666666&
loader=0x9FFFB8&
loop=no&
autostart=no&
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으로 업데이트 되면서 조금 다른 형태의 서비스를 제공하고 있다. 그래서 이전 버젼의 플래이어를 업로드하였다.
각 파일의 주소는 아래 글상자의 소스에 각각 대체해 넣도록 한다.
<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. 마치면서
나만의 노하우를 소개하는 미션인데 제대로된 미션을 수행한건지 사실 잘 모르겠다.. 하지만 티스토리를 쓰는 이유 중 가장 크게작용했던 부분이 바로 이 플래이어들을 활용하는 부분이었기 때문에 나만의 노하우라는 이름으로 소개해보았다. 정리를하면서 잊고있었던 부분도 다시 볼 수 있는 좋은 기회가 되었다. 블로그를 좀더 멋찌게 나름대로 꾸며 사용하고 싶은 분들에게 도움이 되었으면좋겠다. :)