사이트에 동영상 플레이 기능을 넣고 싶을 때 고려해볼만한 플레이어가 Flowplayer이다. HTML5의 Video 관련 기능이 아직 완전하게 표준화되지 않은 시점이기에, PC 기반의 웹 브라우저에서 동영상을 플레이하는 가장 현실적인 방안은 플래시를 사용하는 것이다. 하지만, 규모가 작은 회사에서 플래시 개발자를 고용하거나 플래시 기반의 동영상 플레이어를 외주 주는 것은 비용 문제 때문에 쉽지가 않다. 이럴 때 바로 유용하게 사용할 수 있는 것이 Flowplayer (http://flowplayer.org/)이다.
Flowplayer는 GPL 3 라이선스를 따르는 오픈 소스로 제공되는 플레이어로서 라이선스를 따르는 한 자유롭게 사용할 수 있다. 또한, 로고를 마음대로 변경할 수 있는 상용 버전도 1개 도메인에 대해 95$ 밖에 안 하기 때문에 매우 싼 값에 플래시 기반의 동영상 플레이어를 사용할 수 있다. 게다가 다양한 플러그인들이 존재해서 필요한 기능들이 이미 존재하는 경우가 많았다. 이런 이유로 필자도 FlowPlayer를 선택하게 되었다.
Flowplayer의 주요 기능
동영상 플레이어니까 당연히 동영상을 재생해주는 기능을 제공하는데, 간략하게 주요 기능들을 정리해보면 다음과 같다.
- 손쉬운 설치와 설정
- pseudostreaming 지원 / RTMP 지원 / YouTube 비디오 재생
- 플레이어 이벤트를 처리할 수 있는 다양한 자바스크립트 API
- 플러그인을 통한 손쉬운 기능 확장
- ABR(Adaptive Bitrate) 지원
- URL Obfuscation 기능
<script src="jquery-1.7.1.js"></script>
<script src="flowplayer-3.2.11.min.js"></script>
<script type="text/javascript">
$(function() {
flowplayer("player", "flowplayer-3.2.12.swf", {
clip: {
url: 'mp4:0000/00/1/1_PC1.mp4',
provider: 'rtmp'
},
plugins: {
rtmp: {
url: "flowplayer.rtmp-3.2.10.swf",
netConnectionUrl: 'rtmp://wowza.myserver-host.com:1935/vod'
}
}
});
});
</script>
</head>
<body>
<div id="player" style="width: 644px; height: 276px; margin: 0 auto; text-align: center">
</div>
</body>
</html>
모든 설정이 위와 같이 JSON 형식의 자바 스크립트 코드로 이루어지기 때문에, Flowplayer 사이트만 참고하면 비교적 쉽게 동영상 재생 기능을 사이트에 추가할 수 있다.
다양한 이벤트 지원
동영상 재생이 종료되면 사용자에게 추가 정보를 알려주는 레이어를 띄워 주고 싶을 수 있다. 예를 들어, 상품에 대한 리뷰 동영상의 재생이 끝나면 상품에 대한 상세 보기 페이지로 이동할 수 있는 안내 레이어를 보여주고 싶은 경우가 있을 것이다. 이렇게 플레이어의 상태에 따라 특정한 동작을 하고 싶은 경우에는 Flowplayer가 제공하는 이벤트를 사용하면 된다.
플레이어가 제공하는 이벤트는 다음과 같은 것들이 있다.
- volume: 볼륨 조절시 발생
- load: 플레이어가 완전히 로딩될 때 발생
- fullscreen, fullscreenExit: 풀스크린 모드 전환이나 취소시 발생
- mouseOver, mouseOut: 플레이어 위에 마우스가 올라가거나 벗어날 때 발생
- begin: 클립이 시작될 때 발생
- finish: 클립이 끝날 때 발생
- pause: 일시 중지할 때 발생
- stop: 멈출 때 발생
- seek: 시간을 이동했을 때 발생
- cuepoint: 지정한 시간에 발생
위 이벤트에 반응하는 코드는 자바 스크립트를 이용해서 작성할 수 있다. 따라서, 자바 스크립트 코드만 작성할 수 있다면 각 이벤트가 발생할 때 원하는 기능을 수행할 수 있다.
유용한 플러그인들
Flowplayer의 장점 중 하나는 플러그인에 있다. 플래시와 자바 스크립트의 두 종료 플러그인이 존재하는데, 몇 가지 유용한 플러그인을 소개하도록 하겠다.
Content 플러그인
Content 플러그인은 플레이어 화면 위에 원하는 HTML을 보여줄 수 있는 기능이다. 링크 등을 걸 수 있기 때문에, 시청 도중에 관련 상품을 보여준다거나 종료 후 추가 정보를 보여주고 싶을 때 유용하게 사용할 수 있다.
[발췌: Flowpalyer]
Caption 플러그인
Caption 플러그인을 사용하면 자막을 올릴 수 있다. 아래는 Caption 플러그인을 사용해서 자막을 넣은 예를 보여주고 있다.
[발췌: Flowpalyer]
Menu 플러그인
Menu 플러그인을 사용하면 컨트롤바에 메뉴를 위한 버튼이 추가된다. 해당 버튼을 클릭하면 메뉴가 화면에 표시된다. 메뉴 목록은 자바 스크립트 코드를 이용해서 입력할 수 있다. 관련 비디오 목록을 보여주는 용도로 사용할 수 있을 것이다.
[발췌: Flowpalyer]
오픈소스와 플러그인 확장
개발자 입장에서 Flowplayer의 가장 매력적인 점은 오픈 소스이면서 플러그인을 쉽게 확장할 수 있다는 점이다. 컨트롤바부터 모든 것이 플러그인을 처리되기 때문에 플래시 개발 역량을 조금만 키우면 Flowplayer의 플레이 기능을 사용하면서 동시에 원하는 기능을 제공하는 플러그인을 추가할 수 있다.