본문 바로가기

개발&컴퓨터/개발강좌

JWPlayer 강좌 (부록) - JW Player Skins [3/4]

반응형

* JW Player 는 규격화된 몇가지 스킨 외에 외형을 직접 커스터마이징 할 수 있는 다양한 기능과 옵션을 제공합니다.

 

3. JW Player Skins

 

 1) Building JW Player Skin
  * JW 플레이어의 외형을 변경할 수 있음.
  * 이를 위한 커스텀 레이어(Custom Lyaer) 기능 제공.

  * 눈에 보여지는 모든 컴포넌트에 스킨 적용 가능.

    - Controlbar

    - Display

    - Tooltip

    - Dock & Playlist

  * 스킨(Skin) 적용은 데스크탑(Desktop)과 모바일(Mobile) 브라우저 모두에 적용 됨.

 

  적용할 수 있는 Skins?

  - JW Player 기본 스킨 : SIX, BEELDEN, BEKLE. FIVE, GLOW, ROUNDSTER, STORMTROOPER, VAPOR. (8가지 제공)

     (단 SIX 를 제외한 스킨은 유료 플레이어(Pro Version 이상)에서 지원.)
  - 3rd Party 사의 스킨 또는 자신만의 스킨 적용 가능.


Pro Skin Example - BEKLE

jwplayer("myElement").setup({
  file: "/upload/myVideo.mp4",
  skin: "bekle"
});

 

 

* Custom Skin Example

jwplayer("myElement").setup({
    file: "/uploads/example.mp4",
    height: 360,
    image: "/uploads/example.jpg",
    skin: "/uploads/mySkin.xml",    // 스킨을 정의한 XML 파일 설정
    width: 640
});

 

 

 

 * 별도의 코딩 기술 없이 이미지 파일들로로 스킨 적용 가능
 * JW Player의 Skin 구성은 XML 파일로 구성되어 있으며, 모든 설정 값 들을 XML파일로 제어.

 

 

<skin target='6.0' name='SkinName' author='skinAuthor'>
   <components>
      <component name='controlbar'>
         <settings>
            <setting name='...' value='...' />
            ...
         </settings>
         <elements>
            <element name='...' src='...' />
            ...
         </elements>
      </component>
      ...
   </components>
</skin> 

 

 * XML 파일은 설정 값(e.g. fontColor),

   이미지 링크(e.g. playButtons) 등으로 구성
 

 * 5 개의 컴포넌트로 구성 :

    Controlbar, Display, Dock, Playlist, Tooltip.

 

 * 개별 컴포넌트는 1개의 Setting과 1개의 Elements 요소를 포함.

 <setting> : non-image skinning option.
 <element> : URL to images. (PNG, JPG, GIF)

 

 

 

 jwplayer("myElement").setup({
    file: "video.mp4",
    height: 360,
    skin: "myCoolSkin/myCoolSkin.xml",
    width: 640
});

 

 

 myCoolSkin 에 필요한 이미지 셋은 서브디렉토리에 배치해야 함.

 myCoolSkin/controlbar/
 myCoolSkin/display/
 myCoolSkin/dock/
 myCoolSkin/playlist/
 myCoolSkin/tooltip/

 

 

 [JW Player Skin Components Overall]

 

 

 

 [Controlbar] 

 

 

 [Controlbar timeSlider]  

 

 

 [Controlbar Volumeslider]  

 

  [Display] 

 

 

  [Dock] 

 

 

  [Playlist] 

 

 

  [Tooltip] 

 

 

 

- 참고URL -

JW Player XML 구성 요소 상세 레퍼런스

http://support.jwplayer.com/customer/portal/articles/1413071-skin-xml-reference

 

 

반응형