Configuration

HTML player configuration

Player has multiple options, which can be setup by configuration object. Please click on field name for see more detail.

dataSource

Data type: string

Configuration path: .dataSource

Description: URL pointing to json file with media data. For structure of media data see section Media object.

NOTE: If json file/service is on other domain than web page with player, then CORS headers are required response load. In other case browser will trigger an error that JavaScript has no permissions for loading them.

Example of json response:

{
    "dataProvider": {
        "title": "Example title",
        "duration": 734.097415,
        "source": [
            {
                "contentType": "movie",
                "url": "https://example.com/video.mpd",
                "bitrate": 191999,
                "width": 1280,
                "height": 534
            }
        ],
        "splashImages": [
            {
                "url": "https://example.com/startsplash.jpg",
                "width": 955,
                "height": 397
            }
        ]
    }
}

dataProvider

Data type: object or array

Configuration path: .dataProvider

Description: Configuration defining what and how multimedia (video) should be displayed by the player. For more details see Data Provider documentation pages.

Examples of Data Provider configuration:

• Basic Data Provider example
• Playlist Data Provider example
• LiveStream Data Provider examples

advertisement

Data type: object

Configuration path: .advertisement

Description: Configuration object defining which and how should be displayed advertisements by player. For more details see Advertisements documentation pages.

freewheel

Data type: object

Configuration path: .freewheel

Description: Configuration object defining which and how freewheel advertisements should be displayed by player. For more details see Freewheel section.

autoplay

Data type: bool

Configuration path: .autoplay

Description: Field indicates if player should start playback just after player setup. If “true” then video starts just after player setup. In other case user has to click “play” button for playback. By default option is disabled.

NOTE: This option is not working on mobile devices. All mobile devices require user action for starting video playback. It is limitation of mobile device platforms, which cannot be bypass.

mute

Data type: bool

Configuration path: .mute

Description: Field indicates if player should be muted at start. If “true” then video starts with muted sound.

NOTE: Currently “autoplay” is blocked by most of browsers. It is possible to bypass this constraint, when video is muted. Use this option ("muted": true) for automatic starting video playback.

Example of use:

{
    "autoplay": true,
    "mute": true,
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

volume

Data type: number

Configuration path: .volume

Description: Initial video volume: 0.0 - muted, 1.0 - full volume.

Example of use:

{
    "volume": 0.7,
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

startTime

Data type: float

Configuration path: .startTime

Description: This field define initial time of video, where playback should start. For ordinary streams it is time of video, for live events streaming it is timestamp (in seconds, with fraction of second).

Example of use:

{
    "startTime": 120.66,
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

qualitySelectionEnabled

Data type: bool

Configuration path: .qualitySelectionEnabled

Description: This field enable / disable possibility for user to change video quality - if available for played media. If set to “true” then button with quality selection will be visible on player. In other case selection will be hidden and player will choose quality automatically. Default value for this field is "true".

Example:

{
    "qualitySelectionEnabled": true,
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

qualityLabelType

Data type: string

Configuration path: .qualityLabelType

Description: This field choose if bitrate or screen resolution, should be present on quality selection list.

Default value: “resolution”

Example:

{
    "qualityLabelType": 'bitrate',
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

qualityInitialBandwidthKbs

Data type: number

Configuration path: .qualityInitialBandwidthKbs

Description: This field choose initial bitrate for player, when there is no knowledge about user internet connection speed. This value has only affect on playback start. Later quality will be adjusted to user connection. Value is defined in [kb/s].

Tip: By setting this parameter you can adjust player start behavior. By setting:

Default value: 1000 (1Mb/s, 125kB/s)

Example:

{
    "qualityInitialBandwidthKbs": 100,
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

showSkinOnInit

Data type: bool

Configuration path: .showSkinOnInit

Description: When option enabled then player skin is visible after player setup and user do not need to click / tap / hover with mouse over player for showing player controls. By default this option is disabled.

shareButtons

Data type: string

Configuration path: .shareButtons

Description: List of comma separated social button names, which should be presented on player screen.

Example:

{
    "shareButtons": "embed,facebook,twitter",
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

Check skin.share to see how to apply custom icons for share buttons.

hideUIElements (deprecated)

DEPRECATED in favors of fullscreenEnabled

Data type: string

Configuration path: .hideUIElements

Description: List of comma separated elements names to hide in player. Currently only: “fullscreenButton” support this feature.

Example:

{
    "hideUIElements": "fullscreenButton",
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

endSplash

Data type: string

Configuration path: .endSplash

Description: Name of end splash view to use. Below are list of available values. By default ‘reload’ is selected.

Value	Description	Preview
reload	Default value.
social	Available when “shareButtons” data is present in player configuration, else default ‘reload’.
countdown	Available when “playList” data is present in provided media object, else default ‘reload’.
tiles	Available when “playList” data is present in provided media object, else default ‘reload’.

subtitles

Data type: string

Configuration path: .subtitles

Description: Defines default language for subtitles. When defined this language will be automatically selected, when subtitles for this language are present. Language is defined as two letters (alpha-2) ISO 3306-1 language code (for eg. “fr” for France).

{
    "subtitles": "fr",
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

audio

Data type: string

Configuration path: .audio

Description: Defines default audio track language. When defined this language will be automatically selected, when audio track for this language is present. Language is defined as two letters (alpha-2) ISO 3306-1 language code (for eg. “fr” for France).

{
    "audio": "fr",
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

locale

Data type: string

Configuration path: .locale

Description: Defines language code, which should be used for player messages on player skin (eg. error message). Default: 'en’. Available values: da, en, fi, pl, no, sv

{
    "locale": "da",
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

dvrWindowStartTime

Data type: float

Configuration path: .dvrWindowStartTime

Description: This option is only for live streams with DVR window. It is additional constraint for it. When unix timestamp defined for this option then user is not able to seek before this moment. For user, video starts after this time and he will be not aware that available DVR window is wider.

{
    "dvrWindowStartTime": 1537444800,
    "dataProvider": { "source": [ { "url": "https://example.com/live_stream_with_dvr.m3u8" } ]}
}

dvrWindowEndTime

Data type: float

Configuration path: .dvrWindowEndTime

Description: This option is only for live streams with DVR window. It is additional constraint for it. When unix timestamp defined for this option then user is not able to seek after this moment. For user, video ends after this time and he will be not aware that available DVR window is wider.

{
    "startTime": 1537444800,
    "dvrWindowStartTime": 1537444800,
    "dvrWindowEndTime": 1537448400,
    "dataProvider": { "source": [ { "url": "https://example.com/live_stream_with_dvr.m3u8" } ]}
}

dvrMinLenForSeekbar

Data type: float

Configuration path: .dvrMinLenForSeekbar

Description: Optional - Defines minimal DVR length for showing seek bar. For shorter than defined seeking will be hidden. For longer values users will be able to seek back over the DVR window to see previous video moments. It is used for overriding default values (600 sec - 10 min).

Default value: 600 sec

{
    "dvrMinLenForSeekbar": 900,
    "dataProvider": { "source": [ { "url": "https://example.com/live_stream_with_dvr.m3u8" } ]}
}

isDvrWallTimeMode

Data type: bool

Configuration path: .isDvrWallTimeMode

Description: Indicates if wall-time should be presented during live stream transmission. It is most useful for IP TV transmission. By default it is disabled for not confusing users for ordinary live streams.

Default value: false

{
    "isDvrWallTimeMode": true,
    "dataProvider": { "source": [ { "url": "https://example.com/live_stream_with_dvr.m3u8" } ]}
}

iosInlineVideo

Data type: bool

Configuration path: .iosInlineVideo

Description: This option indicates if video should be inlined for iPhone devices (default true). When “iosInlineVideo” is set to false, then playback will be performed with default iOS behavior. For modr information see Apple documentation

NOTE: On iOS Safari browser setting autoplay to true and mute to true will force “iosInlineVideo” to be true event if it was set as false in player configuration.

Default value: true

{
    "iosInlineVideo": true,
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

bradmaxAnalytics

Data type: object

Configuration path: .bradmaxAnalytics

Description: For more information please check Analytics documentation page.

bradmaxAnalytics.gdprAgreeRequired

Data type: bool

Configuration path: .bradmaxAnalytics.gdprAgreeRequired

Description: This option indicates if user agree for cookie is required. If gdprAgreeRequired:true, then cookies will not be used for users statistics and additional agree “gdprAgreeForCookie” is required for using them. If gdprAgreeRequired:false, then it is assumed that cookie can be used without user agree. This option has to be defined in “bradmaxAnalytics” settings scope - see example below.

Default value: false

{
    "bradmaxAnalytics": {
        "gdprAgreeRequired": true,
        "gdprAgreeForCookie": true
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

bradmaxAnalytics.gdprAgreeForCookie

Data type: bool

Configuration path: .bradmaxAnalytics.gdprAgreeForCookie

Description: This option works together with gdprAgreeRequired option. When gdprAgreeRequired:true, then setting this option is required for using cookies for user statistics. gdprAgreeForCookie:true indicates user agree for using cookie for statistics purpose. This option has to be defined in “bradmaxAnalytics” settings scope - see example below.

Bradmax cookies names used for statistics purpose: _bamcdc, _bame, _baml .

Default value: false

{
    "bradmaxAnalytics": {
        "gdprAgreeRequired": true,
        "gdprAgreeForCookie": true
    },
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

googleAnalytics

Data type: object

Configuration path: .googleAnalytics

Description: For more information please check Google Analytics documentation page.

skin

Data type: object

Configuration path: .skin

Description: Configuration object for rendering HTML player skin. For more details please check HTML Skin Configuration page.

skinColor (deprecated)

DEPRECATED in favors of skin.color

Data type: string

Configuration path: .skinColor

Description: This parameter can be used to override player skin defined color. Color defined in HEX format "#RRGGBB".

{
    "skinColor": "#FF0000",
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

logoFile

Data type: string

Configuration path: .logoFile

Description: Image URL for custom player logo. It overwrites player logo configuration - if defined.

{
    "logoFile": "https://example.com/logo.png",
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

logoLink

Data type: string

Configuration path: .logoLink

Description: Page URL, which should be open after clicking logo on player.

logoLinkTarget

Data type: string

Configuration path: .logoLinkTarget

Description: If not defined any value, then clicking logo will open target page (logoLink) in current player page. Usually it is good to define “_blank” for instruct browser to open target page in new browser tab.

{
    "logoFile": "https://example.com/logo.png",
    "logoLink": "http://bradmax.com",
    "logoLinkTarget": "_blank",
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

Clicking logo will open “http://bradmax.com” page in new tab.

logoAutohide

Data type: bool

Configuration path: .logoAutohide

Description: Indicates if logo should hide with player skin. By default logo will be kept visible even player skin is hidden. If logoAutohide:true, then logo will hide with player skin.

Default value: false

logoYPosition

Data type: string ("top" or "bottom")

Configuration path: .logoYPosition

Description: Vertical logo configuration. Available values: "top", “bottom”

Default value: “top”

logoXPosition

Data type: string ("left" or "right")

Configuration path: .logoXPosition

Description: Vertical logo configuration. Available values: "left", “right”

Default value: “left”

{
    "logoFile": "https://example.com/logo.png",
    "logoLink": "http://bradmax.com",
    "logoLinkTarget": "_blank",
    "logoYPosition": "bottom",
    "logoXPosition": "right",
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

Logo will be displayed on bottom right corner of player (over player controls).

logoAutohide

Data type: bool

Configuration path: .logoAutohide

Description: This option indicates if brand logo should hide with hiding skin during video playback.

Default value: (predefined in player configuration in bradmax client panel)

{
    "logoAutohide": false,
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

logoVisibleDuringAdPlayback

Data type: bool

Configuration path: .logoVisibleDuringAdPlayback

Description: This option indicates if brand logo should be visible during advertisement playback.

Default value: false

{
    "logoVisibleDuringAdPlayback": true,
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

pictureInPictureButtonVisible

Data type: bool

Configuration path: .pictureInPictureButtonVisible

Description: Enables additional button in player skin for enabling/disabling Picture-in-Picture mode. When PIP mode is enabled then player is detached from browser and user can watch video over other screens.

NOTE: PIP button will appear only when browser supports such feature and it can be enabled. Button appears only, when browser allows PIP mode for video. Usually after video playback start (user action is required). Button is not available for FireFox browser. FireFox browser has own Picture-in-Picture mechanics for video and it cannot be controlled by custom buttons or JavaScript.

Default value: true (when plugin is active)

Plugin active: false (by default plugin is disabled and has to be enabled in player configurator

NOTE: If player is generated thru Bradmax Admin Panel, then “Picture-in-Picture” feature must be enabled.

{
    "pictureInPictureButtonVisible": true,
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

videoCastEnabled

Data type: bool

Configuration path: .videoCastEnabled

Description: Enables video casting for Chromecast and AirPlay technology.

When enabled:

• Safari browser can cast video to AppleTV.
• Other browsers supporting Chromecast are able to cast video to Chromecast devices.

Web player becomes a remote controller for this video.

Technological limits: AirPlay icon appears in player control bar only, when AirPlay device (eg. AppleTV) is detected in the same local network (eg. same WiFi network). Chromecast icon appears in player control bar, when browser is supporting such technology - even when no Chromecast receiver device is not detected in the same local network. Chromecast icon will appear only on secured web pages (pages hosted with HTTPS) with exception for localhost (for testing it can be HTTP).

Default value: true (when plugin is active)

Plugin active: false (by default plugin is disabled and has to be enabled in player configurator)

NOTE: If player is generated thru Bradmax Admin Panel, then “Chromecast / AirPlay” feature must be enabled.

{
    "videoCastEnabled": true,
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

Important note for video providers about Chromecast

Chromecast devices got more restricted CORS policy for video content than other devices. Chromecast devices are ignoring Access-Control-Allow-Origin header with wildcards “*”. Header Access-Control-Allow-Origin has to return exact receiver domain (typically https://www.gstatic.com).

More details: https://developers.google.com/cast/docs/chrome_sender/advanced#cors_requirements

fullscreenEnabled

Data type: bool

Configuration path: .fullscreenEnabled

Description: Enables video fullscreen feature.

Default value: true

NOTE: If player is generated thru Bradmax Admin Panel, then “Chromecast / AirPlay” feature must be enabled.

Example for disabling video fullscreen feature.

{
    "fullscreenEnabled": false,
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

fullscreenOrientationLock

Data type: string

Configuration path: .fullscreenOrientationLock

Description: Enables fullscreen orientation lock feature. The video player will try to utilize Screen Orientation API to rotate video player while in fullscreen mode.

for more info about values please check this page.

Default value: null

NOTE: Not every device and browser supports this feature. For more information on browser support, please check this page.

{
    "fullscreenOrientationLock": "landscape",
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

playbackRateEnabled

Data type: bool

Configuration path: .playbackRateEnabled

Description: Enables changing video playback rate feature.

Default value: false

Example for enabling playback rate feature.

{
    "playbackRateEnabled": true,
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

saveBandwidthMode

Data type: bool

Configuration path: .saveBandwidthMode

Description: Enables network bandwidth saving mode. The video player will try to limit the video quality based on the dimensions of the container and lower the playback quality when running on a web page that is not visible to the user.

Default value: false

Example for enabling save bandwidth mode feature.

{
    "saveBandwidthMode": true,
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

showErrorDetails

Data type: bool

Configuration path: .showErrorDetails

Description: Enabling/Disabling showing error details for end user. By default this option is enabled.

Default value: true

Example for hiding error details.

{
    "showErrorDetails": false,
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}

contextMenuDisabled

Data type: bool

Configuration path: .contextmenu

Description: Disables player custom context menu.

Default value: false

Example for disabling player custom context menu feature.

{
    "contextMenuDisabled": true,
    "dataProvider": { "source": [ { "url": "https://example.com/video.mpd" } ]}
}