티스토리에 대용량 동영상 올리기 (예제:디워 동영상)

유용한 정보 2007/07/12 01:04
TAG , , , , , , , , , , , ,
이번에 다음에서 100% 인수한 티스토리 블로그에 고화실 대용량 동영상을 올리는 과정을 소개합니다. 티스토리 글쓰기 웹에디터에는 동영상을 올리는 기능이 별도로 있지만 용량제한이 있고 원본 동영상을 적당히 변환하기 때문에 원본 화질로 감상할 수 없는 단점이 있습니다. 아래의 동영상은 동영상 자르기 유틸리티로 최대 크기 10M 이하의 파일로 자르고 ASX 파일을 만들어 웹페이지에 윈도우즈 미디어 플레이어(Windows Media Player)로 출력하고 있습니다. (참고:동영상 코덱이 맞지 않으면 동영상이 보이지 않을 수 있습니다.)
그러면 대용량 동영상을 어떻게 올리는 것인지 소개해보겠습니다. 네이버, 다음, 네이트 같은 포털도 아래 소개하는 방법을 이용하면 될겁니다.


우선 심형래 감독의 디워 사이트에서 38M 정도되는 디워 트레일러 동영상 D_war_trailer_720P.wmv 파일을 받습니다. 티스토리는 업로드 사이즈가 최대 10M 로 제한이 되어 있으므로 동영상 자르기 프로그램으로 7~8 메가 정도 되는 사이즈의 파일 5개로 분리합니다. 저는 "AVI/MPEG/RM/WMV Splitter" 라 불리는 유틸리티로 동영상을 잘랐습니다.
분리한 파일들은 5개의 동영상(D_war_trailer_720P_1.wmv, D_war_trailer_720P_2.wmv, D_war_trailer_720P_3.wmv, D_war_trailer_720P_4.wmv, D_war_trailer_720P_5.wmv)으로 분리되었으며 티스토리 글쓰기 웹에디터에서 파일 올리기로 5개의 동영상을 한꺼번에 올립니다. 올리고 나니 다음과 같은 동영상 URL 링크를 확보할 수 있었습니다.

http://factor.kr/attachment/cm213.wmv
http://factor.kr/attachment/cm214.wmv
http://factor.kr/attachment/dm211.wmv
http://factor.kr/attachment/dm212.wmv
http://factor.kr/attachment/cm212.wmv

위의 분리된 동영상들의 URL 링크를 이용해서 문서 편집기로 아래와 같은 내용의 "d_war.asx" 라는 문서 파일을 만들어서 티스토리 웹에디터 파일올리기로 올립니다.

<asx>
<entry><ref href="http://factor.kr/attachment/cm213.wmv"/></entry>
<entry><ref href="http://factor.kr/attachment/cm214.wmv"/></entry>
<entry><ref href="http://factor.kr/attachment/dm211.wmv"/></entry>
<entry><ref href="http://factor.kr/attachment/dm212.wmv"/></entry>
<entry><ref href="http://factor.kr/attachment/cm212.wmv"/></entry>
</asx>

올리고 나면 http://factor.kr/attachment/dm213.asx 와 같은 동영상 URL 링크를 얻을 수 있습니다. 링크를 이용하여 아래와 같은 동영상을 출력해주는 HTML 태그를 만들어봅니다.

<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="500" height="300"><param name="Filename" value="http://factor.kr/attachment/dm213.asx"/><param name="AutoStart" value="true"/></object>

위의 HTML 태그를 편집기에 HTML 편집 모드를 이용해서 글 내용에 포함시키면 디워 동영상을 출력해주는 포스팅을 할 수 있습니다. 위의 태그에서 빨강색 부분을 디워 동영상의 원본 사이즈로 바꿔서 사용할 수 있지만 일반적인 블로그 포스트 사이즈에 맞지 않으므로 폭(width)을 500 에서 600 정도로 사용하는 것이 좋으며 필요하면 풀스크린 모드를 사용해 전체화면으로 감상할 수 있겠습니다. 풀스크린 모드는 마우스를 동영상에 올리고 오른쪽 버튼을 클릭해서 "축소/확대" 메뉴를 선택하고 "전체화면"을 클릭하면 됩니다.

[참고사항]
티스토리 글쓰기 웹에디터에 파일을 올리고 올린 파일의 URL 주소를 알아 내려면 "파일 업로드 관리"에서 파일을 올리고 난 후에 올린 파일을 선택하고 파일 목록 상단에 있는 버튼을 클릭하면 웹에디터에 파일이 추가 됩니다. 그리고 나서 HTML 모드로 변경을 하면 올린 파일의 URL을 추출할 수 있습니다. 위의 예제를 선택하면 다음과 같은 태그를 확인할 수 있지요.

<DIV align=center><object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="320" height="240"><param name="Filename" value="http://factor.kr/attachment/cm213.wmv"/><param name="AutoStart" value="false"/><!--[if !IE]> <--><object type="video/x-ms-wmv" data="http://factor.kr/attachment/cm213.wmv" width="320" height="240"><param name="AutoStart" value="0"/><embed pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/" src="http://factor.kr/attachment/cm213.wmv" width="320" height="240" type="application/x-mplayer2" autostart="0"></embed></object><!--> <![endif]--></object></DIV>
<DIV align=center><object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="320" height="240"><param name="Filename" value="http://factor.kr/attachment/cm214.wmv"/><param name="AutoStart" value="false"/><!--[if !IE]> <--><object type="video/x-ms-wmv" data="http://factor.kr/attachment/cm214.wmv" width="320" height="240"><param name="AutoStart" value="0"/><embed pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/" src="http://factor.kr/attachment/cm214.wmv" width="320" height="240" type="application/x-mplayer2" autostart="0"></embed></object><!--> <![endif]--></object></DIV>
<DIV align=center><object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="320" height="240"><param name="Filename" value="http://factor.kr/attachment/dm211.wmv"/><param name="AutoStart" value="false"/><!--[if !IE]> <--><object type="video/x-ms-wmv" data="http://factor.kr/attachment/dm211.wmv" width="320" height="240"><param name="AutoStart" value="0"/><embed pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/" src="http://factor.kr/attachment/dm211.wmv" width="320" height="240" type="application/x-mplayer2" autostart="0"></embed></object><!--> <![endif]--></object></DIV>
<DIV align=center><object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="320" height="240"><param name="Filename" value="http://factor.kr/attachment/dm212.wmv"/><param name="AutoStart" value="false"/><!--[if !IE]> <--><object type="video/x-ms-wmv" data="http://factor.kr/attachment/dm212.wmv" width="320" height="240"><param name="AutoStart" value="0"/><embed pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/" src="http://factor.kr/attachment/dm212.wmv" width="320" height="240" type="application/x-mplayer2" autostart="0"></embed></object><!--> <![endif]--></object></DIV>
<DIV align=center><object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="320" height="240"><param name="Filename" value="http://factor.kr/attachment/cm212.wmv"/><param name="AutoStart" value="false"/><!--[if !IE]> <--><object type="video/x-ms-wmv" data="http://factor.kr/attachment/cm212.wmv" width="320" height="240"><param name="AutoStart" value="0"/><embed pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/" src="http://factor.kr/attachment/cm212.wmv" width="320" height="240" type="application/x-mplayer2" autostart="0"></embed></object><!--> <![endif]--></object></DIV>

위와 같은 태그를 보시고 5개의 동영상 URL을 찾을 수 있습니다. 그런데 잘라낸 동영상이 10개 또는 100개라면 난감할 수 있습니다. 그래서 저는 EDITPLUS 라는 프로그램에서 바꾸기 기능을 이용해서 분리된 동영상 URL 주소들을 찾아 ASX 파일로 손쉽게 바꿉니다. EDITPLUS 바꾸기 기능에서 정규식을 체크하고
^<DIV.+ data="http://factor.kr/attachment/(.+\.wmv).+(.+\.wmv).+</DIV>
를
<entry><ref href="http://factor.kr/attachment/\1"/></entry>
이것으로 바꾸면 위에 복잡해 보이는 태그를 간편하게 아래와 같이 바꿀 수 있습니다.

<entry><ref href="http://factor.kr/attachment/cm213.wmv"/></entry>
<entry><ref href="http://factor.kr/attachment/cm214.wmv"/></entry>
<entry><ref href="http://factor.kr/attachment/dm211.wmv"/></entry>
<entry><ref href="http://factor.kr/attachment/dm212.wmv"/></entry>
<entry><ref href="http://factor.kr/attachment/cm212.wmv"/></entry>

HTML 에 대해서 잘 모르시는 분들은 다소 어려울 수 있지만 차근 차근 공부해보시면 블로그에 보다 멋진 포스팅을 할 수 있습니다. 글로 설명하는 것은 표현하기도 이해하기도 쉽지 않은 것 같습니다. 조만간 위에 설명한 내용을 동영상 강의(?)로 만들어봐야겠습니다.^^

웹프로그래머의 홈페이지정보 블로그 http://hompy.info
이올린에 북마크하기(0) 이올린에 추천하기(0)
트랙백은 하나, 댓글 20개가 달렸습니다.

트랙백 주소 :: http://hompy.info/trackback/170

  1. Subject: 티스토리에 대용량 동영상을 올리고 싶다면...

    Tracked from e-learning blog : 이러닝 블로그 2007/07/12 09:55  삭제

    여기로 가보자. 정말 괜찮은 꼼수라 생각된다. [준비물] 1. 올릴 동영상 2. 동영상 자르기 유틸리티 3. 메모장 4. 약간의 웹페이지 소스를 볼 수 있는 눈 5. 귀찮음을 감수할 수 있는 인내심 6. 이올린 추천한방! 7. 그리고 고맙다는 댓글 한판!

댓글을 달아 주세요

  1. Xeph 2007/07/12 01:24  댓글주소  수정/삭제  댓글쓰기

    오 좋은 팁입니다 ^^

  2. nashimaryo 2007/07/12 02:07  댓글주소  수정/삭제  댓글쓰기

    굉장히 좋은 정보네요~^^ 원본의 화질을 그대로 감상한다니 매력적인 팁입니다.
    그런데 개인적인 의견이지만 다소 절차가 복잡하여 편의성이 조금 떨어지는 것 같네요.
    그래도 언제나 좋은 정보 감사드리며, 동영상 강의도 기대해보겠습니다^^

    • 웹프로그래머 2007/07/12 02:45  댓글주소  수정/삭제

      다소 귀찮아도 원본을 유지하고 싶을 때 쓰시면 어떨까 싶네요. 야후 이메일 용량 무제한 처럼 업로드 용량에 제한이 없었으면 좋겠지만 쉽지 않겠지요?

  3. 비밀방문자 2007/07/12 02:15  댓글주소  수정/삭제  댓글쓰기

    관리자만 볼 수 있는 댓글입니다.

    • 웹프로그래머 2007/07/12 02:42  댓글주소  수정/삭제

      예를 들면 500 메가 정도 되는 영화를 올리고 싶을 때 써보세요.

  4. 마래바 2007/07/12 07:50  댓글주소  수정/삭제  댓글쓰기

    좋은 팁 감사합니다. ^^
    큰 동영상 올려볼 때 유용하겠습니다.

  5. 양깡 2007/07/12 07:52  댓글주소  수정/삭제  댓글쓰기

    매우 좋은 기능이네요~ 어떤 원리인지 인해는 안되지만 신기합니다.

    너무 활성화 되서 티스토리에서 하루 업로드 용량 제한을 두지는 않겠죠~ ^^

  6. freeism 2007/07/12 08:55  댓글주소  수정/삭제  댓글쓰기

    크어~ 이런 멋진 꼼수(팁...)가!!!!
    전 불행히도 티스토리를 쓰고 있지는 않지만, 다른 많은 분들께 도움이 될 것 같습니다. ^^
    좋은 꼼수 감사합니다~

  7. bakion 2007/07/12 09:48  댓글주소  수정/삭제  댓글쓰기

    좋은 팁 감사합니다.
    참고로 엠군(http://mgoon.com)의 경우 고화질 동영상을 용량제한없이 올릴 수 있습니다. 위 과정이 어려우신 분들은 엠군을 이용하는 것도 한 방법입니다.

  8. 엉뚱이 2007/07/12 09:56  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다.
    잘 보고 갑니다.
    그리고...엠군이 좋아 지고 있군요...^^

  9. 활의노래 2007/07/12 11:46  댓글주소  수정/삭제  댓글쓰기

    오 정말 좋은 팁이네요 ^^;

  10. Zet 2007/07/12 12:59  댓글주소  수정/삭제  댓글쓰기

    천재시네요 부럽습니다 ^^

  11. ＬＥＮＡ 2007/07/12 14:14  댓글주소  수정/삭제  댓글쓰기

    오, 이런 방법이... FLV플레이어에도 이런기능 넣어야지...

  12. 캬캬 2007/07/13 13:25  댓글주소  수정/삭제  댓글쓰기

    굿 아이디어! mp3 를 이런 방식으로 해 본적은 있는데,
    스트림 동영상도 되는 군요...

  13. magicbass 2007/07/14 00:07  댓글주소  수정/삭제  댓글쓰기

    좋은 팁인데 악용되면 .... 티스토리 올릴수 있는 용량이 줄어들걸요...ㅋ

  14. 가가멜 2007/07/25 15:10  댓글주소  수정/삭제  댓글쓰기

    흠... 어렵당...ㅠ.ㅠ

  15. 우키러브 2007/07/30 11:30  댓글주소  수정/삭제  댓글쓰기

    차라리 이럴바에는 다른 UCC 사이트에 영상을 올리고 다시 그것을 끌어다 쓰는게 낫지 않을까요??? 으흠..

  16. Guest 2008/03/28 23:42  댓글주소  수정/삭제  댓글쓰기

    고음질 대용량 사운드는 위 방법처럼 분할해서 업로드 할 수 없나요?

  17. 와우 2010/02/25 17:07  댓글주소  수정/삭제  댓글쓰기

    멋지군요 좋은 정보 입니다.

◀ 이전페이지 1 ... 421 422 423 424 425 426 427 428 429 ... 588 다음페이지 ▶