본문으로 건너뛰기

ControlBar

Since version 4.0.0

source

View360에 부가적인 버튼과 컨트롤을 추가해주는 플러그인.

class ControlBar implements View360Plugin

Implements

Properties

DEFAULT_CLASS

ControlBar가 사용하는 디폴트 클래스 이름들

POSITION

position에 사용 가능한 값들

autoHide

비디오 재생시 자동으로 컨트롤바를 숨깁니다.
true일 경우 기본값을 적용하고, false일 경우 비활성화합니다.

className

디폴트 클래스 이름들을 오버라이드합니다.

clickToPlay

캔버스 클릭시에 비디오를 재생 / 일시정지 토글합니다.

fullscreenButton

풀스크린 진입 / 해제 버튼을 표시합니다.
true일 경우 기본값을 적용하고, false일 경우 비활성화합니다.

gyroButton

자이로스코프 컨트롤을 활성화 / 비활성화하는 버튼을 표시합니다.
true일 경우 기본값을 적용하고, false일 경우 비활성화합니다.

keyboardControls

비디오 키보드 컨트롤을 활성화합니다.
위 / 아래 화살표키를 누를 시 비디오 볼륨을, 왼쪽 / 오른쪽 화살표키를 누를 시 비디오 시간을 조정합니다.

pieView

현재 카메라가 가리키는 방향을 표시하는 파이 뷰를 표시합니다.
true일 경우 기본값을 적용하고, false일 경우 비활성화합니다.

playButton

비디오 재생 / 일시정지 버튼을 표시합니다.
true일 경우 기본값을 적용하고, false일 경우 비활성화합니다.

progressBar

비디오 프로그레스 바를 표시합니다.
true일 경우 기본값을 적용하고, false일 경우 비활성화합니다.

showBackground

배경 엘리먼트를 표시합니다.

videoTime

비디오의 현재 시간 / 총 시간을 표시합니다.
true일 경우 기본값을 적용하고, false일 경우 비활성화합니다.

volumeButton

비디오 볼륨 조절 버튼을 표시합니다.
true일 경우 기본값을 적용하고, false일 경우 비활성화합니다.

vrButton

VR 진입버튼을 표시합니다.
true일 경우 기본값을 적용하고, false일 경우 비활성화합니다.

backgroundEl

컨트롤바의 배경 엘리먼트

containerEl

컨트롤바의 컨테이너 엘리먼트

customItems

커스텀 컨트롤바 아이템들을 추가합니다.

items

주어진 ControlBarOptions에 의해 생성된 디폴트 아이템들

rootEl

컨트롤바의 루트 엘리먼트

Methods

destroy

플러그인을 제거하고 할당된 모든 리소스 및 이벤트 핸들러를 제거합니다.

init

플러그인을 초기화합니다.

Constructor​

ControlBar의 새 인스턴스를 생성합니다.
new ControlBar(options: Partial<ControlBarOptions>): ControlBar

Parameters

options

Partial<ControlBarOptions>

{}

옵션들

Properties​

DEFAULT_CLASS​

>=4.0.0
static readonly
DEFAULT_CLASS

{ CONTROLS_BG: "view360-controls-background"; CONTROLS_BOTTOM: "view360-controls-bottom"; CONTROLS_BUTTON: "view360-controls-button"; CONTROLS_FLOAT_LEFT: "view360-controls-float-left"; CONTROLS_FLOAT_RIGHT: "view360-controls-float-right"; CONTROLS_LEFT: "view360-controls-left"; CONTROLS_MAIN: "view360-controls-main"; CONTROLS_MID: "view360-controls-mid"; CONTROLS_RIGHT: "view360-controls-right"; CONTROLS_ROOT: "view360-controls"; CONTROLS_TOP: "view360-controls-top"; FIXED: "view360-controls-fixed"; FULLSCREEN_BUTTON: "view360-controls-fullscreen"; FULLSCREEN_EXIT_BUTTON: "view360-controls-fullscreen-exit"; GYRO_DISABLED: "view360-controls-gyro-disabled"; GYRO_ENABLED: "view360-controls-gyro-enabled"; HIDDEN: "view360-controls-hidden"; MUTED_BUTTON: "view360-controls-muted"; PAUSE_BUTTON: "view360-controls-pause"; PIEVIEW_ROOT: "view360-controls-pie"; PLAY_BUTTON: "view360-controls-play"; PROGRESS_ROOT: "view360-controls-progress"; RANGE_FILLER: "view360-range-filler"; RANGE_ROOT: "view360-range"; RANGE_THUMB: "view360-range-thumb"; RANGE_TRACK: "view360-range-track"; UNAVAILABLE: "view360-controls-unavailable"; UNMUTED_BUTTON: "view360-controls-unmuted"; VIDEO_TIME_DISPLAY: "view360-controls-time"; VOLUME_ROOT: "view360-controls-volume"; VR_BUTTON: "view360-controls-vr" }

ControlBar가 사용하는 디폴트 클래스 이름들

source

POSITION​

static readonly
POSITION

{ MAIN_BOTTOM: "main-bottom"; MAIN_LEFT: "main-left"; MAIN_RIGHT: "main-right"; MAIN_TOP: "main-top"; TOP_LEFT: "top-left"; TOP_RIGHT: "top-right" }

position에 사용 가능한 값들

source

autoHide​

>=4.0.0
readonly
autoHide

boolean | Partial<AutoHideOptions>

비디오 재생시 자동으로 컨트롤바를 숨깁니다.
true일 경우 기본값을 적용하고, false일 경우 비활성화합니다.

source

className​

>=4.0.0
readonly
className

Required<Partial>

디폴트 클래스 이름들을 오버라이드합니다.

source

clickToPlay​

>=4.0.0
readonly
clickToPlay

boolean

캔버스 클릭시에 비디오를 재생 / 일시정지 토글합니다.

source

fullscreenButton​

>=4.0.0
readonly
fullscreenButton

boolean | Partial<ControlBarItemOptions>

풀스크린 진입 / 해제 버튼을 표시합니다.
true일 경우 기본값을 적용하고, false일 경우 비활성화합니다.

source

gyroButton​

>=4.0.0
readonly
gyroButton

boolean | Partial<ControlBarItemOptions>

자이로스코프 컨트롤을 활성화 / 비활성화하는 버튼을 표시합니다.
true일 경우 기본값을 적용하고, false일 경우 비활성화합니다.

source

keyboardControls​

>=4.0.0
readonly
keyboardControls

boolean

비디오 키보드 컨트롤을 활성화합니다.
위 / 아래 화살표키를 누를 시 비디오 볼륨을, 왼쪽 / 오른쪽 화살표키를 누를 시 비디오 시간을 조정합니다.

source

pieView​

>=4.0.0
readonly
pieView

boolean | Partial<PieViewOptions>

현재 카메라가 가리키는 방향을 표시하는 파이 뷰를 표시합니다.
true일 경우 기본값을 적용하고, false일 경우 비활성화합니다.

source

playButton​

>=4.0.0
readonly
playButton

boolean | Partial<ControlBarItemOptions>

비디오 재생 / 일시정지 버튼을 표시합니다.
true일 경우 기본값을 적용하고, false일 경우 비활성화합니다.

source

progressBar​

>=4.0.0
readonly
progressBar

boolean | Partial<ControlBarItemOptions>

비디오 프로그레스 바를 표시합니다.
true일 경우 기본값을 적용하고, false일 경우 비활성화합니다.

source

showBackground​

>=4.0.0
readonly
showBackground

boolean

배경 엘리먼트를 표시합니다.

source

videoTime​

>=4.0.0
readonly
videoTime

boolean | Partial<ControlBarItemOptions>

비디오의 현재 시간 / 총 시간을 표시합니다.
true일 경우 기본값을 적용하고, false일 경우 비활성화합니다.

source

volumeButton​

>=4.0.0
readonly
volumeButton

boolean | Partial<ControlBarItemOptions>

비디오 볼륨 조절 버튼을 표시합니다.
true일 경우 기본값을 적용하고, false일 경우 비활성화합니다.

source

vrButton​

>=4.0.0
readonly
vrButton

boolean | Partial<ControlBarItemOptions>

VR 진입버튼을 표시합니다.
true일 경우 기본값을 적용하고, false일 경우 비활성화합니다.

source

backgroundEl​

>=4.0.0
readonly
backgroundEl

HTMLElement

컨트롤바의 배경 엘리먼트

source

containerEl​

>=4.0.0
readonly
containerEl

HTMLElement

컨트롤바의 컨테이너 엘리먼트

source

customItems​

>=4.0.0
readonly
customItems

ControlBarItem[]

커스텀 컨트롤바 아이템들을 추가합니다.

source

items​

>=4.0.0
readonly
items

Record<ValueOf, ControlBarItem[]>

주어진 ControlBarOptions에 의해 생성된 디폴트 아이템들

source

rootEl​

>=4.0.0
readonly
rootEl

HTMLElement

컨트롤바의 루트 엘리먼트

source

Methods​

destroy​

>=4.0.0
destroy

void

destroy(viewer: View360): void

플러그인을 제거하고 할당된 모든 리소스 및 이벤트 핸들러를 제거합니다.

Parameters

viewer

View360

플러그인을 떼어 낼 뷰어의 인스턴스

source

init​

>=4.0.0
init

void

init(viewer: View360): void

플러그인을 초기화합니다.

Parameters

viewer

View360

플러그인을 부착할 뷰어의 인스턴스

source