Install and initialize MKCustomUI

Use the MKCustomUI plugin to replace the default MKPlayer playback UI with a customizable UI built on Bitmovin Player UI V3.

1. Install the plugin

Install the package in your project:

npm install @mediakind/mkplayer-customui-plugin

2. Import the plugin

Import MKCustomUI from the plugin in your source code.

3. Disable the default player UI

Set playerConfig.ui to false when using MKCustomUI:

const playerConfig = {
  ...otherConfigs,
  ui: false, // disable default Bitmovin UI
};

4. Initialize MKPlayer

Create the player instance with your video container and config:

const player = new mkplayer.MKPlayer(videoContainer, playerConfig);

5. Initialize MKCustomUI

Create MKCustomUI with the initialized player instance:

const mkCustomizeUI = new mkplayercustomuiPlugin.MKCustomUI(player);

6. Release an existing UI manager before rebuilding

If you rebuild or switch UI layouts dynamically, release the previous uiManager first:

if (uiManager) {
  uiManager.release();
  uiManager = undefined;
}

This avoids duplicate controls and prevents memory leaks when switching UI variants.