Custom components
Table of contents
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.
window.customElements.define("my-component", MyComponent)
flowplayer.customElements.set("flowplayer component's localName", “my-component”)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, and returns an Array of these components.
player.createComponents(
"flowplayer-elapsed-time"
, "flowplayer-timeline-bar"
, "flowplayer-volume-control"
)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 in order to do that.