[JWPlayer] Options - Skin

Skin

JW Player는 기본적으로 11가지 스킨 구성 옵션(skin configuration options) 을 제공합니다.
브랜드 아이덴티티를 세밀하게 제어할 수 있어, 플레이어를 보다 쉽게 맞춤화(customize) 할 수 있습니다.

색상 사용자 정의 (Color Customization)

색상은 16진수(hex), RGBA 색상 값, 또는 색상 이름(color name) 으로 지정할 수 있습니다. (8.0+ 지원)

• hex 값
• RGBA 색상 값
• 색상 이름

player.setup({
  "playlist": "https://cdn.jwplayer.com/v2/media/hWF9vG66",
  "skin": {
    "controlbar": {
      "background": "rgba(0,0,0,0)",
      "icons": "rgba(255,255,255,0.8)",
      "iconsActive": "#FFFFFF",
      "text": "#FFFFFF"
    },
    "menus": {
      "background": "#333333",
      "text": "rgba(255,255,255,0.8)",
      "textActive": "#FFFFFF"
    },
    "timeslider": {
      "progress": "#F2F2F2",
      "rail": "rgba(255,255,255,0.3)"
    },
    "tooltips": {
      "background": "#FFFFFF",
      "text": "#000000"
    }
  }
});

• controlbar (object)
  • 컨트롤 바(Control Bar)의 색상 구성 옵션
  • 참고: controlbar
• menus (object)
  • 메뉴의 색상 구성 옵션
  • 참고: menus
• name (string)
  • 플레이어 스타일링에 사용할 커스텀 스킨 이름을 지정합니다.
  • 만약 skin.url 을 지정한다면, 반드시 skin.name 도 함께 지정해야 하며,
  • 해당 값은 CSS 파일 내 클래스 이름과 일치해야 합니다.
  • 자세한 내용은 Branding 문서를 참고하세요.
• timeslider (object)
  • 타임 슬라이더(Time Slider)의 색상 구성 옵션
  • 참고: timeslider
• tooltips (object)
  • 툴팁(Tooltip)의 색상 구성 옵션
  • 참고: tooltips
• url (string)
  • 플레이어를 스타일링하기 위한 외부 CSS 파일의 경로를 지정합니다.
  • skin.url을 지정하는 경우, 반드시 skin.name도 지정해야 하며,
    CSS 파일의 클래스 이름과 일치해야 합니다.
  • 자세한 내용은 Branding 문서를 참고하세요.

controlbar

• background (string)
  • 컨트롤 바 및 볼륨 슬라이더의 배경색을 설정합니다.
  • 기본 배경은 투명입니다.
  • 기본값: "rgba(0,0,0,0)"
• icons (string)
  • 컨트롤 바 내 모든 아이콘의 기본(비활성) 색상을 설정합니다.
  • 이 옵션은 재생(play), 일시정지(pause), 리플레이(replay) 아이콘의 비활성 및 완료 상태 색상에도 적용됩니다.
  • 기본값: "rgba(255,255,255,0.8)"
• iconsActive (string)
  • 컨트롤 바에서 호버(hover) 또는 선택된 아이콘의 색상을 설정합니다.
  • 기본값: "#FFFFFF"
• text (string)
  • 컨트롤 바의 일반 텍스트(예: 시간 표시) 색상을 설정합니다.
  • 기본값: "#FFFFFF"

menus

• background (string)
  • 메뉴와 Next Up 오버레이의 배경색을 설정합니다.
  • 기본값: "#333333"
• text (string)
  • 메뉴 및 Next Up 오버레이의 비활성 텍스트(기본 텍스트) 색상을 설정합니다.
  • 기본값: "rgba(255,255,255,0.8)"
• textActive (string)
  • 메뉴에서 호버되거나 선택된 텍스트의 색상을 설정합니다.
  • 이 옵션은 Discover 오버레이의 텍스트 색상 및 Next Up 오버레이의 호버 상태 텍스트 색상에도 적용됩니다.
  • 기본값: "#FFFFFF"

timeslider

• progress (string)
  • 비디오 시작 지점부터 현재 위치까지 채워진 타임 슬라이더 바 색상을 설정합니다.
  • 컨트롤 바의 버퍼 영역은 이 색상의 불투명도 50% 로 표시됩니다.
  • 또한 볼륨 슬라이더 색상도 이 옵션으로 제어됩니다.
  • 기본값: "#F2F2F2"
• rail (string)
  • 타임 슬라이더의 기본 베이스 색상(rail) 을 설정합니다.
  • 기본값: "rgba(255,255,255,0.3)"

tooltips

• background (string)
  • 툴팁의 배경색을 설정합니다.
  • 기본값: "#000000"
• text (string)
  • 툴팁의 텍스트 색상을 설정합니다.
  • 기본값: "#000000"