JW Player 적용 방법

다운로드 : http://www.longtailvideo.com/players/jw-flv-player/ 

위의 경로에서 다운로드를 받아 압축을 풀면 가이드 문서가 있지만, 보기 귀찮으시거나 간단하게 사용 방법만 아시고 싶으신 분은 아래를 참고하세요.

JW Player 사용방법은 다양하고 각종 설정(스킨, 플러그인, 플레이리스트 등)을 추가할 수 있습니만, 기본적인 사용법 3가지를 알아보겠습니다.


* 공통 부분

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

JW Player 의 스크립트를 include 해주는 부분은 공통입니다.
페이지 상단 head 부분에 넣어 주세요.
src 부분에 jwplayer.js 파일이 존재하는 경로를 적어주세요.




1. 자바 스크립트 삽입

<div id="container">Loading the player ...</div>

<script type="text/javascript">

      jwplayer("container").setup({

      flashplayer: "/jwplayer/player.swf",

      file: "/uploads/video.mp4",

      height: 270,

      width: 480

   });

</script>

웹페이지를 출력한 후 플레이어를 로딩할 때 Loading the player... 라는 영역이 표시가 되고, 로딩이 완료되면 플레이어를 표시해줍니다.

스크립트를 표시한 부분에 플레이어가 삽입됩니다.
div 의 id와 스크립트 내의 jwplayer("_id_") 를 동일하게 해주세요.

flashplayer : player.swf 의 위치
file : 재생할 파일경로
width, height : 가로세로 길이
image : 포스터입니다




2. Video 태그 (HTML5 지원)

<video class="jwplayer" src="/uploads/video.mp4" poster="/uploads/image.jpg"></video>

html5의 video 태그에 class 를 jwplayer 로 설정을 하는 것만으로 사용 가능합니다.
대신 브라우저가 HTML5 를 지원하지 않는다면 플레이어가 표시되지 않습니다.




3. 모드 정의하여 삽입

<div id="container">Loading the player ...</div>

<script type="text/javascript">

      jwplayer("container").setup({

      file: "/videos/video.mp4",

      height: 270,

      width: 480,

      modes: [

         { type: "html5" },

         { type: "flash", src: "/jwplayer/player.swf" },

         { type: "download" }

      ]

   });

</script>

플레이어를 삽입하는 방식을 우선순위로 정해 사용합니다.
modes: [ ] 내용 안에 있는 순서대로 방식을 정합니다.
type: "html5" - html5 방식입니다. 위의 2번 방식과 동일합니다.
type: "flash" - 플래시 플레이어를 삽입합니다. 위의 1번 방식과 동일합니다.
type: "download" - 다운로드 합니다.

위의 소스를 예제로 설명하면 html5 방식으로 로드가 안되면 flash 방식으로.. 그것도 안되면 download 하도록 설정한 것입니다.