JW Player 도우미 플러그인 공개

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

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

0. JW Player 소개

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

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

1. 관련 파일 업로드

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

FLVplayer.zip

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

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

짜잔~

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