Textcube : Brand yourself!

1. 소개

JW FLV Media Player의 원작자는 Jeroen Wijering(http://www.jeroenwijering.com/)이란 사람인데요, 이 플레이어가 꽤나 강력해서 mp3는 물론, flv, swf, jpg, png, gif, 그리고 최근 업데이트(3.16)에서는 youtube 영상과 스트리밍 영상까지 곧바로 재생할 수 있게 해줍니다.
이 플레이어를 TC에서 사용할 수 없을까 생각하다가 미카도르님이 올리신 플레이어를 발견하여서 사용했는데, 조금 아쉬운 점이 있어서 제가 수정해서 올립니다.

이 플러그인은 기존에 건이아빠님(http://www.textcube.org/plugin/534), 미카도르님(http://www.textcube.org/plugin/547)께서 만드신 JW FLV Media Player Plugin을 수정한 것임을 알려드립니다.

그리고 JW FLV Media Player가 CCL을 따르고 있기 때문에 이 플러그인 또한 CCL을 따르게 되었습니다.

이 플러그인은 TC 1.6.2, IE7 환경을 기준으로 제작되었으며 Firefox에서 동작을 검증했습니다.


2. 플러그인의 기능

(1) JW FLV Media Player에서 지원하는 모든 형태의 미디어 재생 가능
(2) 플레이리스트의 손쉬운 조절
(3) smi, TimedText 형태의 자막 파일과 연동
(4) 기존의 플러그인에서 지원하던 기능들


3. 기존 플러그인과 달라진 점

(1) 사용자 인터페이스 개선: 사용자 인터페이스를 개선해서 사용자가 적은 수의 클릭만 해도 쉽게 미디어 플레이어를 올릴 수 있게 했습니다.
  - 첨부파일 리스트에서 여러개의 파일을 한번에 플레이어에 올릴 수 있게 기능 추가
  - 미디어 파일 관련 속성 지정시 "확인" 버튼을 누르지 않아도 곧바로 반영

(2) 플레이리스트 관련 기능 추가: JW Media Player에서 사용 가능한 다양한 플레이리스트 형태를 손쉽게 고를 수 있도록 하였습니다.

(3) JW Media Player가 업데이트 될 때 번거로움이 없도록 Flash 파일 수정 안 함: 나중에 FLV 플레이어 코어 자체가 바뀔 경우 코어 파일(swf)만 바꿔주시면 문제 없이 사용 가능합니다.

(4) 기타 버그 수정


4. 사용 방법

* 기본 사용방법
(1) 플러그인을 다운받아 plugins 폴더에 올리고, 관리자 페이지에서 활성화시켜 줍니다.
(2) 글을 작성할 때 WYSIWYG 에디터 하단에 "Player 설정" 버튼이 생깁니다.
(3) 플러그인이 지원하는 여러 방법으로 플레이스트를 만들고 기타 설정을 합니다.
(4) "플레이어 삽입"을 선택하면 WYSIWYG 에디터에 개체가 생성됩니다.

*** 여기서 너비와 높이는 "영상"이 나올 크기를 지정합니다. 즉, 영상 없이 mp3 플레이어로 사용할 때에는 높이를 0으로 지정해 주시면 보기 좋습니다. 단 이 경우에도 너비를 어느 정도 이상의 크기로 지정해 주셔야 탐색바가 나옵니다.

* 플레이리스트 추가 방법
아래 세 가지 방법 중 하나를 선택해서 사용하시면 됩니다.

(1) 첨부파일에 미디어 파일을 업로드한 후 파일 개체를 선택하고 "L" 버튼을 누릅니다.
(2) 곧바로 "+" 버튼을 누르고 미디어의 주소를 수동으로 입력합니다.
(3) youtube 영상의 경우 영상의 주소(예: http://www.youtube.com/watch?v=ULVYbuKYfz8)를 "경로"에 넣어주시면 자동으로 인식됩니다.


* 개체 수정 방법
(1) 에디터에서 개체를 선택하고 "플레이어 로드" 버튼을 누르면 설정이 불러와 집니다.
(2) 필요한 사항을 바꾼 후 "플레이어 수정" 버튼을 누르면 기존의 플레이어에 변경 사항이 적용됩니다.



* 각 항목의 기능 설명

너비, 높이: "영상"이 나오는 곳의 크기를 지정합니다.
제목: 미디어의 제목을 지정합니다.
경로: 미디어 파일의 경로입니다.
저자: 가수 혹은 연주자 정보를 출력하고 싶으면 여기에 쓰시면 됩니다.
링크: 링크를 만들고자 할 때 여기에 넣으면, 영상을 클릭할 때 링크로 연결됩니다.
프리뷰: 재생되기 전 나오는 프리뷰 이미지를 올립니다.
자막: 영상과 연동될 자막 파일입니다. (smi, TimedText 지원)
자동시작: 플레이어가 불러와질 때 바로 재생을 시작합니다.
반복 설정: 전체 list를 반복할지 말지 결정합니다.
무작위재생: 말 그대로 랜덤 재생입니다. :)
화면 확장: 화면 사이즈에 영상이 맞지 않으면 어찌할지 결정합니다.
          - true: 비율 유지하면서 최대한 큰 화면으로
          - false: 가로로 꽉 찬 화면으로
          - fit: 플레이어 사이즈에 꽉 맞게
          - none: 원본 크기로

Playlist type: 플레이리스트를 나타내는 방법, 혹은 플레이어의 모양을 결정합니다.
          - None: 플레이리스트는 없고, 기본적인 모양입니다.
          - Auto hide: 플레이리스트도 없고, 탐색바도 없앱니다.
          - Bottom: 탐색바의 아래에 플레이리스트 표시
          - Right: 화면의 오른쪽에 플레이리스트 표시
          - Right(hide): Right와 같지만, 탐색바를 없애버립니다.

Playlist size: 플레이리스트의 크기를 지정합니다. playlist type에 따라 동작이 달라집니다.
          - Bottom: 플레이리스트의 세로 길이를 지정합니다. 참고로 41 정도가 한 항목의
                        길이입니다.
          - Right, Right(hide): 플레이리스트의 가로 길이를 지정합니다.
          - 그 외의 경우: 이 값의 영향을 받지 않습니다.

로고: 워터마크로 넣을 이미지를 고릅니다.

5. 업데이트 현황
2008.04.19: 1.01버전 업데이트 - IE6과의 호환성 문제 해결, iconv() 함수 존재 검사 루틴 추가
2008.04.29: 1.02버전 업데이트 - 한국어 youtube 사이트 지원

*Known Bugs*

IE6 환경에서 플레이리스트를 클릭할 때 javascript 에러가 발생합니다.
다시 한 번 클릭하면 제대로 동작하지만, 조금 불편한건 어쩔 수 없네요.
적절한 방법을 찾으면 업데이트 하도록 하겠습니다.   --> 1.01 버전에서 해결하였습니다.

저는 이 프로그램을 Textcube 1.6.2 버전에서 테스트하고 잘 돌아가는 것을 확인하였습니다.
미카도르님이 코딩을 잘 해 놓으셔서 하위 버전과의 호환도 될 것이라 생각하지만, 미흡한 점이 있으면 리포트해 주십시오. :)


(2008/04/29 추가)

JW media player 내부의 문제로 인해 파일명, 제목을 입력할 때에 "&" 글자를 제대로 인식하지 못합니다.
원하지 않는 동작을 초래할 수 있으니 참고하시기 바랍니다.

따라서, youtube 영상을 링크할 경우 예를 들어 주소가 "http://www.youtube.com/watch?v=kcD9Q9TL5-E&feature=related" 일 경우 빨간 부분을 제외한 "http://www.youtube.com/watch?v=kcD9Q9TL5-E"로 써 주시기 바랍니다.


(2008/06/10 추가) 텍스트큐브 1.7 업그레이드 관련

텍스트큐브 1.7 이상으로 업그레이드한 후, 바뀐 .htaccess 때문에 플레이어가 제대로 동작하지 않는 문제가 발생합니다.
이 문제를 해결하려면 관리자-서비스관리-서버 페이지의 맨 아래쪽에 있는 .htaccess 편집 창에서

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(thumbnail)/([0-9]+/.+)$ cache/$1/$2 [L]

이 부분 윗 줄에

RewriteRule ^plugins/GRZ_JWMediaPlayer(/.*|$) - [L]

를 추가하시면 제대로 동작합니다.