MKCustomUI plugin allows developers to implement a customizable playback UI for MKPlayer Web SDK using Bitmovin UI V3. Previously, MKPlayer only supported a boolean flag (ui: true/false) to enable or disable the default UI. This limited UI flexibility and did not provide any hooks for customization. So, with MKCustomUI, additional playback controls, buttons, and styling can be configured to meet the functional requirements. Create fully custom UI controls and Configure UI components via UIConfig on Bitmovin UI interface behaviors.
Install plugin
npm install @mediakind/mkplayer-customui-plugin
Import plugin in your source
import { MKCustomUI, MKCustomizeUI } from "@mediakind/mkplayer-customui-plugin";
Ensure that playerConfig.ui is set to false if you use MKCustomUI plugin
const playerConfig = {
...otherConfigs,
ui: false, // disable Bitmovin UI
};
Initialize MKPlayer as usual
const player = new mkplayer.MKPlayer(videoContainer, playerConfig);
Initialize MKCustomUI with MKPlayer instance
const mkCustomUI = new MKCustomUI(player);
UIConfig Interface for configure uicontainer
const uiConfig = {
disableAutoHideWhenHovered: false,
playbackSpeedSelectionEnabled: true,
metadata: {
markers: [
{ time: 24, title: 'Marker1' },
{ time: 69, title: 'Marker2' },
],
}
};
Factory Default methods to create UIs
mkCustomUI.buildDefaultUI(uiConfig);
UIContainer for the UI controls to add to the player
const UiContainer = new MKCustomizeUI.UIContainer({
components: [
subtitleOverlay,
new MKCustomizeUI.BufferingOverlay(),
new MKCustomizeUI.ReplayButton(),
new MKCustomizeUI.PlaybackToggleButton(),
new MKCustomizeUI.QuickSeekButton({
seekSeconds: -10
}),
new MKCustomizeUI.QuickSeekButton({
seekSeconds: 10
}),
new MKCustomizeUI.VolumeToggleButton()
]
});
For Custom UI Controls
mkCustomUI.customUi(UiContainer, uiConfig);
<head> of your HTML file.<head> of your HTML file.
(https://cdn.jsdelivr.net/npm/bitmovin-player-ui@3/dist/css/bitmovinplayer-ui.css)