관리 메뉴

하츠의 꿈

홈페이지에 동영상을 FLV로 변환해서 올리는 방법 본문

블로그&홈페이지 팁

홈페이지에 동영상을 FLV로 변환해서 올리는 방법

명섭이 2009.09.25 11:51

동영상을 홈페이지에 올리는 경우, 동영상 코덱의 문제로 어려움을 겪을 경우가 있다.
작업자인 내 컴퓨터에서는 잘 나오는 데, 개똥이나 길동이의 컴퓨터에서는 보이지를 않는단다.

이것은 대부분의 동영상은 윈도우에 내장된 미디어플레이어 기반의 코덱에 의존하기 때문이다. 이 문제를 해결하기 위하여 웹에서는 플래시(FLV) 동영상 포멧을 많이 사용한다. 네이버비디오나 다음TV팟 등의 동영상이 모두 FLV 포멧의 플래시 동영상이다. 하지만, 일반적인 디지털캠코더나 동영상캡쳐 프로그램에서 생성되는 동영상은 MPG, WMV, AVI 등 일반적인 포맷만을 지원한다. 그러므로, 생성된 동영상은 다시 FLV 포멧으로 변환을 해야 홈페이지에 올릴 수 있게 된다.


그럼 순서대로 홈페이지에 플래시(FLV)동영상 올리는 방법을 이야기해 본다.

첫번째, 동영상을 편집한다.

 편집이 필요없으면 이 과정은 스킵하시길~!

동영상 편집이라 하여 어려운 것이 아니다. 윈도우XP 이상의 버전이 설치되어 있는 컴퓨터에는 대부분 "윈도우 무비 메이커" 라는 프로그램이 설치되어 있다. 만약 없다면 검색사이트에서 '윈도우 무비 메이커'로 검색하면 다운로드할 수 있는 곳이 많다.
또한, 공짜~

아래의 2Click.kr 브로그에 자세한 설명이 있으니 참고하시길~!

편집한 프로그램은 MPG, AVI, WMV 중 하나의 포맷으로 저장하는 것이 좋다. 그래야 아래에 소개하는 프로그램으로 변환이 가능하니까^^

두번째, 동영상을 FLV 포멧으로 변환한다.

 여러가지 변환 프로그램이 있지만, 나는 무료인 A Software Plus의 프로그램을 사용했다.
아래에서 변환 프로그램을 다운로드한다.

 A Software Plus의 홈페이지를 방문하고 놀라지 않을 수 없었다. 아무리 공개된 모듈을 이용하였고는 하나 이렇게 다양한 포멧의 프로그램을 모두 무료로 배포하다니!. (내 모습이 부끄럽다.)

변환 프로그램의 사용법은 간단하다.

 [+] 버튼을 클릭하여 변환할 동영상을 선택한다.

동영상은 한번에 하나씩 추가할 수 있으며, 여러개를 한번에 변환할 수 있다. 

 위 그림의 설명과 같이...

- 변환할 동영상이 저장될 폴더를 선택하고,
- 변환되어 저장할 동영상의 화질을 선택하고,
- [Convert] 버튼을 클릭하면 변환이 시작된다.

아시는 분은 아시겠지만 동영상의 변환은 생각보다 시간이 많이 소요된다. 컴퓨터의 성능과 화질에 따라서 다르겠지만, 10분짜라 변환하는 데에 5분 이상은 소요된다.

세번째, 홈페이지에 플래시 플레이어를 장착한다.

사실 이 과정은 조금 전문적이어서 어렵게 생각하실 수가 있다. 그래도 설명해 본다.

내가 사용한 플래시 플레이어는 Fowplayer 를 이용했다. Flowplayer는 유료 버전과 무료버전이 존재하며, 무료버전도 별다른 제약없이 이용할 수 있다.

 다운로드한 파일을 서버에 업로드하여 압축을 풀면 플래시 플레이어와 스크립트, 그리고 예제 파일이 있다.

예제 파일의 경로 : 압축을 푼 디렉터리/flowplayer/example/index.html

예제 파일의 28번 줄의 FLV 파일 경로 만 바꿔
주면 바로 플래시 동영상이 웹에서 보여지게 된다.

아래는 Flowplayer를 이용해서 만든 지인의 홈페이지이다.


이것으로 끄~읕!

22 Comments
  • 프로필사진 BlogIcon 파아란기쁨 2009.09.26 09:44 신고 오... 좋은 정보네요.^^
    나중에 아이들 동영상 정리할때 이걸 이용해 봐야겠네요.^^
  • 프로필사진 BlogIcon 명섭이 2009.09.29 13:08 신고 파아란기쁨님. 방문 감사합니다.
    좋은 하루되세요^^
  • 프로필사진 zinno 2009.10.29 03:31 신고 너무 좋은 정보 감사합니다.^^;
    님덕분에 새로운걸 배웠네요.
    감사하고 좋은 하루 되세요.^^
  • 프로필사진 BlogIcon 명섭이 2009.11.30 09:19 신고 별 말씀을요..
    도움이 되시면 저도 기쁘죠^^
    zinno님, 행복한 한주되세요~
  • 프로필사진 zinno 2009.10.29 03:53 신고 넘 좋은 정보라서 저의 네이버 블로그로 펌했습니다.
    출처는 정확히 적어놨구요.^^;;;
    먼 나라에 있다보니 하나하나의 정보가 소중하게
    느껴진답니다.
    그럼.^^
  • 프로필사진 BlogIcon 명섭이 2009.10.29 10:05 신고 댓글을 두개 남겨주셨네요^^
    방문해주셔서 감사하고요.
    블로그가 어딘지 알면 놀러갈텐제.. 주소가 없네요^^;;
  • 프로필사진 김민희 2009.11.29 22:07 신고 Flowplayer 다운로드를 눌른 다음에 어떻게 해야 하는지 잘 모르겠어요..ㅠㅠ
    다운로드를 하면 몇개의 열수 없는 파일들과, 메모장뿐인데..
    자세히좀 알수 있을까요..?ㅠㅠ
  • 프로필사진 BlogIcon 명섭이 2009.11.30 09:18 신고 기본적인 HTML을 아셔야 합니다.
    Flowplayer는 웹서버에 FTP로 올려놓고 이용하셔야 하는데...
    어려우시면 도와드릴테니 다시 연락을 주세요^^
    이메일 : itry@파란
  • 프로필사진 Kimmira 2010.08.07 09:06 신고 살았어요! 살았어! 님의 글 때문에 드뎌 동영상을 올리게 되었습니다. jw player로 애먹다가(explorer에서 안됨) flowplayer로 하니 간단히 되는군요! 귀한 정보 넘넘 감사합니다. 복받으세요!! 꾸벅
  • 프로필사진 BlogIcon 명섭이 2010.08.10 13:07 신고 감사합니다^^
    김미라님도 좋은 하루되세요
  • 프로필사진 김보석 2010.09.11 01:59 신고 죄송합니다..잘안되서요 알집을 서버에다 업로드시켜서풀었는데 서버에폴더가 나오지 않아서 바탕화면에다 폴드를 생성후 ftp메인에 오렸습니다. 인덱스 페이지에서 플래시주소바꿔넣었는데 동영상은안뜨고 다운로드만떠여 어케해야죠
  • 프로필사진 BlogIcon 명섭이 2010.09.11 08:24 신고 알집을 서버에 업로드/해제했다고요???
    압축을 풀어서 서버에 올려야 하는데...
    작업이 잘못된 것으로 보입니다.
    꼭 필요하시다면 전화주세요~
  • 프로필사진 김보석 2010.09.17 05:58 신고 답변감사드립니다. 알집을 풀어 올렸습니다. 그리고 example폴더에들어가 index html소스만 바꿔서 올리면 되는건가요? ftp서버에는 플래시 동영상을 올려놓은 상태입니다.여기가 외국이라 전화드리지 못하는 죄송합니다. 친절한답변 부탁드려요 참고로 www.fitcorea.com 이며 왼쪽 시계를 빼고 가로세로 166사이즈로 넣을 예정입니다.필요시 소스를 한번보셔서 어떻게 넣어야하나 알려주시면 감사드리겠습니다. 이메일입니다 kbs0485@korea.com 참고로 플래시 동영상이 올라간주소입니다. ftp://kbs0485@ftp.fitcorea.com/video/tutorvideo.flv정말감사드립니다.
  • 프로필사진 BlogIcon 명섭이 2010.09.18 14:32 신고 example폴더에들어가 index html소스를 참고하시면 되고요.

    해당 페이지의 상단에 아래와 같이 자바스크립트 파일 불러오는 내용을 넣습닏.
    <script type="text/javascript" src="스크립트파일_경로/flowplayer/example/flowplayer-3.2.4.min.js"></script>

    그리고, 해당 동영상이 표시될 부분에 아래의 내용을 넣습니다. 아래의 내용 중 한글 부분은 해당사항에 맞게 수정하세요.
    <a href="플래시동영상파일.flv"
    style="display:block;width:가로크기px;height:세로크기px"
    id="player">
    </a>
    <!-- this will install flowplayer inside previous A- tag. -->
    <script>
    flowplayer("player", "플래시플레이어_파일경로/flowplayer-3.2.4.swf");
    </script>

    도움이 되실 지 모르겠습니다^^
  • 프로필사진 헤라 2010.09.17 11:51 신고 플레이어 다운받아 html수정후 올렸는데요
    까만화면만 보이고 동작이 안되네요..
    컨트롤박스도 안보이고요 어케해야하는지 좀 도와주세요ㅠㅠ
  • 프로필사진 김보석 2010.09.17 21:15 신고 저랑똑같은 증상이시네요
  • 프로필사진 BlogIcon 명섭이 2010.09.18 14:33 신고 플레이어 경로, 스크립트경로, 플래시동영상 파일의 경로를 확인하셔야 해요.
    바로 위에 답변달아 놓은 것을 참고하세요.
  • 프로필사진 김보석 2010.09.18 17:28 신고 정말정말 죄송한데요 플래시 동영상 파일주소 넣는곳은 알겠는데 플래시플레어어 파일경로랑 스크랩트파일경로는 어떻게 넣는거죠? 바보같은 질문이겠지만 이해부탁드리고 친절하신 답변부탁드립니다.
  • 프로필사진 BlogIcon 명섭이 2010.09.18 20:15 신고 플레이어는 압축_푼_폴더/flowplayer/flowplayer-3.2.4.swf
    스크립트는 압축_푼_폴더/flowplayer/example/flowplayer-3.2.4.min.js
    이렇게 됩니다.
  • 프로필사진 김재열 2015.01.01 15:25 신고 flowplayer를 서버에 올린다는 것이 어떤 의미의 작업인가요? 초보라...
  • 프로필사진 BlogIcon 명섭이 2015.01.10 15:00 신고 해당 플레이어도 파일이기 때문에 온라인 상 어딘가에 저장을 해야 해요.
    그런데 내 pc에 저장하면 다른 사람들이 이 파일을 이용할 수 없잖아요?
    그래서 인터넷에 항상 물려있는 PC 에 파일을 올리는 데 그것을 서버라고 합니다.
  • 프로필사진 김보영 2017.03.31 14:48 신고 세 번째 홈페이지에 플래시 플레이어를 장착하는 부분에서 막힙니다.
    동영상 파일경로, 플래시 플레이어 파일경로, 스크랩트 파일경로 넣었는데 동영상이 안되네요..
    example 폴더가 없는데요...
    index.html 에서 바꾸었는데 어디가 틀렸는지 동영상이 안나오네요..
    예제파일의 경로 가 무슨 뜻인지 모르겠습니다.
    예제파일 28번 줄은 어디를 고치라는 뜻인지도 모르겠어요...
댓글쓰기 폼