Which player UI configuration should I use?

There are multiple options available to configure the Player UI. Which one is the right one for you usually depends on the level of customisation you need.

1. Use an existing UI Variant

Check if one of our standard UI designs already fulfills your needs and use the corresponding build methods in the UIFactory namespace to select which of these UIVariants to display. Each UIVariant has a different condition to determine when it should be visible. To evaluate the condition, each variant will be called a UIConditionContext. When the condition is met, the according UIVariant will be activated.

buildDefaultUI	buildDefaultTvUI	buildDefaultSmallScreenUI	buildDefaultCastReceiverUI
modernUI	modernTvUI	modernSmallScreenUI	modernCastReceiverUI
modernAdsUI	modernTvAdsUI	modernSmallScreenAdsUI
modernSmallScreenUI
modernSmallScreenAdsUI

For example, by using buildDefaultTvUI(player), during normal playback the modernTvUI UIContainer will be displayed and during ads playback the modernTvAdsUI UIContainer will be displayed:

player.load(source).then(function () {
  currentUiManager = bitmovin.playerui.UIFactory.buildDefaultTvUI(player);
});

You can also pass a UIConfig object to the build function to customize some aspects of the default UI behavior.

2. Configure Components behaviors

1. You can add a UIConfig object to your PlayerConfig to customize some aspects of the default UI behavior. Here are some aspects that you can customize this way:

• Timeline markers
• Localisation
• Custom error messages

2. You can configure the behavior of the specific UI components according to your needs: For example, you can:

• Move some buttons from the control bar (bottom right) to the title bar (top right) and change the time label on the right-hand side of the seek bar to show the remaining time instead of the duration: Build a custom UI structure
• Add to the control bar a rewind and fast-forward button with custom seek duration: Bitmovin Player UI » Rewind/Fast-Forward. Here is an extract of the necessary code:

const conf = { key: '<YOUR PLAYER KEY>', ui: false };
var source = {
  dash: 'https://cdn.bitmovin.com/content/assets/sintel/sintel.mpd',
  hls: 'https://cdn.bitmovin.com/content/assets/sintel/hls/playlist.m3u8',
  poster: 'https://cdn.bitmovin.com/content/assets/sintel/poster.png',
};

var player = new bitmovin.player.Player(document.getElementById('player-container'), conf);
var uiManager = new bitmovin.playerui.UIManager(player, [{
  ui: buildUI(),
}]);

player.load(source);

function buildUI() {
	...
	let controlBar = new bitmovin.playerui.ControlBar({
	...
          new bitmovin.playerui.QuickSeekButton({ seekSeconds: -10 }),
          new bitmovin.playerui.QuickSeekButton({ seekSeconds: 10 }),
	...
	})
}

Here is a list of the available Components that you can configure. You can find the related Configurations in our API doc in the sidebar under the Configs section.

3. Create your own Bitmovin UI

If you want to create new UI Components or customize the UI appearance, you can fork our Bitmovin Player UI repository and apply the necessary changes.

Add a new UI Component

Components provide a specific functionality and usually consist of two files: a TypeScript .ts file containing control code and API interaction with the player, and a SASS .scss file containing the visual style. Specific use cases necessitate the incorporation of customized UI elements, which can be done by creating a new .ts file within the components folder (src/ts/components). Here you can find a full example:

• Add a custom Button component

Customize the UI appearance

If you just want to update a few elements without having to build an entire UI, all elements can be restyled using CSS.
You can find all CSS classes used in the UI in our documentation: Player UI CSS Class Reference. You may even want to have a look at our SCSS source files. Here you can find 2 examples:

• Apply your branding
• Dynamically change the color of the seekbar: UI Styling Demo.