Type Alias Extension

Extension: (ui: DefaultUI) => void

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.

Type declaration

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);
});

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

Settings

Member Visibility