Configuration

HTML player configuration

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

Field nameTypeDescription
dataSourcestringURL pointing to json file with media data.
dataProviderobjectJavaScript object with media data.
advertisementobjectConfiguration object for player advertisement.
freewheelobjectConfiguration object for freewheel advertisement.
autoplayboolIndicates if player should play video after player load.
muteboolIndicates if player should start playback with muted sound.
startTimefloatIndicates initial start time of video.
qualitySelectionEnabledboolIndicates if quality selection should be enabled in player.
qualityLabelTypestringSelects if bitrate or resolution should be on quality list.
showSkinOnInitboolIndicates if player skin should be visible at player start.
shareButtonsstringList of comma separated social button names.
hideUIElementsstringList of comma separated elements to disable/hide.
endSplashstringName of end splash view to use.
subtitlesstringDefault subtitles language in ISO 3166-1 language code.
dvrWindowStartTimefloatHead constraint for DVR window for live streams.
dvrWindowEndTimefloatTail constraint for DVR window for live streams.

dataSource

Data type: string

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": "Tears of steel",
            "duration": 734.097415,
            "source": [
                {
                    "contentType": "movie",
                    "url": "http://bradmax.com/static/video/tos/440272.mpd",
                    "bitrate": 191999,
                    "width": 1280,
                    "height": 534
                }
            ],
            "splashImages": [
                {
                    "url": "http://bradmax.com/static/images/startsplash.jpg",
                    "width": 955,
                    "height": 397
                }
            ]
        }
    }

dataProvider

Data type: object

Description: JavaScript object with media object formatted structure.

advertisement

Data type: object

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

freewheel

Data type: object

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

autoplay

Data type: bool

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

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": {
            "title": "Tears of steel",
            "duration": 734.097415,
            "source": [ { "url": "http://bradmax.com/static/video/tos/440272.mpd" } ]
        }
    }

startTime

Data type: float

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": {
            "title": "Tears of steel",
            "duration": 734.097415,
            "source": [ { "url": "http://bradmax.com/static/video/tos/440272.mpd" } ]
        }
    }

qualitySelectionEnabled

Data type: bool

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".

qualityLabelType

Data type: string

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

ValueDescription
resolutionResolution will be presented on quality selection list (eg. 480p, 720p)
bitrateBitrate will be presented on quality selection list (eg. 600k, 1200k).

Default value: “resolution”

showSkinOnInit

Data type: bool

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

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

ValueDescription
embedShow pop up window with player embed code.
mailOpen system default email client.
facebookOpen Facebook share page with media url address and title.
twitterOpen Twitter share page with media url address and title.
linkedInOpen LinkedIn share page with media url address and title.

Example:

shareButtons: "embed,facebook,twitter",

hideUIElements

Data type: string

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

ValueDescription
fullscreenButtonButton for opening player in fullscreen mode.

Example:

hideUIElements: "fullscreenButton",

endSplash

Data type: string

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

ValueDescriptionPreview
reloadDefault value.reload
socialAvailable when “shareButtons” data is present in player configuration, else default ‘reload’.reload
countdownAvailable when “playList” data is present in provided media object, else default ‘reload’.reload
tilesAvailable when “playList” data is present in provided media object, else default ‘reload’.reload

subtitles

Data type: string

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",
{
    "subtitles": "fr",
    "dataProvider": {
        "title": "Tears of steel",
        "duration": 734.097415,
        "source": [
            { "url": "http://bradmax.com/static/video/tos/440272.mpd" }
        ]
    }
}

dvrWindowStartTime

Data type: float

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": "http://example.com/live_stream_with_dvr.m3u8" }
        ]
    }
}

dvrWindowEndTime

Data type: float

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": "http://example.com/live_stream_with_dvr.m3u8" }
        ]
    }
}