JW Player 도우미 플러그인 공개

유튜브를 포함해서 블로그에 동영상을 올리기 위한 서비스가 많이 있습니다만... 동영상을 직접 올려보니 불편하더군요.
mpeg이나 avi를 포함시키면 자동으로 플레이어가 포함되는데, 이건 보기가 좋지 않더군요. (인터페이스가 넘 구려요~)

그래서 선택한 것이 JW Player + flv 파일 궁합입니다.
아래 소개하는 방법을 사용하면 아주 간단하게 동영상을 적용할 수 있습니다.

0. JW Player 소개

JW Player는 널리 사용되는 온라인 플레이어입니다. 다양한 형식의 지원, 깔끔한 인터페이스, 스킨 지원, xml을 통한 다중 소스의 지원 등등 수많은 장점이 있지만, 여기서는 인터페이스만 사용합니다.

전체버전은 LongTail Video 홈페이지에서 다운받을 수 있습니다.


1. 관련 파일 업로드

아래 압축파일을 다운받아 열면 FLVplayer.jsplayer.swf 두 개의 파일이 나옵니다.
이 두 파일을 스킨-직접올리기 메뉴를 통해 업로드합니다.



2. 스킨 수정

스킨을 편집해서 아래의 코드를 삽입합니다.
위치는 </head>의 바로 앞입니다. (사실, 헤더 내에만 위치하면 별 상관은 없습니다...)
<script type="text/javascript" src="./FLVplayer.js"></script>
<script type="text/javascript">
  FLVHelper.all("./images/player.swf");
</script>
</head>
하일라이팅한 FLVHelper.all() 부분은 좀 더 볼 필요가 있습니다.
여기에선 동영상 플레이어로고 그리고 컨트롤 영역의 높이를 정할 수 있습니다.
플레이어는 1번에서 업로드한 플레이어이므로 특별히 변경해줄 것은 없습니다.
로고는 화면 우측 상단에 표시되는 것으로 스킨-직접올리기를 통해 올린 뒤 아래와 같이 지정하면 됩니다.
(물론, 지정하지 않으면 로고를 표시하지 않습니다)
그리고, 컨트롤 영역의 높이는 기본값(20) 외에 다른 값을 지정하고 싶을 때 사용합니다.(특별히 바꿀 이유는 없습니다)

세 파라미터를 다 사용하면 아래와 같은 모양이 됩니다.
FLVHelper.all("./images/player.swf" ,"./images/zockrflv.png" ,20);


3. 동영상 올리기

약간 번잡하긴 했지만, 동영상을 올리는 것은 그다지 어렵지 않습니다.
주의할 점은 올리기 전에 파일명을 잘 지정해야 한다는 것입니다.
파일명을 통해 동영상의 해상도를 지정해야 합니다.
파일명의 형식은 파일명_폭x높이.flv입니다.

형식을 정확하게 지정하지 않으면 변환작업이 이루어지지 않습니다.
이렇게 만든 이유는 이 도우미는 본문 내에 삽입된 imageblock을 모두 검사해서 처리하는데, 이 과정에서 원하지 않는 파일까지 변환하는 것을 방지하기 위함입니다.

fight_320x180.flv라는 파일을 업로드한 뒤에 삽입하면 아래와 같은 모양이 나옵니다.
(확인을 목적으로 좌, 우, 가운데 정렬을 각각 했습니다)

사용자 삽입 이미지

여기에 도우미 플러그인을 설치하면 아래와 같이 변신합니다.

사용자 삽입 이미지

짜잔~


주의할 점은 너무 아래에 위치시킨 뒤에 왼쪽이나 오른쪽 정렬을 하면 댓글 영역이 위의 그림처럼 보기 싫어지는 경우가 발생할 수 있다는 것입니다.



Trackback 1 Comment 12
  1. JAFO 2009.04.18 11:58 address edit & delete reply

    요즘 통 안보이시고 로그인 안하시길래 잠수타셨는지 알았습니다. ^^
    전 오늘도 회사에.... ㅜㅜ
    즐거운 주말 보내세요.

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.04.18 17:24 address edit & delete

      목욜 아침 9시에 L* 제안작업을 종료하고 오후에 퇴근 오프 신공 시전 중입니다.
      오랜만에 쉬려니 쉬는 것도 어렵군요.
      이제 제안 작업은 하나만 더 끝내면 된... 쿨럭!

      주말 잘 보내세요~

  2. Favicon of http://greenmaru.com BlogIcon 그린B 2009.04.18 19:44 address edit & delete reply

    오. 동영상을 올리게 되면 한번 써봐야겠습니다. 감사합니다~

    ..근데 동영상은 어디다 올려야 되려나 -_-..

    암턴 제안작업 하시느라 피곤하실텐데.. 주말 푹푹 즐겁게 쉬세요~ :)

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.04.18 22:02 address edit & delete

      이 신공은 flv 파일을 티스토리의 첨부파일로 직접 올릴 때만 통하는 신공이랍니다.

      별도의 동영상이라면야 유튜브가 제일 적절할 듯 합니다.

  3. pardonk 2009.04.21 21:43 address edit & delete reply

    여기 있는 팁들을 그냥 티스토리에서 알아서 업데이트 해주면 좋겠네요.

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.04.22 13:06 address edit & delete

      그건 이미 이미 포기한 지 오래입니다.

  4. Favicon of http://oktoya.net BlogIcon okto 2009.04.21 23:05 address edit & delete reply

    오오~~ 드디어..
    티스토리 플러그인 전문가 다우시네요.
    UCP 개발자로 불리워 마땅합니다.

    덧. 요즘도 바쁘시나요?
    전 요며칠 배탈로 고생하는 바람에 속이 좀 허하네요. 시간나면 야식이나ㅋㅋ

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.04.22 13:06 address edit & delete

      상세한 얘긴 별도로 포스팅할 예정이지만...
      일이 좀 있어 다이어트 들어갔다능~

  5. Favicon of http://e-forever.co.cc BlogIcon Forevler 2009.04.23 15:40 address edit & delete reply

    예술입니다^^
    큼.. [b]진심으로 MOV 와 WMV 도 저런 플레이어로 할 수 있으면 좋을텐데^^[/b]
    윈도우 미디어 플레이어로 꽝이고 퀵타임은 귀찮고 느리고
    저랑 맞아 떨어지는 찰떡 궁합 프로그램은 살면서 정말 몇개 못봤습죠^^ (VLC Player 좋아합니다^^ 그러나 대세는 곰플..)

    P.S. IE8 에서만 그러는 건지는 모르겠는데 위에 이모티콘들에 마우스 오버하면
    [img]http://myqnsidata.tistory.com/attachment/cfile24.uf@135C571D49F00C97B94DFB.png[/img]
    이렇게 됩니다 호호

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.04.23 21:48 address edit & delete

      전 IE8에서 제대로 나오는 것을 확인했습니다만... 홍홍

      그리고, 갠적으로 곰플, KMP는 비추이고 다음팟플 강추입니다.

  6. pardonk 2009.04.25 17:52 address edit & delete reply

    데이터베이스는 무사히 잘 넘어왔나 보네요.
    이제 스킨 작업만 빡세게 하시면 되실 듯..

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.04.25 19:54 address edit & delete

      맞습니다. 프로그램을 하나 만들어서 두 블로그의 데이터를 합쳤는데, 꽤 고생했습니다. ㅠ.ㅠ
      이제 스킨을 선택하고 있습니다...