JW Player 도우미 플러그인 1.1은 자체 플레이어보다 훨씬 예쁜 디자인을 제공하는
JW Player를 손쉽게 사용하게 도와준다.
하지만, 비디오만 재생이 가능하고, JW Player의 특징 중 하나인 스킨 기능을 제공하지 않는 한계가 있었다.
(플레이어의 한계가 아니라 플러그인의 한계이다)
때마침 플레이어도 4.5로 업데이트가 되어 플레이어와 함께 플러그인을 업데이트했다.
추가된 기능은 아래와 같다.
- JW Player 업데이트
JW Player를 4.5로 업데이트 했다.
- 스킨의 지원
JW Player의 기능 중 하나는 미려한 스킨의 지원이다.
스킨을 지원할 수 있도록 수정했다.
- 오디오 재생 기능 추가
JW Player는 flv 파일(비디오)은 물론 mp4 파일(비디오, 오디오)을 재생할 수 있다.
전버전에선 이 중 flv 비디오만 재생이 가능했다.
이번에는 mp4 오디오까지 재생이 가능하도록 수정했다. 정확히는 AAC 방식의 mp4 오디오만 지원한다.
(클라이언트 사이드 플러그인의 구현의 한계로인해 mp4 비디오는 재생을 제대로 하지 못한다)
설치 방법은 아래와 같다.
1. 관련 파일의 업로드
아래 압축파일을 다운받아 열면
FLVplayer.js와
player.swf 두 개의 파일이 나온다.
이 두 파일을 스킨-직접올리기 메뉴를 통해 업로드한다.
스킨을 편집해서 아래의 코드를 삽입한다.
위치는
</head>의 바로 앞이다. (사실, 헤더 내에만 위치하면 별 상관은 없다...)
<script type="text/javascript" src="./FLVplayer.js"></script>
<script type="text/javascript">
//<![CDATA[
FLVHelper.all("./images/player.swf");
//]]>
</script>
위의 코드는 기본 플레이어만 사용하는 형태이다.
스킨을 지정하고, 플레이어의 높이를 지정하는 등,
모든 옵션을 사용한 코드는 아래와 같다.
<script type="text/javascript" src="./FLVplayer.js"></script>
<script type="text/javascript">
//<![CDATA[
FLVHelper.all("./images/player.swf"
, "./images/zockrflv.png"
, 32
, "./images/modieus.swf");
//]]>
</script>
a. 5행: 인각을 지정 5행의 zockrflv.png는 화면 우측 상단에 전시되는 인각을 지정하는 곳이다.
물론, 지정하지 않으면 비디오만 깔끔하게 재생된다.
b. 6행: 플레이어 컨트롤 영역의 높이를 지정
화면에 표시되는 플레이어에서 컨트롤 영역의 높이를 지정한다.
기본 스킨은 높이가 20px이며, 기본 스킨을 사용할 때는 별도로 지정할 필요가 없다.
하지만, 별도의 스킨을 사용한다면 스킨의 컨트롤 영역 높이를 지정해줘야 깔끔하게 표시된다.
c. 7행: 스킨을 지정
별도의 스킨을 사용하고 싶으면 스킨 파일을 업로드한 뒤에 이곳에 파일명을 지정하면 된다.
추가적인 스킨은
JW Player 홈페이지에서 다운받을 수 있다.
본 플러그인이 인식하는 파일 확장자는
flv,
flvi,
mp4 3가지이다.
flv는 플래쉬 비디오 파일로, 업로드 형식은
파일명_폭x높이.flv 형식이다.
플레이어에서 비디오의 크기를 자동으로 인식하지 못하기 때문에 반드시 크기를 지정해줘야 한다.
flvi는 비디오 파일 재생시 초기 이미지를 지정하는 파일이다.
이미지 파일의 형식과 무관하게 확장자를
flvi로 변경해줘야 한다.
※ flv, flvi의 사용법은
JW Player 도우미 플러그인 1.1에 설명되어 있다.
mp4는 오디오 파일로, AAC 방식으로 인코딩된 오디오만 지원한다.
(원래 mp4 포맷은 mkv 파일과 유사한 수준을 지원하는 범용 비디오 컨테이너이다)
mp4 확장자가 붙은 파일을 업로드한 뒤 화면에 배치하기만 하면 플레이어가 동작한다.
오디오의 재생 화면은 아래와 같다.
(비디오를 재생하는 화면은 기존 화면과 동일한다)
modieus 스킨을 적용한 오디오 재생 화면이다
JWPlayerHelper31c.7z
FLVPDFHelper_v2_2a.zip
파워포인트 프리젠테이션 샘플.ppt
