Skip to main content

ControlBar

Since version 4.0.0

source

A plugin that displays extra buttons & controls that controls View360.

class ControlBar implements View360Plugin

Implements

Properties

DEFAULT_CLASS

Default class names that ControlBar uses

POSITION

Constants for position

autoHide

Automatically hide control bar on video plays.
true to enable with default values, false to disable.

className

Override default class names.

clickToPlay

Whether to play / pause video on canvas click

fullscreenButton

Show fullscreen button.
true to enable with default values, false to disable.

gyroButton

Show gyroscope control enable / disable button.
true to enable with default values, false to disable.

keyboardControls

Enable keyboard controls for video.
Pressing up / down arrow will control video volume, and pressing left / right arrow will control video time.

pieView

Show camera pie view.
true to enable with default values, false to disable.

playButton

Show video play / pause button.
true to enable with default values, false to disable.

progressBar

Show video progress bar.
true to enable with default values, false to disable.

showBackground

Show background element.

videoTime

Show video current / total time
true to enable with default values, false to disable.

volumeButton

Show video volume control button.
true to enable with default values, false to disable.

vrButton

Show VR button.
true to enable with default values, false to disable.

backgroundEl

Background element of the control bar

containerEl

Container element of the control bar

customItems

Custom control bar items

items

Control bar's default items created by ControlBarOptions

rootEl

Root element of the control bar

Methods

destroy

Destroy plugin and release all resources & event handlers.

init

Initialize plugin.

Constructor​

Create new instance of ControlBar.
new ControlBar(options: Partial<ControlBarOptions>): ControlBar

Parameters

options

Partial<ControlBarOptions>

{}

Options

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" }

Default class names that ControlBar uses

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" }

Constants for position

source

autoHide​

>=4.0.0
readonly
autoHide

boolean | Partial<AutoHideOptions>

Automatically hide control bar on video plays.
true to enable with default values, false to disable.

source

className​

>=4.0.0
readonly
className

Required<Partial>

Override default class names.

source

clickToPlay​

>=4.0.0
readonly
clickToPlay

boolean

Whether to play / pause video on canvas click

source

fullscreenButton​

>=4.0.0
readonly
fullscreenButton

boolean | Partial<ControlBarItemOptions>

Show fullscreen button.
true to enable with default values, false to disable.

source

gyroButton​

>=4.0.0
readonly
gyroButton

boolean | Partial<ControlBarItemOptions>

Show gyroscope control enable / disable button.
true to enable with default values, false to disable.

source

keyboardControls​

>=4.0.0
readonly
keyboardControls

boolean

Enable keyboard controls for video.
Pressing up / down arrow will control video volume, and pressing left / right arrow will control video time.

source

pieView​

>=4.0.0
readonly
pieView

boolean | Partial<PieViewOptions>

Show camera pie view.
true to enable with default values, false to disable.

source

playButton​

>=4.0.0
readonly
playButton

boolean | Partial<ControlBarItemOptions>

Show video play / pause button.
true to enable with default values, false to disable.

source

progressBar​

>=4.0.0
readonly
progressBar

boolean | Partial<ControlBarItemOptions>

Show video progress bar.
true to enable with default values, false to disable.

source

showBackground​

>=4.0.0
readonly
showBackground

boolean

Show background element.

source

videoTime​

>=4.0.0
readonly
videoTime

boolean | Partial<ControlBarItemOptions>

Show video current / total time
true to enable with default values, false to disable.

source

volumeButton​

>=4.0.0
readonly
volumeButton

boolean | Partial<ControlBarItemOptions>

Show video volume control button.
true to enable with default values, false to disable.

source

vrButton​

>=4.0.0
readonly
vrButton

boolean | Partial<ControlBarItemOptions>

Show VR button.
true to enable with default values, false to disable.

source

backgroundEl​

>=4.0.0
readonly
backgroundEl

HTMLElement

Background element of the control bar

source

containerEl​

>=4.0.0
readonly
containerEl

HTMLElement

Container element of the control bar

source

customItems​

>=4.0.0
readonly
customItems

ControlBarItem[]

Custom control bar items

source

items​

>=4.0.0
readonly
items

Record<ValueOf, ControlBarItem[]>

Control bar's default items created by ControlBarOptions

source

rootEl​

>=4.0.0
readonly
rootEl

HTMLElement

Root element of the control bar

source

Methods​

destroy​

>=4.0.0
destroy

void

destroy(viewer: View360): void

Destroy plugin and release all resources & event handlers.

Parameters

viewer

View360

A instance of viewer to detach plugin

source

init​

>=4.0.0
init

void

init(viewer: View360): void

Initialize plugin.

Parameters

viewer

View360

A instance of viewer to attach plugin

source