JW Player 도우미 2.1 업뎃: PDF/PPT 임베딩 기능 추가!

1. JW Player 도우미

JW Player 도우미 플러그인JW Player라는 걸출한 웹 임베디드 미디어플레이어를 간편하게 사용할 수 있게 도와준다.
그런데, 사소한(이라고 쓰고 거대한이라 읽는...) 버그가 하나 있었다. 바로 IE6/7에서 동작하지 않는다는 것이다.
(사실 워낙에 IE 보기를 개처럼 하는지라 아예 테스트해보지도 않았음. Win7+IE8에서 되는 거 보고 걍 패스)



2. PDF 파일의 블로그 임베드

이와는 별도로 그동안 PDF 파일을 블로그에 임베드시키는 방식을 놓고 여러모로 고민을 했었는데, 결국 방향을 정했다.
당연히 Adobe Reader를 설치한 뒤에 이를 브라우저에서 부르는 것이 정석이지만, 이 정석께서는 크롬에서 동작을 안 하신다.

사용자 삽입 이미지

크롬 살려!


원래 이 정석 자체가 약간의 꼼수가 포함된 방식인데다(IE와 FF의 태그 해석 방식이 달라 두 브라우저를 모두 사용할 수 있도록 이상하게 만들어져 있음) 그마저도 HTML 태그에 익숙하지 않은 대부분의 블로거들에게는 결코 쉽지 않은 방식이다.
더군다나 Foxit Reader만 달랑 깔고 사용하는 사용자들에게 Adobe Reader를 깔아달라고 부탁할 수도 없는 노릇이다.
(여전히 Adobe Reader는 느려터졌다. 많이 빨라졌다곤 하지만 그건 지들 생각일 뿐이다)

Scribd에서 PDF 파일을 멋진 뷰어와 함께 게시하는 서비스를 제공하는데, (티스토리 서버가 아닌) 제 3의 서버에 올리는 것이 부담스러워 사용을 꺼리고 있었다.
(인터페이스 및 출력 품질은 이 쪽이 최강임. 사용법은 PDF를 블로그에 삽입할 수 있는 해주는 사이트 참조)

그런데, 구글 도큐먼트 뷰어를 이용하면, 간단하게 임베드시킬 수 있다는 것을 알았다. 얏호!

그래서 이 방식을 이용하는 플러그인을 만들었다.



3. 플러그인 업데이트 및 통합

처음 코딩을 할 때는 두 플러그인이 (당연히) 분리되어 있었다.
그런데, 동작방식이 완전히 동일한 플러그인을 별도로 동작시킬 필요가 없다는 생각이 들었다.
더군다나 서버 쪽이 아니라 클라이언트(자바스크립트) 쪽에서 돌아가는 코드이기 때문에 IE6같은 쓰레기 브라우저에선 미친듯이 버벅댈 가능성이 농후하다.

그래서 아예 둘을 통합시켜버렸다.

이 플러그인을 설치하면 다음과 같은 기능들을 사용할 수 있다.

1. 첨부 비디오(flv) 및 오디오(mp4) 재생 (사용법은 JW Player 도우미 플러그인 1.2 업데이트 참조)
2. 외부 비디오(flv) 및 오디오(mp4) 재생 (사용법은 JW Player 도우미 플러그인 1.5 업데이트 참조)
3. 첨부 PDF 및 PPT 파일 임베드

사용법은 구버전 링크를 참조하면 되며, 설치 방법은 다음과 같다.


a. 관련 파일 업로드

언제나 여기는 동일하다. 아래 파일을 다운받아 압축 풀고, 스킨 직접 올리기를 통해 올리면 된다.



b. 스킨 헤더 수정

스킨 헤더에 아래와 같은 코드를 스킨의 헤더 영역에 삽입하면 된다.
단, 구버전을 사용하는 블로거의 경우 기존 삽입된 코드는 삭제해야 한다.

<script type="text/javascript" src="./images/FLVPDF.js"></script>
<script type="text/javascript">
//<![CDATA[
  FLVPDFHelper.all(
1,
 1,
 680, 500,
 "./images/player.swf",
 "./images/zockrflv.png",
 27,
 "./images/modieus.swf");
//]]>
</script>

기존의 구성에 비해 추가된 것이 5, 6, 7행이다.

- 5행(1) : PDF/PPT 임베딩 기능 사용여부 지정. 0이면 사용하지 않음. 0이 아니면 사용함
- 6행(1) : 미디어 플레이어 임베딩 기능 사용여부 지정. 0이면 사용하지 않음. 0이 아니면 사용함
- 7행(680, 500) : PDF/PPT 임베딩시 폭과 높이 지정. 지정하지 않으면 각각 600, 500으로 자동지정
- 8행~11행은 각각 JW Player 주소, 인각, 스킨 컨트롤 영역 높이, 스킨파일로 플러그인 1.2의 인자들과 동일

이 중 앞의 두 인자 즉, PDF/PPT 임베딩 여부 및 미플 임베딩 여부는 생략할 수 없으며, 나머지 인자들은 생략시 내부 기본값들로 자동 지정된다.



4. 샘플

아래 보는 것과 같다. 역시 구글 킹왕짱인 것이다!




Trackback 2 Comment 12
  1. Favicon of http://zasfe.com BlogIcon zasfe 2009.09.28 09:32 address edit & delete reply

    옷.. 이것은... 언제슬지 몰라도 일단 킵! [emo=040]

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.09.28 23:39 address edit & delete

      나름 심혈을 기울여 만든 놈인데, 이상하게 사용자가 적은 것 같다능... [emo=109]

  2. Favicon of http://loveash.cc BlogIcon 애쉬™ 2009.10.10 08:47 address edit & delete reply

    ㅋ 회사컴에서 샘플이 안 보인다 했더니..위에 IE7에서 안 보임! 이라고 나오네요^^ 에고..

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.10.10 09:01 address edit & delete

      'IE7에서 안 보임'이란 말씀을 잘 이해하지 못하겠네요...

    • Favicon of http://loveash.cc BlogIcon 애쉬™ 2009.10.10 09:11 address edit & delete

      아, IE6/IE7에서 작동하지 않는다고 말씀하신거요^^ 제 회사컴이 IE7이거든요..그래서 헬퍼가 작동안해서 ppt샘플을 못 본다는 말이었습니다.

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.10.10 09:18 address edit & delete

      아... 이전 버전이 그랬단 뜻입니다.
      지금은 무려 IE6에서도 정상동작합니다.

      캐쉬 때문일 수 있으니 F5를 한번 눌러보시기 바랍니다.

    • Favicon of http://loveash.cc BlogIcon 애쉬™ 2009.10.10 09:21 address edit & delete

      음, F5야 여러번 눌러봤지만 안 되네요. 흠..윈XP sp3 에 IE7쓰는 환경입니다.

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.10.10 14:44 address edit & delete

      알겠습니다. 확인해보겠습니다.
      IE6, IE8에서 되는 것 보고 IE7은 될 것이라 생각했는데, 잘못생각했나보군요. 쩝.

    • Favicon of http://loveash.cc BlogIcon 애쉬™ 2009.10.10 15:07 address edit & delete

      정확히 말하면 IE7과, 웹마2 두 브라우져에서 다른 증상을 보입니다.
      일단 웹마에서는 아예 샘플 부분전체가 하얀색으로만 나오며,
      IE7에서는 도우미 상단(즉, 페이지수, 확대 등 표시)은 나오는데, 화면중간에 "loading"하더니 깨진그림표시 있죠? 그렇게만 나옵니다.

  3. Favicon of http://loveash.cc BlogIcon 애쉬™ 2009.10.10 15:40 address edit & delete reply

    PPT를 논외로 하고, 1.5까지 제 테스트에서는 정상적으로 작동하지 않았던 flv부분을 다시 테스트해보았습니다.
    IE7, webma , IE6 모두 정상작동 확인했습니다. 아, 그런데 말씀대로 ie6에서는 많이 버벅이네요^^
    참, 한가지 더 질문이 있습니다. jwplayer에서는 mp4형식이 오디오뿐 아니라 비디오도 지원하고 있습니다.
    jw 도우미에서는 mp4는 오디오만 지원되고 있는데 비디오까지 지원하실 생각은 없으신지요?

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.10.10 15:48 address edit & delete

      mp4 비디오라... 한번 생각해봐야겠습니다.
      원체 클라이언트 쪽 스크립트만 사용하는지라 기능의 제약이 많아서요...

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.10.10 16:23 address edit & delete

      버그 수정 및 기능 패치를 완료했습니다.

      1. 구글닥스로 인자를 넘길 때 IE에서도 잘 인식하도록 수정
      2. mp4 비디오도 지원이 가능하도록 수정

      수정 내용은 곧 포스팅하도록 하겠습니다.
      잘 동작하는지 확인 부탁드릴게요.