Skip to main content

Player Full Settings Structure

This section documents all the available options in the player configuration.

Playback settings

Example

"playback": {
"autoplay": {
"enabled": true,
"loop": {
"enabled": false
},
"mobile": true,
"onlyMuted": false
},
"noPause": false,
"onEnd": "redirect",
"resume": true,
"smartPause": true,
"smartPauseResume": true,
"skipAndRewindWithKeyboard": false,
},

Properties

PropertyTypeDescription
autoplay.enabledbooleanEnables autoplay on page load.
autoplay.loop.enabledbooleanIf true, the Smart Autoplay will be looped.
autoplay.mobilebooleanEnables autoplay on mobile devices.
autoplay.onlyMutedbooleanRestricts autoplay to muted playback only (required on most mobile browsers).
noPausebooleanPrevents the user from pausing the video.
onEndstringAction to perform when video ends. Allowed values: pause, redirect, replay, display_thumbnail.
resumebooleanResumes playback for returning viewers from where they left off.
smartPausebooleanAutomatically pauses the video when the user switches tabs.
smartPauseResumebooleanIf true, playback resumes automatically after a smart pause.
skipAndRewindWithKeyboardbooleanEnables keyboard shortcuts for skipping forward/backward (← / →).

UI Settings

The ui object contains configuration for the visual elements of the player, including colors, control bar, overlays, and more.

Colors

Example

"ui": {
"color": {
"foreground": "#ffffff",
"background": "#3974ff",
"force": true
},
...
}

Properties

PropertyTypeDescription
color.foregroundstringForeground color for overlays and UI elements (HEX format).
color.backgroundstringBackground color for overlays and UI elements (HEX format).
color.forcebooleanIf true, overrides all other color settings with the specified foreground and background.

Control Bar settings

Example

"ui": {
...
"controlBar": {
"fullscreen": {
"show": false,
"customFullscreen": {
"default": {
"enabled": true
},
"mobile": {
"enabled": true
},
"minimizeOnPause": true,
"expandOnPlay": true
}
},
"play": {
"show": true
},
"rewind": {
"show": true
},
"seekBar": {
"show": true,
"showToReturningViewers": false
},
"smartSeekBar": {
"show": false,
"desktopSpeed": 1,
"mobileSpeed": 1
},
"speedControl": {
"show": true
},
"qualityControl": {
"show": true
},
"volume": {
"show": true
},
"alwaysShow": false,
"playbackTimer": {
"show": true
},
"allowSeekNavigation": true,
"hideOnPause": false,
"accessibilityTooltips": true
},
...
}

Properties

PropertyTypeDescription
controlBar.fullscreen.showbooleanWhether the fullscreen button in the control bar is visible.
controlBar.fullscreen.customFullscreen.default.enabledbooleanEnables Focused Fullscreen on desktop.
controlBar.fullscreen.customFullscreen.mobile.enabledbooleanEnables Focused Fullscreen on mobile.
controlBar.fullscreen.customFullscreen.minimizeOnPausebooleanMinimizes Focused Fullscreen when the video is paused.
controlBar.fullscreen.customFullscreen.expandOnPlaybooleanExpands to Focused Fullscreen when the video starts playing.
controlBar.play.showbooleanShows or hides the play button.
controlBar.rewind.showbooleanShows or hides the rewind button.
controlBar.seekBar.showbooleanDisplays the seek bar.
controlBar.seekBar.showToReturningViewersbooleanIf true, hides the seek bar during the first view and shows it for returning viewers.
controlBar.smartSeekBar.showbooleanEnables the Smart Seek Bar feature.
controlBar.smartSeekBar.desktopSpeednumberSpeed multiplier for Smart Seek Bar on desktop.
controlBar.smartSeekBar.mobileSpeednumberSpeed multiplier for Smart Seek Bar on mobile.
controlBar.speedControl.showbooleanShows or hides the speed control.
controlBar.qualityControl.showbooleanShows or hides the quality selector.
controlBar.volume.showbooleanShows or hides the volume control.
controlBar.alwaysShowbooleanIf true, the control bar is always visible.
controlBar.playbackTimer.showbooleanShows or hides the playback timer.
controlBar.allowSeekNavigationbooleanEnables seeking through the video using the seek bar.
controlBar.hideOnPausebooleanHides the Control Bar when the video is paused.
controlBar.accessibilityTooltipsbooleanDisplays accessibility tooltips on hover.

Overlays

The overlay object controls additional UI overlays shown on top of the video, such as Big Play button, redirect message, resume message, Smart Autoplay overlay.

Example

"ui": {
...
"overlay": {
"play": {
"button": {
"show": true
},
"seekButtons": {
"show": false
}
},
"multiPause": {
"r_EtAxz0Zek1Zhcy": {
"from": 10,
"to": 20,
"source": "https://fast.vidalytics.com/video/LgjdU9my/2yA5q5AloqHQSpfc/img/custom-pause/processed_image-679eaa4407139.jpg"
},
"eICPC2bpcc5J3Ywd": {
"from": 30,
"to": 40,
"source": "https://fast.vidalytics.com/video/LgjdU9my/2yA5q5AloqHQSpfc/img/custom-pause/processed_image-679eaa4407139.jpg"
}
},
"redirect": {
"color": {
"foreground": "#ffffff",
"background": "#3974ff"
},
"show": true,
"timeout": 5,
"url": "https://vidalytics.com",
"text": "You will be redirected in %d seconds"
},
"resume": {
"button": {
"replay": {
"text": "Start from \u003Cbr\u003E Beginning?"
},
"resume": {
"text": "Continue \u003Cbr\u003E watching?"
}
},
"color": {
"foreground": "#ffffff",
"background": "#3974ff"
},
"show": true,
"text": "Welcome Back!\u003Cbr\u003EYou've already started\u003Cbr\u003Ewatching this video..."
},
"unmute": {
"color": {
"foreground": "#ffffff",
"background": "#3974ff"
},
"doReplay": true,
"goFullscreen": {
"default": {
"enabled": false
},
"mobile": {
"enabled": false
}
},
"mobile": {
"enabled": false,
"textBottom": {
"text": "Tap for Sound"
},
"textTop": {
"text": "Click To Unmute"
}
},
"textBottom": {
"text": "Click To Unmute"
},
"textTop": {
"text": "Your Video Is Playing"
},
"type": "box"
},
"expire": {
"enabled": true,
"dateExpire": "2025-05-24T00:00:00+00:00",
"textTop": {
"text": "This Video Has Expired"
},
"textBottom": {
"text": "Click Here to Go Back"
},
"link": {
"href": "",
"blank": false
},
"color": {
"foreground": "#ffffff",
"background": "#3974ff"
}
},
"playGate": {
"O4pSUihIm0ynf_Cu": {
"button": {
"color": {
"foreground": "#ffffff",
"background": "#d0021b"
},
"text": {
"text": "Keep Watching"
}
},
"color": {
"foreground": "#ffffff",
"background": "#3974ff"
},
"email": {
"show": true
},
"name": {
"show": true
},
"phone": {
"show": false
},
"skippable": false,
"textBottom": {
"text": "We hate spam and will never ever spam you. You can opt out at any time."
},
"textSkip": {
"text": "Skip this"
},
"textTop": {
"text": "Enter your info to get this video in your inbox."
},
"time": 10,
"type": "time",
"checkbox": false,
"checkboxRequired": false
}
}
},
...
}

Properties

PropertyTypeDescription
play.button.showbooleanDisplays the Big Play button.
play.seekButtons.showbooleanShows or hides skip forward/back buttons alongside the Big Play button.
multiPause.[id].fromnumberTime in seconds when the video should pause and the exit thumbnail appears.
multiPause.[id].tonumberTime in seconds when the video resumes playback.
multiPause.[id].sourcenumberURL of the exit thumbnail to display during the paused interval.
redirect.color.foregroundstringForeground color for the redirect overlay (HEX format).
redirect.color.backgroundstringBackground color for the redirect overlay (HEX format).
redirect.showbooleanEnables the redirect overlay after the video ends.
redirect.timeoutnumberDelay (in seconds) before redirection occurs.
redirect.urlstringURL to redirect the viewer to.
redirect.textstringText displayed to the viewer before redirection. Supports %d for countdown.
resume.showbooleanEnables the resume overlay for returning viewers.
resume.textstringMessage shown above the resume/replay buttons. Supports <br> tags.
resume.color.foregroundstringForeground color for the resume overlay (HEX format).
resume.color.backgroundstringBackground color for the resume overlay (HEX format).
resume.button.resume.textstringLabel for the resume button.
resume.button.replay.textstringLabel for the replay button.
unmute.color.foregroundstringForeground color for the Smart Autoplay overlay (HEX format).
unmute.color.backgroundstringBackground color for the Smart Autoplay overlay (HEX format).
unmute.doReplaybooleanIf true, replays the video from the beginning after unmuting.
unmute.goFullscreen.default.enabledbooleanIf true, the video enters fullscreen on desktop when unmuted.
unmute.goFullscreen.mobile.enabledbooleanIf true, the video enters fullscreen on mobile when unmuted.
unmute.mobile.enabledbooleanEnables a mobile-specific Smart Autoplay overlay.
unmute.mobile.textTop.textstringTop message shown in the Smart Autoplay overlay on mobile.
unmute.mobile.textBottom.textstringBottom message shown in the Smart Autoplay overlay on mobile.
unmute.textTop.textstringDefault top message shown in the Smart Autoplay overlay.
unmute.textBottom.textstringDefault bottom message shown in the Smart Autoplay overlay.
unmute.typestringSets the style of the Smart Autoplay overlay. Possible values: box, button, overlay, none, etc.
expire.enabledbooleanEnables the expiration overlay after a certain date.
expire.dateExpirestringISO date string when the video should expire.
expire.textTop.textstringTop message shown in the expire overlay.
expire.textBottom.textstringBottom message shown in the expire overlay.
expire.link.hrefstringURL that the expiration overlay button redirects to.
expire.link.blankbooleanIf true, opens the link in a new tab.
expire.color.foregroundstringForeground color for the expire overlay (HEX format).
expire.color.backgroundstringBackground color for the expire overlay (HEX format).
playGate.[id].color.foregroundstringForeground color for the Play Gate (HEX format).
playGate.[id].color.backgroundstringBackground color for the Play Gate (HEX format).
playGate.[id].button.color.foregroundstringForeground color for the button in the Play Gate (HEX format).
playGate.[id].button.color.backgroundstringBackground color for the button in the Play Gate (HEX format).
playGate.[id].button.text.textstringButton label text.
playGate.[id].email.showbooleanWhether to show the email input field.
playGate.[id].name.showbooleanWhether to show the name input field.
playGate.[id].phone.showbooleanWhether to show the phone input field.
playGate.[id].skippablebooleanAllows skipping the Play Gate if true.
playGate.[id].textTop.textstringTop message shown in the Play Gate.
playGate.[id].textBottom.textstringBottom message shown in the Play Gate.
playGate.[id].textSkip.textstringLabel for the skip button.
playGate.[id].timenumberTime (in seconds) when the Play Gate should appear.
playGate.[id].typestringType of Play Gate trigger. Possible values: time, exit.
playGate.[id].checkboxbooleanWhether to show a checkbox field.
playGate.[id].checkboxRequiredbooleanIf true, the checkbox must be selected to proceed.

ℹ️ Each playGate is uniquely identified by its key (e.g., playGate.O4pSUihIm0ynf_Cu). The ID must be taken from your account’s VidSettings page, as random values won't be recognized in our stats.

Closed Captions

Example

"ui": {
...
"closedCaptions": {
"default": {
"enabled": false,
"displayWhenMuted": false
},
"mobile": {
"enabled": true,
"displayWhenMuted": false
},
"source": "https://fast.vidalytics.com/video/LgjdU9my/ogMsWEWBw2ydWmYV/closed-captions/vtt-683235a3bf28b-sonic-the-hedgehog-3.vtt"
},
...
}

Properties

PropertyTypeDescription
closedCaptions.default.enabledbooleanEnables closed captions by default on desktop.
closedCaptions.default.displayWhenMutedbooleanIf true, captions are automatically shown when the video is muted (desktop only).
closedCaptions.mobile.enabledbooleanEnables closed captions by default on mobile devices.
closedCaptions.mobile.displayWhenMutedbooleanIf true, captions are automatically shown when the video is muted (mobile only).
closedCaptions.sourcestringURL to the .vtt subtitle file used for closed captions.

Thumbnails

The thumbnail section defines which image or video snippet is used as the preview before playback begins. It also allows specifying separate sources for desktop and mobile, as well as a placeholder image and override behavior.

Example

"ui": {
...
"thumbnail": {
"fullSize": false,
"default": {
"type": "image",
"source": "https://fast.vidalytics.com/video/LgjdU9my/ogMsWEWBw2ydWmYV/190859/181246__FFMPEG/thumb/thumbnail-5_0.jpg"
},
"mobile": {
"type": "image",
"source": "https://fast.vidalytics.com/video/LgjdU9my/ogMsWEWBw2ydWmYV/190859/181246__FFMPEG/thumb/thumbnail-5_0.jpg"
},
"forceDefault": true,
"placeholder": {
"source": "https://fast.vidalytics.com/video/LgjdU9my/ogMsWEWBw2ydWmYV/190859/181246__FFMPEG/thumb/preview-5_0.jpg"
}
},
...
}

Properties

PropertyTypeDescription
thumbnail.fullSizebooleanIf true, stretches the thumbnail to fill the player area entirely.
thumbnail.default.typestringType of the default thumbnail. Possible values: image, video.
thumbnail.default.sourcestringURL of the default thumbnail shown on desktop.
thumbnail.mobile.typestringType of the mobile thumbnail. Possible values: image, video.
thumbnail.mobile.sourcestringURL of the thumbnail shown on mobile devices.
thumbnail.forceDefaultbooleanIf true, always uses the default thumbnail on all devices (ignores mobile).
thumbnail.placeholder.sourcestringURL of a lightweight image shown as a placeholder while the video loads.

Chapters

The chapters section allows you to define logical video segments that are displayed in the player UI. Viewers can use them to quickly navigate to specific parts of the video.

Example

"ui": {
...
"chapters": {
"enabled": true,
"data": [
{
"time": 10,
"title": "Chapter 1"
},
{
"time": 30,
"title": "Chapter 2"
},
{
"time": 50,
"title": "Chapter 3"
},
{
"time": 70,
"title": "Chapter 4"
}
]
},
...
}

Properties

PropertyTypeDescription
chapters.enabledbooleanEnables the chapters feature in the player.
chapters.dataarrayAn array of chapter definitions. Each entry must include a time and title.
chapters.data[].timenumberTime in seconds when the chapter begins.
chapters.data[].titlestringTitle of the chapter displayed in the UI.

Player Themes

Specifies the player theme and associated style settings.

⚠️ This section describes a feature that is currently being developed.

Example

"ui": {
...
"theme": {
"name": "classic",
"style": {
"borderRadius": 5,
"opacityLevel": 5
}
}
...
}

Properties

PropertyTypeDescription
theme.namestringName of the theme to apply. Possible values: classic, sleek.
theme.style.borderRadiusnumberDefines how rounded the corners of the player UI elements are. This is a relative unit (not pixels). A value of 5 is roughly equal to 10px, and 8 corresponds to about 16px.
theme.style.opacityLevelnumberSets the overall opacity of the player UI. A value of 1 means almost fully transparent, and 5 means almost fully opaque. The default in the Vidalytics player is 5.

Call To Actions

The callToActions section defines custom buttons (CTAs) that appear during video playback.

Example

"ui": {
...
"callToActions": {
"eScsJwu6naOORcXl": {
"color": {
"background": "#3974ff",
"foreground": "#ffffff"
},
"colorHover": {
"background": "#2d57ba",
"foreground": "#ffffff"
},
"displayMode": "reserveSpace",
"link": {
"blank": false,
"href": "https://www.vidalytics.com/"
},
"shadow": true,
"showToReturningViewers": false,
"showOnlyWhenTriggeredBefore": false,
"autoScroll": false,
"scrollOffset": 0,
"time": {
"from": 0,
"to": 131
},
"title": "Let’s Do This",
"type": "time"
}
}
...
}

Properties

PropertyTypeDescription
callToActions.[id].color.backgroundstringBackground color of the CTA button (HEX format).
callToActions.[id].color.foregroundstringText color of the CTA button (HEX format).
callToActions.[id].colorHover.backgroundstringBackground color of the button on hover.
callToActions.[id].colorHover.foregroundstringText color of the button on hover.
callToActions.[id].displayModestringLayout mode of the CTA. Possible values: reserveSpace, expandContainer, onTop, customHTML.
callToActions.[id].link.hrefstringURL the button navigates to when clicked.
callToActions.[id].link.blankbooleanIf true, opens the link in a new tab.
callToActions.[id].shadowbooleanAdds a drop shadow to the button for visual emphasis.
callToActions.[id].showToReturningViewersbooleanIf true, hides the CTA during the first view and shows it for returning viewers.
callToActions.[id].showOnlyWhenTriggeredBeforebooleanIf true, the CTA appears only if it was triggered in a previous session.
callToActions.[id].autoScrollbooleanIf true, automatically scrolls to the section when the CTA appears.
callToActions.[id].scrollOffsetnumberOffset (in pixels) to apply when auto-scrolling.
callToActions.[id].time.fromnumberTime (in seconds) when the CTA should appear.
callToActions.[id].time.tonumberTime (in seconds) when the CTA should disappear.
callToActions.[id].titlestringText label displayed on the CTA button.
callToActions.[id].typestringTrigger type for the CTA. Possible values: time, exit.

ℹ️ Each callToAction is uniquely identified by its key (e.g., callToActions.eScsJwu6naOORcXl). The ID must be taken from your account’s VidSettings page, as random values won't be recognized in our stats.

Player Configuration

The player section defines core video playback settings, including media sources, dimensions, aspect ratio, and rendering behavior.

Example

"player": {
"startupQuality": "auto",
"lowerBandwidthUsage": false,
"media": {
"mp4": {
"source": "https://fast.vidalytics.com/video/LgjdU9my/ogMsWEWBw2ydWmYV/190859/181246__FFMPEG/mp4/video/480x270_h264_1000000/video.mp4"
},
"hls": {
"source": "https://fast.vidalytics.com/video/LgjdU9my/ogMsWEWBw2ydWmYV/190859/181246__FFMPEG/stream.m3u8"
}
},
"vtt": {
"seekingBar": "https://fast.vidalytics.com/video/LgjdU9my/ogMsWEWBw2ydWmYV/190859/181246__FFMPEG/vtt/sprites.vtt"
},
"aspectRatio": "16:9",
"height": 1080,
"width": 1920
},

Properties

PropertyTypeDescription
player.startupQualitystringPreferred startup quality. Possible values: auto, low, medium, high.
player.lowerBandwidthUsagebooleanIf enabled, reduces bandwidth usage by stripping high-quality resolution from the stream.
player.media.mp4.sourcestringDirect URL to the MP4 version of the video (used as a fallback).
player.media.hls.sourcestringURL to the HLS stream (.m3u8) used for adaptive streaming.
player.vtt.seekingBarstringURL to the VTT sprite file used for preview thumbnails on the seek bar.
player.aspectRatiostringAspect ratio of the player, in the format width:height (e.g., 16:9).
player.heightnumberHeight of the video in pixels.
player.widthnumberWidth of the video in pixels.

Video Metadata

The video section provides basic metadata about the video.

Example

"video": {
"title": "sonic-movie-2-trailer",
}

Properties

PropertyTypeDescription
video.titlestringInternal title of the video.

Triggers

The triggers section defines custom events that are executed at specific times during playback. These is be used to tag users and integrate with external systems.

Example

"triggers": {
"items": {
"gWqomkNCK8mDgTxE": {
"time": 10,
"name": "email tag",
"type": "time",
"params": {
"email": "user@example.com",
}
}
}
},

Properties

PropertyTypeDescription
triggers.itemsobjectA collection of individual trigger definitions, each keyed by a unique ID.
triggers.items.[id].timenumberTime (in seconds) when the trigger should fire.
triggers.items.[id].namestringName or label of the trigger.
triggers.items.[id].typestringTrigger type. Possible values: time, interactive, callToAction.
triggers.items.[id].paramsobjectParameters list to include with the trigger payload.

ℹ️ Each trigger is uniquely identified by its key (e.g., triggers.items.gWqomkNCK8mDgTxE). The ID must be taken from your account’s VidSettings page, as random values won't be recognized in our stats.