Class: shaka.ui.Controls

Constructor

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

A container for custom video controls.
Parameters:
Name Type Description
player shaka.Player
videoContainer HTMLElement
video HTMLMediaElement
config shaka.extern.UIConfiguration
Implements:
Extends:
Source:

Extends

Members

(private, non-null) bottomControls_ :HTMLElement

Type:
  • HTMLElement
Source:

(private) castAllowed_ :boolean

Type:
  • boolean
Source:

(private) castProxy_ :shaka.cast.CastProxy

Type:
Source:

(private, non-null) controlsButtonPanel_ :HTMLElement

Type:
  • HTMLElement
Source:

(private, non-null) controlsContainer_ :HTMLElement

Type:
  • HTMLElement
Source:

dispatchTarget :EventTarget

The target of all dispatched events. Defaults to |this|.
Type:
  • EventTarget
Inherited From:
Source:

(private, non-null) elements_ :Array.<!shaka.extern.IUIElement>

Type:
Source:

(private) enabled_ :boolean

Type:
  • boolean
Source:

(private) 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:

(private) isSeeking_ :boolean

Type:
  • boolean
Source:

(private, nullable) lastTouchEventTime_ :number

Type:
  • number
Source:

(private) localization_ :shaka.ui.Localization

Type:
Source:

(private) localPlayer_ :shaka.Player

Type:
Source:

(private) localVideo_ :HTMLMediaElement

Type:
Source:

(private) 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:

(private) overrideCssShowControls_ :boolean

Type:
  • boolean
Source:

(private) player_ :shaka.Player

Type:
Source:

(private, non-null) pressedKeys_ :Set.<number>

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.<number>
Source:

(private) seekBar_ :shaka.ui.SeekBar

Type:
Source:

(private, non-null) settingsMenus_ :Array.<!Element>

Type:
  • Array.<!Element>
Source:

(private, non-null) spinnerContainer_ :HTMLElement

Type:
  • HTMLElement
Source:

(private) 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:

(private) video_ :HTMLMediaElement

Type:
Source:

(private, non-null) videoContainer_ :HTMLElement

Type:
  • HTMLElement
Source:

Methods

(private, static) createLocalization_() → (non-null) {shaka.ui.Localization}

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

(export, static) registerElement(name, factorynon-null)

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

(private) addBufferingSpinner_()

Source:

(private) addControlsButtonPanel_()

Source:

(private) addControlsContainer_()

Source:

(export) addEventListener(type, listener, optionsopt)

Add an event listener to this object.
Parameters:
Name Type Attributes Description
type string The event type to listen for.
listener shaka.util.FakeEventTarget.ListenerType The callback or listener object to invoke.
options AddEventListenerOptions | boolean <optional>
Ignored.
Inherited From:
Source:

(private) 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:

(private) addPlayButton_()

Source:

(export) allowCast(allow)

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

(export) anySettingsMenusAreOpen() → {boolean}

Source:
Returns:
Type
boolean

(export) configure(confignon-null)

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

(private) createDOM_()

Source:

(export) destroy() → (non-null) {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

(export) dispatchEvent(eventnon-null) → {boolean}

Dispatch an event from this object.
Parameters:
Name Type Description
event Event The event to be dispatched from this object.
Inherited From:
Source:
Returns:
True if the default action was prevented.
Type
boolean

(export) getCastProxy() → {shaka.cast.CastProxy}

Source:
Returns:
Type
shaka.cast.CastProxy

(export) getConfig() → (non-null) {shaka.extern.UIConfiguration}

Source:
Returns:
Type
shaka.extern.UIConfiguration

(export) getControlsContainer() → (non-null) {HTMLElement}

Source:
Returns:
Type
HTMLElement

(export) getDisplayTime() → {number}

Source:
Returns:
Type
number

(export) getLocalization() → {shaka.ui.Localization}

Source:
Returns:
Type
shaka.ui.Localization

(export) getLocalPlayer() → {shaka.Player}

Source:
Returns:
Type
shaka.Player

(export) getLocalVideo() → {HTMLMediaElement}

Source:
Returns:
Type
HTMLMediaElement

(export) getPlayer() → {shaka.Player}

Source:
Returns:
Type
shaka.Player

(export) getVideo() → {HTMLMediaElement}

Source:
Returns:
Type
HTMLMediaElement

(export) getVideoContainer() → (non-null) {HTMLElement}

Source:
Returns:
Type
HTMLElement

(export) hideSettingsMenus()

Source:

(export) isCastAllowed() → {boolean}

Source:
Returns:
Type
boolean

(private) isOpaque_() → {boolean}

Source:
Returns:
Type
boolean

(export) isSeeking() → {boolean}

Source:
Returns:
Type
boolean

(private) 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 onKeyDown_() 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:

(export) 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:

(private) onBufferingStateChange_()

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

(private) onCastStatusChange_(event)

Parameters:
Name Type Description
event Event
Source:

(private) onContainerClick_(eventnon-null)

Parameters:
Name Type Description
event Event
Source:

(private) onContainerTouch_(eventnon-null)

Parameters:
Name Type Description
event Event
Source:

(private) onKeyDown_(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 Event
Source:

(private) onKeyUp_(eventnon-null)

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

(private) 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:

(private) onMouseLeave_()

Source:

(private) 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:

(private) 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:

(private) onPlayPauseClick_()

Source:

(private) onPlayStateChange_()

Source:

(private) 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:

(export) overrideCssShowControls()

Display controls even if css says overwise. Normally, controls opacity is controled by CSS, but there are a few special cases where we want controls to be displayed no matter what. For example, if the focus is on one of the settings menus. This method is called when we want to signal an exception to normal CSS opacity rules and keep the controls visible.
Source:

(export) removeEventListener(type, listener, optionsopt)

Remove an event listener from this object.
Parameters:
Name Type Attributes Description
type string The event type for which you wish to remove a listener.
listener shaka.util.FakeEventTarget.ListenerType The callback or listener object to remove.
options EventListenerOptions | boolean <optional>
Ignored.
Inherited From:
Source:

(private) seek_(currentTime, eventnon-null)

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

(private) setControlsOpacity_(opacitynon-null)

Parameters:
Name Type Description
opacity shaka.ui.Enums.Opacity
Source:

(export) setEnabledNativeControls(enabled)

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

(export) setEnabledShakaControls(enabled)

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

(export) setLastTouchEventTime(timenullable)

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

(export) setSeeking(seeking)

Parameters:
Name Type Description
seeking boolean
Source:

(export) toggleFullScreen()

Source:

(private) updateTimeAndSeekRange_()

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