포고플러그에 jwplayer 올리고 웹에서 동영상 재생하기

포고플러그에 FTP서버를 운영하고 있는데 그 많은 자료를 웹에서 바로 볼 수 없을까 고민해봤습니다.

보통 웹서버가 없는 사람들은 티스토리에 mp4파일을 10MB단위로 쪼개서 올린 다음에 링크를 따오는 작업을 하시더라구요

그래도 웹서버 운영하는데 그렇게 빌려쓰기도 그렇고, 개인적으로 친분이 있는 사람들끼리만 볼 수 있는 게시판이면

포고플러그로도 충분하지 않을까 싶어서 시도해본 결과물을 공유해봅니다.

첨부한 파일 3개를 다운 받습니다.

1. fs40.zip

jwplayer의 스킨파일입니다. 압축파일이지만 풀 필요가 없습니다. zip파일 그 자체를 인식합니다.

이외에도 다양하고 이쁜 스킨들이 많으니 찾아보시길 바랍니다.

2. player.swf 

현재는 6버전으로 넘어가면서 js쪽으로 변경되는 바람에 그누보드에서는 호환이 어렵습니다.

스크립트 제한 때문인데요, 제가 첨부한 버전은 5.x버전으로 mp4, flv 파일을 지원합니다.

그냥 mp4라고 생각하시고 인코딩 및 먹싱하시면 됩니다.

3. Yamb 1.6

mp4파일이라고 모든 파일이 다 되는 것은 아닙니다. 

먹싱이 되어 있지 않은 파일의 경우 그 파일을 다 받아야지만 플레이가 가능합니다.

예를 들어 10-20MB파일의 경우 순식간에 다운되어 보기 쉽지만

1GB 이상의 파일의 경우 외부에서 볼때 1-3MB/s 속도로 다 다운받고 보기엔 시간이 너무 오래 걸리겠죠

그래서 다운받은만큼 볼 수 있게 만들어 줍니다.

먹스하는 방법은 http://geundi.tistory.com/53  여기에 잘 설명이 되어 있습니다.

4. 사실 스킨은 옵션이니 없어도 상관 없습니다. 그냥 깔끔해 보여서 올려보았고

웹에서 구동에 필요한 파일은 1개입니다. 바로 player.swf인데요. 이 파일을 nginx나 apche 웹서버에 올려줍니다.

스킨과 플레이어파일은 같은 도메인상에 있어야 하므로

적당히 root/jwp/ 에 둘다 올려놓으시면 불러쓰기 좋겠지요

그럼 이제 소스 갑니다.

<embed src="http://플레이어위치/player.swf" type="application/x-shockwave-flash" width="708" height="445" bgcolor="undefined" allowscriptaccess="always" allowfullscreen="true" wmode="transparent" flashvars="file=http://동영상파일위치/01.mp4&screencolor=000000&skin=http://스킨위치/fs40.zip">

동영상 파일의 경우는 다른 도메인에 있어도 상관없습니다.

그리고 스킨을 넣고 싶지 않다면 &skin=http://스킨위치/fs40.zip <- 이 부분을 삭제하시면 됩니다.

그리고 너비와 높이는 width="708" height="445"  이 부분을 수정하시면 되겠습니다.

그럼 쫜!!!! 하면서 이런 식으로 나오는 걸 볼 수 있습니다.

파일은 다른 곳에서 따오고 스킨과 플레이어는 현재 제 서버에 올라가 있는 상태입니다.

5. 자막 넣기

외국 영화나 애니의 경우 자막이 있는데 jwplayer에서도 플러그인 형태로 기능을 제공하고 있습니다.

<embed src="http://플레이어위치/player.swf" type="application/x-shockwave-flash" width="708" height="445" bgcolor="undefined" allowscriptaccess="always" allowfullscreen="true" wmode="transparent" flashvars="file=http://동영상파일위치/01.mp4&screencolor=000000&skin=http://스킨위치/fs40.zip&plugins=captions-2&captions.file=자막위치/자막파일.srt">

위의 코드처럼 넣으시면 됩니다.

보통 smi파일인데 변환 프로그램을 받아서 변환하면 됩니다. (첨부파일 참조)

http://simiy.cafe24.com/dboard/dboard.php?id=util

6. jwplayer의 단점

쉽게 구동할 수 있는만큼 단점도 있는데요

아무래도 플래시로 구동이 되다보니 아이폰 계열은 보기가 어렵습니다.

그 외엔 플래시만 깔려 있다면 무난하게 볼 수 있고요.

그래서 제가 크로스 브라우징이 가능한 대안을 찾아보았는데요.

정답은 HTML5 더라구요

jwplayer 6 버전의 경우 자바스크립트와 플래시를 동시에 구현을 해서

자바스크립트로 구동이 가능하면 그렇게 하고, 그게 안되면 플래시로 구동하는 하이브리드(?) 전법으로 

크로스브라우징을 하더군요.

다만 그누보드의 경우 자바스크립트 적용이 어렵기 때문에 그냥 플래시로 구동하는게 제일 쉽고 마음이 편한 것 같습니다.

아이폰 계열은 아쉽지만.. 그냥 FTP서버에서 바로 보는 방법도 있겠지요.

어쨌든 HTML5가 개발 중에 있으니 내년 쯤이면 더 좋은 대안이 나오지 않을까 기대하고 있습니다.