Type alias Extension

An extension for the default UI.

This is called whenever a <theoplayer-default-ui> element is created. The extension can then choose to modify this element, for example by appending extra elements or attaching extra event listeners.

Example

The following extension adds an extra button to the bottom control bar of every default UI:

THEOplayerUI.registerExtension((ui) => {
    // Create a new button
    const button = new THEOplayerUI.Button();
    button.innerHTML = "Click me!";
    button.addEventListener("click", () => alert("I was clicked!"));
    // Place it in the bottom control bar
    button.slot = "bottom-control-bar";
    ui.appendChild(button);
});
Copy

See the documentation of <theoplayer-default-ui> for more information about the available slots in which you can add extra elements.