Class: shaka.ui.Controls

Constructor

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

Parameters:
Name Type Attributes Description
player shaka.Player
videoContainer HTMLElement
video HTMLMediaElement
vrCanvas HTMLCanvasElement <nullable>
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:

contextMenu_ :shaka.ui.ContextMenu

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:

hiddenFastForwardButton_ :shaka.ui.HiddenFastForwardButton

Type:
Source:

hiddenRewindButton_ :shaka.ui.HiddenRewindButton

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:

localVideo_ :HTMLVideoElement

Type:
  • HTMLVideoElement
Source:

localVideo_ :HTMLVideoElement

Type:
  • HTMLVideoElement
Source:

localVideo_ :HTMLVideoElement

Type:
  • HTMLVideoElement
Source:

localVideo_ :HTMLVideoElement

Type:
  • HTMLVideoElement
Source:

localVideo_ :HTMLVideoElement

Type:
  • HTMLVideoElement
Source:

localVideo_ :HTMLVideoElement

Type:
  • HTMLVideoElement
Source:

localVideo_ :HTMLVideoElement

Type:
  • HTMLVideoElement
Source:

localVideo_ :HTMLVideoElement

Type:
  • HTMLVideoElement
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.extern.IUISeekBar

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:

vr_ :shaka.ui.VRManager

Type:
Source:

vrCanvas_ :HTMLCanvasElement

Type:
  • HTMLCanvasElement
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:

registerSeekBar(factorynon-null)

Parameters:
Name Type Description
factory shaka.extern.IUISeekBar.Factory
Source:

addAdControls_()

Source:

addBufferingSpinner_()

Source:

addClientAdContainer_()

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

addContextMenu_()

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:

addFastForwardButtonOnControlsContainer_()

Add fast-forward button on Controls container for moving video some seconds ahead when the video is tapped more than once, video seeks ahead some seconds for every extra tap.
Source:

addPlayButton_()

Source:

addRewindButtonOnControlsContainer_()

Add Rewind button on Controls container for moving video some seconds behind when the video is tapped more than once, video seeks behind some seconds for every extra tap.
Source:

addScrimContainer_()

Source:

addSeekBar_()

Adds a seekbar depending on the configuration. By default an instance of shaka.ui.SeekBar is created This behaviour can be overriden by providing a SeekBar factory using the registerSeekBarFactory function.
Source:

allowCast(allow)

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

anySettingsMenusAreOpen() → {boolean}

Source:
Returns:
Type
boolean

canPlayVR() → {boolean}

Returns if a VR is capable.
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:

copyStyleSheetsToWindow_()

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

enterFullScreen_()

Source:

exitFullScreen_()

Source:

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

getVR() → {shaka.ui.VRManager}

Source:
Returns:
Type
shaka.ui.VRManager

getVRFieldOfView() → {number}

Returns the angle of the current field of view displayed in degrees.
Source:
Returns:
Type
number

getVRNorth() → {number}

Get the angle of the north.
Source:
Returns:
Type
number

hideAdUI()

Source:

hideSettingsMenus()

Source:

hideUI()

Source:

incrementPitch(angle)

Increment the pitch in X angle in degrees.
Parameters:
Name Type Description
angle number In degrees
Source:

incrementRoll(angle)

Increment the roll in X angle in degrees.
Parameters:
Name Type Description
angle number In degrees
Source:

incrementYaw(angle)

Increment the yaw in X angle in degrees.
Parameters:
Name Type Description
angle number In degrees
Source:

isCastAllowed() → {boolean}

Source:
Returns:
Type
boolean

isFullScreenEnabled() → {boolean}

Source:
Returns:
Type
boolean

isFullScreenSupported() → {boolean}

Source:
Returns:
Type
boolean

isHovered_() → {boolean}

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

isOpaque() → {boolean}

Source:
Returns:
Type
boolean

isPiPAllowed() → {boolean}

Source:
Returns:
Type
boolean

isPiPEnabled() → {boolean}

Source:
Returns:
Type
boolean

isPlayingVR() → {boolean}

Returns if a VR is supported.
Source:
Returns:
Type
boolean

isSeeking() → {boolean}

Source:
Returns:
Type
boolean

isStereoscopicModeEnabled() → {boolean}

Returns true if stereoscopic mode is enabled.
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:

removeMediaSession_()

Source:

resetVR()

Reset VR view.
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:

setupMediaSession_()

Source:

setVRFieldOfView(fieldOfView)

Changing the field of view increases or decreases the portion of the video that is viewed at one time. If the field of view is decreased, a small part of the video will be seen, but with more detail. If the field of view is increased, a larger part of the video will be seen, but with less detail.
Parameters:
Name Type Description
fieldOfView number In degrees
Source:

showAdUI()

Source:

showUI()

Source:

toggleDocumentPictureInPicture_()

The Document Picture-in-Picture API makes it possible to open an always-on-top window that can be populated with arbitrary HTML content. https://developer.chrome.com/docs/web-platform/document-picture-in-picture
Source:

toggleFullScreen()

Source:

togglePiP()

Source:

toggleStereoscopicMode()

Toggle stereoscopic mode.
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:

VRStatusChangedEvent

Fired when VR status change
Properties:
Name Type Description
type string 'vrstatuschanged'
Source: