Interface UIConfig

interface UIConfig {
    autoUiVariantResolve?: boolean;
    container?: string | HTMLElement;
    disableAutoHideWhenHovered?: boolean;
    disableStorageApi?: boolean;
    ecoMode?: boolean;
    enableSeekPreview?: boolean;
    enterFullscreenOnInitialPlayback?: boolean;
    errorMessages?: ErrorMessageMap | ErrorMessageTranslator;
    forceSubtitlesIntoViewContainer?: boolean;
    metadata?: {
        description?: string;
        markers?: TimelineMarker[];
        title?: string;
    };
    playbackSpeedSelectionEnabled?: boolean;
    recommendations?: UIRecommendationConfig[];
    seekbarSnappingEnabled?: boolean;
    seekbarSnappingRange?: number;
}

Hierarchy (view full)

Properties

autoUiVariantResolve?: boolean

Specifies if the UI variants should be resolved and switched automatically upon certain player events. The default is true. Should be set to false if purely manual switching through UIManager.resolveUiVariant is desired. A hybrid approach can be used by setting this to true (or leaving the default) and overriding automatic switches through a UIManager.onUiVariantResolve event handler.

container?: string | HTMLElement

Specifies the container in the DOM into which the UI will be added. Can be a CSS selector string or a HTMLElement object. By default, the player container will be used (PlayerAPI#getContainer).

disableAutoHideWhenHovered?: boolean

Specifies if the player controls including SettingsPanel should auto hide when still hovered. This configuration does not apply to devices using a touch screen. On touch screen devices the SettingsPanel is by default configured to not auto-hide and the behaviour cannot be changed using this configuration. Default: false

disableStorageApi?: boolean

If set to true, prevents the UI from using localStorage.

ecoMode?: boolean

Specifies if the EcoModeToggleButton should be displayed within the SettingsPanel

enableSeekPreview?: boolean

Toggles the seek preview feature. Default: true

enterFullscreenOnInitialPlayback?: boolean

Specifies if the player should enter fullscreen by clicking on the PlaybackToggleButton, HugePlaybackToggleButton, or PlaybackToggleOverlay when attempting the initial playback start. Default: false

Provide customized errorMessages For an example have a look at ErrorMessageOverlayConfig.messages

forceSubtitlesIntoViewContainer?: boolean

Forces subtitle-labels back into their respective container if they overflow and are therefore cropped.

metadata?: {
    description?: string;
    markers?: TimelineMarker[];
    title?: string;
}
playbackSpeedSelectionEnabled?: boolean

Specifies if the PlaybackSpeedSelectBox should be displayed within the SettingsPanel Default: true

recommendations?: UIRecommendationConfig[]
seekbarSnappingEnabled?: boolean

Whether the play head should snap to markers on the seek bar when seeking sufficiently near them.

The related config option seekbarSnappingRange defines the tolerance that is used to determine whether a seek time hits a marker.

Note:

  • When hitting a point marker (i.e. one without duration), the play head would snap to the exact time of the marker.
  • Likewise, when hitting a range marker (i.e. one with duration) which effectively snaps to the start of the time range that it defines.

Default: true

seekbarSnappingRange?: number

Specifies the seek bar marker snapping tolerance in percent. This option has no effect if seekbarSnappingEnabled is set to false. Default: 1