JW Player 5.6c 업그레이드

2010/12/19 - [컴퓨터야그/블로그 관련] - JW Player 5.4b 업데이트

지난 포스트에서 야심차게 JW Player 도우미를 5.4b로 업데이트한 이유는 HTML5로 비디오를 재생하도록 하기 위함이었다.

JW Player 5.3/5.4 업데이트의 핵심은 HTML5 지원 브라우저에서는 비디오를 브라우저에서 직접 재생하도록 하는 것이다.

하지만, 도우미 5.4b의 다양한 시도에도 불구하고 티스토리에선 HTML5의 비디오 재생기를 사용하게 하는 것이 불가능했다.
crossdomain policy가 원인이라고 하는데, 정확한 JW Player의 보안정책은 더 안 읽어보고 포기. OTL

그래서 다시 기존의 방식으로 돌아왔다.
원래의 목표가 아이패드에서 embed된 동영상을 재생되게 하는 것이었는데, 현재까진 불가능한 것 같다.

블로그에 JW Player를 적용하고, 삽입된 pdf를 보며, 외부 주소 mp4 비디오/오디오를 재생하려면 다음과 같이 하면 된다.


1. 필요 파일 업로드

아래 파일을 다운받아 압축을 해제한 뒤 블로그 스킨에 업로드한다.

JWPlayer56c.7z

2. 스킨 수정

스킨의 헤더 영역 내에 아래의 내용을 추가한다.

<script type="text/javascript" src="./images/jwplayer.js"></script>

<script type="text/javascript" src="./images/FLVPDF.js"></script>

<script type="text/javascript">

//<![CDATA[

  FLVPDFHelper.all(

    1,

    1,

    680, 500,

    "./images/player.swf");

//]]>

</script>

3. 사용법

사용법은 다음 글들을 참조하면 된다.
- 포스트에 첨부한 flv/mp4 재생
- 외부 mp4 재생
- PPT/PDF 삽입

덧1. 5.4b에서 <object> 태그를 가운데 정렬하는 기능을 추가했다.
<object> 태그는 좌우 정렬에서 left, right만 적용 가능하기 때문에 <center>~</center>를 추가하는 방식으로 구현했다.

덧2. 5.4c: <center> 태그 대신 <div style="text-align:center"> ~ </div>로 수정 및 유튜브 동영상만 정렬하도록 수정

덧3. 5.4e(1): 덧2의 내용 제거.
티스토리는 유튜브 동영상 앞뒤를 <div class="tt-youtube-plugin">로 감싸야만 정상동작하도록 변경되었음.
이에 따라 css에 div .tt-youtube-plugin의 속성만 지정하면 되며, 이에 따라 덧2의 기능은 불필요.

덧4. 5.4e(2): 플레이어 코어를 5.4.1530으로 교체.

덧5. 5.5: 플레이어 코어를 5.5.1641로 교체, img 버그 수정

덧6. 5.6: 플레이어 코어를 5.6.1768로 교체. 기존 textcube.com 서버에 저장되어있던 비디오 파일도 스트리밍 재생 지원.

덧7. 5.6a: 좌우 및 중앙 정렬이 제대로 안 되던 문제 해결.

덧8. 5.6b: 이미지가 안 나오는 버그 수정.

덧9. 5.6c: 플레이어 코어를 5.7.1896로 교체.