With the 7th major release of the player, the default user interface has been completely redesigned and is built upon our new open-source UI framework. The new UI framework dramatically improves the possibilities for skinning the player and creating custom UI layouts. The old way of customizing the the player’s appearance with a JSON configuration has been removed and skin styling is now done directly with CSS, the standard way of styling web applications.
Because the new default UI in player V7 is built from scratch, with a brand new design and layout in a sleek and modern look, it does not make sense to translate old JSON configurations to the new UI. The new UI framework however ships with a second skin, the legacy skin that ports the old V6 UI design to the new UI framework. If you want to stick with the old UI design, you can follow this guide which shows how to use the legacy skin and how to translate old JSON configurations to CSS for the legacy skin on the new UI framework.
Legacy Skin
If you are a user of player V6 or earlier and want to upgrade to the V7 player while keeping the old V6 UI, the V7 UI framework contains a legacy skin which ports the old UI skin to the new framework. The V7 legacy skin looks similar to the old V6 skin, but is built upon the new UI framework and uses CSS instead of the old JSON configuration for styling.
To use the legacy skin with the V7 player, you need to deactivate the built-in default skin and attach the legacy skin by yourself. This can be done with the following JavaScript code:
var config = { source: { ... }, style: { ux: false // disable the built-in UI } }; player.setup(config).then(function (player) { // Attach legacy UI skin to player bitmovin.playerui.UIManager.Factory.buildLegacyUI(player); });
JSON to CSS Migration Table
If you have customized your player V6 skin with a JSON config, you need to translate the customizations to CSS styles of the player V7 UI framework. The following table lists properties of the JSON skin configuration and their corresponding CSS classes and properties in the V7 UI framework.
JSON Property | CSS Class | CSS Property |
---|---|---|
Logo | ||
screenLogoImage | .bmpui-ui-watermark |
background-image |
screenLogoUrl | No equivalent setting in new UI. URL can only be changed through a custom UI setup, clicking can be deactivated by setting the CSS pointer-events: none. | |
Player | ||
screenBackgroundColor | No equivalent setting in new UI. | |
Play Button Overlay | ||
overlayPlayControl | .bmpui-ui-hugeplaybacktogglebutton .bmpui-image |
background-image |
overlayPlayControlHover | .bmpui-ui-hugeplaybacktogglebutton .bmpui-image:hover |
background-image |
Chromecast Button | ||
panelCastControl | .bmpui-ui-casttogglebutton |
background-image |
panelCastControlHover | .bmpui-ui-casttogglebutton:hover |
background-image |
Play Button | ||
panelPlayControl | .bmpui-ui-playbacktogglebutton |
background-image |
panelPlayControlHover | .bmpui-ui-playbacktogglebutton:hover |
background-image |
panelPauseControl | .bmpui-ui-playbacktogglebutton.bmpui-on |
background-image |
panelPauseControlHover | .bmpui-ui-playbacktogglebutton.bmpui-on:hover |
background-image |
Volume Button | ||
panelMuteControl | .bmpui-ui-volumetogglebutton |
background-image |
panelMuteControlHover |
.bmpui-ui-volumetogglebutton:hover |
background-image |
panelMuteOffControl | .bmpui-ui-volumetogglebutton.bmpui-on |
background-image |
panelMuteOffControlHover | .bmpui-ui-volumetogglebutton.bmpui-on:hover |
background-image |
Settings Button | ||
panelSettingsControl | .bmpui-ui-settingstogglebutton |
background-image |
panelSettingsControlHover | .bmpui-ui-settingstogglebutton:hover |
background-image |
Full Screen Control | ||
panelFullScreenControl | .bmpui-ui-fullscreentogglebutton |
background-image |
panelFullScreenControlHover | .bmpui-ui-fullscreentogglebutton:hover |
background-image |
panelExitFullScreenControl | .bmpui-ui-fullscreentogglebutton.bmpui-on |
background-image |
panelExitFullScreenControlHover | .bmpui-ui-fullscreentogglebutton.bmpui-on:hover |
background-image |
Control Bar | ||
controlPanelHeight | .bmpui-ui-controlbar |
height |
controlPanelColor | .bmpui-ui-controlbar |
background-color |
Progress Bar | ||
progressBarColor | .bmpui-ui-seekbar .bmpui-seekbar-backdrop |
background-color |
progressBufferingColor | .bmpui-ui-seekbar .bmpui-seekbar-bufferlevel |
background-color |
progressElapsedColor | .bmpui-ui-seekbar .bmpui-seekbar-playbackposition |
background-color |
Progress Pointer | ||
progressBarPointer | .bmpui-ui-seekbar .bmpui-seekbar-playbackposition-marker |
background-image |
progressBarPointerHover | .bmpui-ui-seekbar .bmpui-seekbar-playbackposition-marker:hover |
background-image |
Elapsed Time Font Settings | ||
elapsedTextFont | .bmpui-ui-playbacktimelabel |
font-family |
elapsedTextSize | .bmpui-ui-playbacktimelabel |
font-size |
elapsedTextColor | .bmpui-ui-playbacktimelabel |
color |
Settings Panel | ||
settingsBgColor | .bmpui-ui-settings-panel |
background-color |
settingsCornerRadius | .bmpui-ui-settings-panel |
border-radius |
optionsBgColor | .bmpui-ui-settings-panel .bmpui-ui-selectbox |
background-color |
optionsFont | .bmpui-ui-settings-panel .bmpui-ui-selectbox |
font-family |
optionsSize | .bmpui-ui-settings-panel .bmpui-ui-selectbox |
font-size |
optionsTextColor | .bmpui-ui-settings-panel .bmpui-ui-selectbox |
color |
labelBgColor | .bmpui-ui-settings-panel .bmpui-ui-label |
background-color |
labelFont | .bmpui-ui-settings-panel .bmpui-ui-label |
font-family |
labelTextSize | .bmpui-ui-settings-panel .bmpui-ui-label |
font-size |
labelTextColor | .bmpui-ui-settings-panel .bmpui-ui-label |
color |
Volume Bar | ||
volumeBarPanelColor | .bmpui-ui-volumecontrolbutton .bmpui-ui-volumeslider |
background-color |
volumeBarLevelColor | .bmpui-ui-volumecontrolbutton .bmpui-ui-volumeslider .bmpui-seekbar-playbackposition |
background-color |
volumeBarBackgroundColor | .bmpui-ui-volumecontrolbutton .bmpui-ui-volumeslider .bmpui-seekbar-backdrop |
background-color |
Volume Level Pointer | ||
volumePointer | .bmpui-ui-volumecontrolbutton .bmpui-ui-volumeslider .bmpui-seekbar-playbackposition-marker |
background-image |
volumePointerHover | .bmpui-ui-volumecontrolbutton .bmpui-ui-volumeslider .bmpui-seekbar-playbackposition-marker:hover |
background-image |
Example
The following example demonstrates how to translate a custom control bar background color from the old JSON config to a CSS style.
V6 JSON config:
{ "controlPanelColor": "#123456" }
V7 CSS style:
.bmpui-ui-controlbar { background-color: #123456; }