Configuration for Player UI
Updated: Fri Jun 26 15:42:02 2020, By Contribute to this page
Configuration parameters could be provided upon instantiation of the UI manager instance.
var config = {
// Configuration here
};
var uiManager = new playkit.ui.UIManager(player, config);
Configuration Structure
{
targetId: string,
debugActions: boolean, // optional
forceTouchUI: boolean, // optional
logLevel: string, // optional
components: Object, // optional
translations: Object, // optional
locale: Object // optional
}
#
config.targetId
Type: string
Default: -
Description: Defines the player container DOM element ID.
The UI manager needs this parameter since it renders the player UI below it.
config.debugActions
Type: boolean
Default: false
Description: Whether to print the fired redux actions.
config.forceTouchUI
Type: boolean
Default: false
Description: Defines the view type of the UI (mobile or desktop).
Useful for applications that wants to force mobile view of player UI.
config.logLevel
Type: string
Default: "ERROR"
Description: Defines the UI log level.
Possible values: "DEBUG", "INFO", "TIME", "WARN", "ERROR", "OFF"
config.translations
Type: {[langKey: string]: Object}
Default: see en.json
Description: Defines the UI translation dictionary configuration.
Optional components to configure: watermark
,seekbar
, fullscreen
config.locale
Type: string
Default: en
Description: Defines the UI locale configuration.
Determine the translation dictionary to be used
config.components
Type: Object
Default: -
Description: Defines the UI components configuration.
Optional components to configure: watermark
,seekbar
, fullscreen
config.components.watermark
Type: Object
{
img: string,
url: string,
placement: string,
timeout: number
}
Default:
{
img: '',
url: '',
placement: 'top-left',
timeout: 0
}
Description: Defines a watermark component.
config.components.watermark.img
Type: string
Default: ''
Description: The URL for the watermark image.
config.components.watermark.url
Type: string
Default: ''
Description: The URL to open on clicking the watermark.
config.components.watermark.placement
Type: string
Default: 'top-left'
Description: The placement of the watermark.
Possible values: 'top-left', 'top-right', 'bottom-left', 'bottom-right'
config.components.watermark.timeout
Type: number
Default: 0
Description: Timeout (in milliseconds) to hide the watermark.
config.components.seekbar
Type: Object
{
thumbsSprite: string,
thumbsWidth: number,
thumbsSlices: number
}
Description: Defines the seekbar component optional configuration.
config.components.seekbar.thumbsSprite
Type: string
Default: -
Description: The URL for the preview thumbnail image.
config.components.seekbar.thumbsWidth
Type: number
Default: -
Description: The width of each preview thumbnail slice.
config.components.seekbar.thumbsSlices
Type: number
Default: -
Description: The amount of slices that the preview thumbnail image will divided into.
config.components.fullscreen (Deprecated)
Moved under playback.inBrowserFullscreen
Type: Object
{
inBrowserFullscreenForIOS: boolean;
}
Default:
{
inBrowserFullscreenForIOS: false;
}