Custom components

Definition of Components

1. Define your component in the window’s customElementRegistry.

2. Register the component in flowplayer’s “customElementsRegistry” under the same name of the flowplayer component you want to replace.

Copy

Copied

window.customElements.define("my-component", MyComponent)
flowplayer.customElements.set("flowplayer component's localName", “my-component”)

Info

You have to define your own components before creating any instance of the player. Also, the player will be passed as an argument on the constructor of your component.

Creating components

In order to create one or more components, use the player’s method createComponents. The method has one parameter which is an argument object of strings with the names of the components. It returns an Array of these components.

Copy

Copied

player.createComponents(
      "flowplayer-elapsed-time"
    , "flowplayer-timeline-bar"
    , "flowplayer-volume-control"
)

Info

CreateComponents takes as arguments only names of flowplayer components. If you define a component, you can still use this method to create your component, but you have to use the name of the flowplayer component that your own replaced.