MKPlayer customization

This section documents the @mediakind/mkplayer-customui-plugin, which allows you to build and customize playback user interfaces on top of Bitmovin Player UI V3.

Previously, MKPlayer supported a basic ui: true | false flag to show or hide the default playback UI. The MKCustomUI plugin extends this by enabling full layout, control, behavior, and styling customization.

What you can do

Build MKPlayer's default-style UI
Create fully custom playback UIs
Configure UI behavior through uiConfig
Use responsive UI variants for mobile and browser layouts
Style playback controls using CSS class overrides
Apply UI updates dynamically at runtime based on screen size, app state, and user context

In this section

Install and initialize

Install the plugin, disable the default UI, and initialize MKPlayer and MKCustomUI.

UI configuration and variants

Configure uiConfig, build responsive layouts, and use lifecycle events.

MKCustomUI API

Reference list of constructors and UI factory methods.

CSS customization

Apply CSS overrides for seekbars, typography, and branded visual styling.

External references

NPM package: @mediakind/mkplayer-customui-plugin (opens in a new tab)
API docs: MKCustomUI API reference (opens in a new tab)
Sample code: MKPlayerSamples custom UI example (opens in a new tab)

MKPlayer SDK Install and initialize