# Custom components

## Definition of Components

**1.** Define your component in the window’s [customElementRegistry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry).

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


```javascript
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.


```javascript
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.