Class: shaka.ui.Controls

Constructor

new Controls(playernon-null, videoContainernon-null, videonon-null, config)

Parameters:
Name Type Description
player shaka.Player
videoContainer HTMLElement
video HTMLMediaElement
config shaka.extern.UIConfiguration
Implements:
Source:

Members

ad_ :shaka.extern.IAd

Type:
Source:

adManager_ :shaka.extern.IAdManager

Type:
Source:

adPanel_ :HTMLElement

Type:
  • HTMLElement
Source:

bottomControls_ :HTMLElement

Type:
  • HTMLElement
Source:

castAllowed_ :boolean

Type:
  • boolean
Source:

castProxy_ :shaka.cast.CastProxy

Type:
Source:

clientAdContainer_ :HTMLElement

Type:
  • HTMLElement
Source:

config_ :shaka.extern.UIConfiguration

Type:
Source:

controlsButtonPanel_ :HTMLElement

Type:
  • HTMLElement
Source:

controlsContainer_ :HTMLElement

Type:
  • HTMLElement
Source:

daiAdContainer_ :HTMLElement

Type:
  • HTMLElement
Source:

elements_ :Array.<!shaka.extern.IUIElement>

Type:
Source:

enabled_ :boolean

Type:
  • boolean
Source:

eventManager_ :shaka.util.EventManager

Type:
Source:

fadeControlsTimer_ :shaka.util.Timer

This timer is used to delay the fading of the UI.
Type:
Source:

hideSettingsMenusTimer_ :shaka.util.Timer

This timer will be used to hide all settings menus. When the timer ticks it will force all controls to invisible. Rather than calling the callback directly, |Controls| will always call it through the timer to avoid conflicts.
Type:
Source:

isSeeking_ :boolean

Type:
  • boolean
Source:

lastTouchEventTime_ :number

Type:
  • number
Source:

localization_ :shaka.ui.Localization

Type:
Source:

localPlayer_ :shaka.Player

Type:
Source:

localVideo_ :HTMLMediaElement

Type:
Source:

menus_ :Array.<!HTMLElement>

Type:
  • Array.<!HTMLElement>
Source:

mouseStillTimer_ :shaka.util.Timer

This timer is used to detect when the user has stopped moving the mouse and we should fade out the ui.
Type:
Source:

playButton_ :shaka.ui.BigPlayButton

Type:
Source:

player_ :shaka.Player

Type:
Source:

pressedKeys_ :Set.<string>

The pressed keys set is used to record which keys are currently pressed down, so we can know what keys are pressed at the same time. Used by the focusInsideOverflowMenu_() function.
Type:
  • Set.<string>
Source:

recentMouseMovement_ :boolean

Type:
  • boolean
Source:

seekBar_ :shaka.ui.SeekBar

Type:
Source:

showOnHoverControls_ :Array.<!Element>

Individual controls which, when hovered or tab-focused, will force the controls to be shown.
Type:
  • Array.<!Element>
Source:

spinnerContainer_ :HTMLElement

Type:
  • HTMLElement
Source:

timeAndSeekRangeTimer_ :shaka.util.Timer

This timer is used to regularly update the time and seek range elements so that we are communicating the current state as accurately as possibly. Unlike the other timers, this timer does not "own" the callback because this timer is acting like a heartbeat.
Type:
Source:

video_ :HTMLMediaElement

Type:
Source:

videoContainer_ :HTMLElement

Type:
  • HTMLElement
Source:

Methods

createLocalization_() → {shaka.ui.Localization}

Create a localization instance already pre-loaded with all the locales that we support.
Source:
Returns:
Type
shaka.ui.Localization

registerElement(name, factorynon-null)

Parameters:
Name Type Description
name string
factory shaka.extern.IUIElement.Factory
Source:

addAdControls_()

Source:

addBufferingSpinner_()

Source:

addClientAdContainer_()

Adds a container for server side ad UI with IMA SDK.
Source:

addControlsButtonPanel_()

Source:

addControlsContainer_()

Source:

addDaiAdContainer_()

Adds a container for server side ad UI with IMA SDK.
Source:

addEventListeners_()

Adds static event listeners. This should only add event listeners to things that don't change (e.g. Player). Dynamic elements (e.g. controls) should have their event listeners added when they are created.
Source:

addPlayButton_()

Source:

addScrimContainer_()

Source:

allowCast(allow)

This allows the application to inhibit casting.
Parameters:
Name Type Description
allow boolean
Source:

anySettingsMenusAreOpen() → {boolean}

Source:
Returns:
Type
boolean

computeOpacity()

Recompute whether the controls should be shown or hidden.
Source:

configure(confignon-null)

Parameters:
Name Type Description
config shaka.extern.UIConfiguration
Source:

createDOM_()

Source:

destroy() → {Promise}

Request that this object be destroyed, releasing all resources and shutting down all operations. Returns a Promise which is resolved when destruction is complete. This Promise should never be rejected.
Implements:
Source:
Returns:
Type
Promise

getAd() → {shaka.extern.IAd}

Source:
Returns:
Type
shaka.extern.IAd

getCastProxy() → {shaka.cast.CastProxy}

Source:
Returns:
Type
shaka.cast.CastProxy

getClientSideAdContainer() → {HTMLElement}

Source:
Returns:
Type
HTMLElement

getConfig() → {shaka.extern.UIConfiguration}

Source:
Returns:
Type
shaka.extern.UIConfiguration

getControlsContainer() → {HTMLElement}

Source:
Returns:
Type
HTMLElement

getDisplayTime() → {number}

Source:
Returns:
Type
number

getLocalization() → {shaka.ui.Localization}

Source:
Returns:
Type
shaka.ui.Localization

getLocalPlayer() → {shaka.Player}

Source:
Returns:
Type
shaka.Player

getLocalVideo() → {HTMLMediaElement}

Source:
Returns:
Type
HTMLMediaElement

getPlayer() → {shaka.Player}

Source:
Returns:
Type
shaka.Player

getServerSideAdContainer() → {HTMLElement}

Source:
Returns:
Type
HTMLElement

getVideo() → {HTMLMediaElement}

Source:
Returns:
Type
HTMLMediaElement

getVideoContainer() → {HTMLElement}

Source:
Returns:
Type
HTMLElement

hideAdUI()

Source:

hideSettingsMenus()

Source:

isCastAllowed() → {boolean}

Source:
Returns:
Type
boolean

isHovered_() → {boolean}

Source:
Returns:
true if any relevant elements are hovered.
Type
boolean

isOpaque() → {boolean}

Source:
Returns:
Type
boolean

isSeeking() → {boolean}

Source:
Returns:
Type
boolean

keepFocusInMenu_(eventnon-null)

When the user is using keyboard to navigate inside the overflow settings menu (pressing Tab key to go forward, or pressing Shift + Tab keys to go backward), make sure it's focused only on the elements of the overflow panel. This is called by onWindowKeyDown_() function, when there's a settings overflow menu open, and the Tab key / Shift+Tab keys are pressed.
Parameters:
Name Type Description
event Event
Source:

loadComplete()

Used by the application to notify the controls that a load operation is complete. This allows the controls to recalculate play/paused state, which is important for platforms like Android where autoplay is disabled.
Source:

onBufferingStateChange_()

Called both as an event listener and directly by the controls to initialize the buffering state.
Source:

onCastStatusChange_()

Source:

onContainerClick_()

Source:

onContainerTouch_(eventnon-null)

Parameters:
Name Type Description
event Event
Source:

onControlsKeyDown_(eventnon-null)

Support controls with keyboard inputs.
Parameters:
Name Type Description
event KeyboardEvent
Source:

onControlsKeyUp_(eventnon-null)

Support controls with keyboard inputs.
Parameters:
Name Type Description
event KeyboardEvent
Source:

onMouseDown_()

For keyboard navigation, we use blue borders to highlight the active element. If we detect that a mouse is being used, remove the blue border from the active element.
Source:

onMouseLeave_()

Source:

onMouseMove_(eventnon-null)

Hiding the cursor when the mouse stops moving seems to be the only decent UX in fullscreen mode. Since we can't use pure CSS for that, we use events both in and out of fullscreen mode. Showing the control bar when a key is pressed, and hiding it after some time.
Parameters:
Name Type Description
event Event
Source:

onMouseStill_()

This callback is for when we are pretty sure that the mouse has stopped moving (aka the mouse is still). This method should only be called via |mouseStillTimer_|. If this behaviour needs to be invoked directly, use |mouseStillTimer_.tickNow()|.
Source:

onPlayPauseClick_()

Source:

onPlayStateChange_()

Source:

onScreenRotation_()

When a mobile device is rotated to landscape layout, and the video is loaded, make the demo app go into fullscreen. Similarly, exit fullscreen when the device is rotated to portrait layout.
Source:

onWindowKeyDown_(eventnon-null)

Add behaviors for keyboard navigation. 1. Add blue outline for focused elements. 2. Allow exiting overflow settings menus by pressing Esc key. 3. When navigating on overflow settings menu by pressing Tab key or Shift+Tab keys keep the focus inside overflow menu.
Parameters:
Name Type Description
event KeyboardEvent
Source:

playPauseAd()

Play or pause the current ad.
Source:

playPausePresentation()

Play or pause the current presentation.
Source:

presentationIsPaused() → {boolean}

Return true if the presentation is paused.
Source:
Returns:
Type
boolean

releaseChildElements_()

Source:

seek_(currentTime)

Update the video's current time based on the keyboard operations.
Parameters:
Name Type Description
currentTime number
Source:

setEnabledNativeControls(enabled)

Enable or disable native browser controls. Enabling disables shaka controls.
Parameters:
Name Type Description
enabled boolean
Source:

setEnabledShakaControls(enabled)

Enable or disable the custom controls. Enabling disables native browser controls.
Parameters:
Name Type Description
enabled boolean
Source:

setLastTouchEventTime(timenullable)

Parameters:
Name Type Attributes Description
time number <nullable>
Source:

setSeeking(seeking)

Parameters:
Name Type Description
seeking boolean
Source:

showAdUI()

Source:

toggleFullScreen()

Source:

updateTimeAndSeekRange_()

Called when the seek range or current time need to be updated.
Source:

Events

CaptionSelectionUpdatedEvent

Fired when the captions/subtitles menu has finished updating.
Properties:
Name Type Description
type string 'captionselectionupdated'
Source:

CastStatusChangedEvent

Fired upon receiving a 'caststatuschanged' event from the cast proxy.
Properties:
Name Type Description
type string 'caststatuschanged'
newStatus boolean The new status of the application. True for 'is casting' and false otherwise.
Source:

ErrorEvent

Fired when something went wrong with the controls.
Properties:
Name Type Description
type string 'error'
detail shaka.util.Error An object which contains details on the error. The error's 'category' and 'code' properties will identify the specific error that occurred. In an uncompiled build, you can also use the 'message' and 'stack' properties to debug.
Source:

LanguageSelectionUpdatedEvent

Fired when the audio language menu has finished updating.
Properties:
Name Type Description
type string 'languageselectionupdated'
Source:

ResolutionSelectionUpdatedEvent

Fired when the resolution menu has finished updating.
Properties:
Name Type Description
type string 'resolutionselectionupdated'
Source:

SubMenuOpenEvent

Fired when one of the overflow submenus is opened (e. g. language/resolution/subtitle selection).
Properties:
Name Type Description
type string 'submenuopen'
Source:

TimeAndSeekRangeUpdatedEvent

Fired when the time and seek range elements have finished updating.
Properties:
Name Type Description
type string 'timeandseekrangeupdated'
Source:

UIUpdatedEvent

Fired after a call to ui.configure() once the UI has finished updating.
Properties:
Name Type Description
type string 'uiupdated'
Source: