To create a custom structure of the UI elements, you can simply create your structure starting with an UIContainer. Pass it to the UIManager together with your player instance and you are all set.

To get started, import our UI either through NPMJS or from our CDN. Whatever fits your workflow. Once you have imported our UI, you can access the components and build your structure.

In the following example, we modified our basic UI structure for the web by moving some buttons (Settings, AirPlay, Casting, and Picture in Picture) from the control bar (bottom right) to the title bar (top right). In addition, we changed the time label on the right-hand side of the seek bar to show the remaining time instead of the duration. This was done by passing a different configuration option to its constructor.

Play around with the fiddle and build the most weirdo UI structure we've ever seen.

📘

Removing certain components, e.g. the Watermark becomes super easy now

Customising components

Every Component can be individually configured with a corresponding config object. You can find the available component configs in our API doc in the sidebar under the Configs section.

To get access to those component-specific configurations, it's necessary to not use the built-in UIFactory methods anymore, but make changes to them or build your custom structure of components.

UIFactory

The UIFactory is our collection of our standard UI designs, containing various default UI variants for our different platforms. For additional information on the capabilities of our framework, please refer to the UI Framework.