Player - Advanced settings

About

The Advanced Settings let you manually adjust player settings that aren’t available in the main interface. This guide walks you through some key customizations to help you tailor the player’s behavior to your needs.

Access the advanced settings

1. Log in to your KMC and click the Studio tab. 



The Player Studio page displays. 

2. Click the player you want to edit from the list (or use the search bar in the top right).

If you haven't created a player yet, check out our article Create a player for guidance.



The player settings display.



3. Scroll to the bottom of the player settings and click Advanced Settings.



The Advanced Configuration panel displays.



When you have finished configuring the settings, don't forget to click Save at the top right before exiting.

Full-screen mode (iPhone and iPad only)

Enable fullscreen playback within the browser, instead of switching to the device’s built-in player.

1. In the Advanced Settings tab, hover over playback and click the green + icon. 



The Key Name box displays.

2. In the box, enter inBrowserFullscreen and click the green check mark or hit 'enter' on your keyboard.



You’ll see the new setting listed.



3. Hover over the setting and click the green edit icon.



4. In the box that opens, type true, then click the small green checkmark.



The value displays.



5. Click Save to apply your changes.

Optional: Disable double-click to enter fullscreen

By default, double-clicking the player puts the video into fullscreen.

• To turn this off, follow the same steps as above, but in the Key Name box, enter config.components.fullscreen.disableDoubleClick
• Set the value to true.

Seek bar preview thumbnails

Show thumbnail previews when users hover over the timeline.

1. In the Advanced Settings tab, hover over ui then click the green + icon. 



2. In the Key Name box, enter: config.ui.components.seekbar.thumbsSprite, then click the green checkmark or press 'Enter' on your keyboard.



You’ll see the new setting listed.



3. Hover over the setting and click the green edit icon.



A box containing a null value displays.



4. Remove the null value and paste in the URL of your thumbnail image, then click the green checkmark.



The string displays.



5. Click Save.

To turn this feature off, put an empty string ('  ') in the value field.

Optional: Adjust thumbnail display settings

You can fine-tune how thumbnails appear using the following keys:

Thumbnail width

Key Name: config.ui.components.seekbar.thumbsWidth

Example value: 164

Thumbnail height

Key Name: config.ui.components.seekbar.thumbsHeight

Example value: 92

Number of slices (frames)

Key Name: config.ui.components.seekbar.thumbsSlices

Example value: 100

Volume

Set the default player volume. For the user guide, see Playback Functionality.

1. In the Advanced Settings tab, hover over playback then click the green + icon. 



The Key Name box displays.

2. In the box, enter Volume, then click the green checkmark or press 'Enter' on your keyboard.



You’ll see the new setting listed.

3. Hover over the setting and click the green edit icon.



4. In the box that opens, enter a value between 0 and 1 (for example, 0.5 for 50% volume), then click the small green checkmark.



5. Click Save.
Volume assigned a value of 0.5






Player volume showing 0.5

Playback speed

Defines the playback speeds available to users (e.g., slow motion or fast forward).

Set as an array - 1.0 is normal speed. Example: [0.5, 1, 1.5, 2]

For the user guide, see Player controls.

1. In the  Advanced Settings, hover over the playback object then click the green + icon. 



The Key Name box displays.

2. In the box, enter playbackRates, then click the green checkmark or press 'Enter' on your keyboard.



You’ll see the new setting listed.

3. Hover over the setting and click the green edit icon.



A box containing a null value displays.



4. Remove the null value and enter the desired values inside square brackets, for example: [0.5, 1, 1.5, 1.75, 2, 3], then click the small green check mark. 

To include just one custom speed, add 1 first, for example, [1, 1.2].



The result looks like this:

Configured playback rates




Playback rates displayed on player

Audio language

Set the default audio track language.

1. In the Advanced Settings, hover over playback then click the green+ icon.



The Key Name box displays.

2. In the box, enter audioLanguage, then click the green checkmark or press 'enter' on your keyboard.



You’ll see the new setting listed.

3. Hover over the setting and click the green edit icon.



A box containing a null value displays.



4. Remove the null value and enter the desired values: eng for English, es for Spanish, etc.



5. Click the green check mark to save.
Configuration set to English


Player audio language selector

If the value auto is set and an audio track with the specified language is available, it will be selected as the initial audio track.

var config = {  playback: {    audioLanguage: 'auto'  }
};

Video resolution (Safari only)

To enable resolution changes in Safari on Mac.

1. In the  Advanced Settings, hover over the playback object then click the green + icon. 



The Key Name box displays.

2. In the box, enter preferNative, then click the green checkmark or press 'Enter' on your keyboard.



You’ll see the new setting listed.

Once "preferNative" is added, video resolution adjustment can be performed as follows:

1. hover over ui then click the green + icon. 



The Key Name box displays.

2. In the box, enter settings, then click the green checkmark or press 'Enter' on your keyboard.



You’ll see the new setting listed.



3. Hover over the setting and click the green edit icon.



A box containing a null value displays.



4. Remove the null value and paste in showQualityMenu then click the green checkmark.

Custom error message 

See our article How to custom the player error message.

Custom tag for VR mode

By default, any video tagged 360 triggers VR mode. If you want to avoid triggering it accidentally (for example, on math or technical videos), you can define your own tags.

1. In the Advanced Settings, hover over provider then click the green+ icon.



The Key Name box displays.

2. In the box, enter vrTag, then click the green checkmark or press 'enter' on your keyboard.



You’ll see the new setting listed.

3. Hover over the setting and click the green edit icon.



A box containing a null value displays.



4. Remove the word null and type your custom tag, for example, my__360__tag (do not add quotes - the system will add them automatically).



5. Click the green check mark to save your changes.

Now the VR button will only appear for videos that specifically have the tag you set, preventing incorrect playback in VR mode.

For more details on configuring VR playback, see 360 & VR.

Change the default caption font

You can customize how captions appear in your player by changing the default font style, size, and color. This lets you better match your player to your branding or improve readability for your viewers.

1. In the Advanced Settings, hover over text then click the green+ icon.



The Key Name box displays.

2. In the box, enter textStyle, then click the green checkmark or press 'enter' on your keyboard.



You’ll see the new setting listed.

3. Hover over the setting and click the green edit icon.



A box containing a null value displays.



4. Delete the word null, and begin typing your style settings exactly as shown below (make sure to include the opening and closing curly brackets { }), then click the small green checkmark.



It will look something like this:



Tips while typing: Make sure each line ends with a comma except the last one before a closing bracket. Use double quotes " around all key names and string values. Use square brackets [] for color (as well as edge values if used, as shown in the advanced example below).

Here are the results of our configuration:

Here's a more advanced example that includes additional style options:

"text": {
  "textTrackDisplaySetting": {
   "align": "center"
  },
  "textStyle": {
   "fontFamily": "sans-serif",
   "fontSize": "100%",
   "textAlign": "center",
   "fontColor": [
    255,
    255,
    255
   ],
   "fontOpacity": 1,
   "backgroundColor": [
    0,
    0,
    0
   ],
   "backgroundOpacity": 0,
   "fontEdge": [
    [34,34,34,2,2,3],
    [34,34,34,2,2,4],
    [34,34,34,2,2,5]
   ]
  }
},

This setup corresponds to these options in the player:

Was this article helpful?

Thank you for your feedback!

Name

Email

Submit your feedback

Thank you! Your comment has been submitted.