# WebComponent

The nexxPLAY SDK also supports Integration via WebComponents.

After the initialization of the SDK, a WebComponent Class can be registered globally, if the Browser supports these APIs.

The nexxPLAY WebComponent will be integrated into HTML like this:

```markup
<nexx-play 
    id="player" 
    data-mediaid="12345" 
    data-streamtype="video" 
    data-config='{"disableAds":1}'
></nexx-play>
```

{% hint style="info" %}
The HTML Tag supports the Attributes **data-mediaid** (necessary), **data-streamtype** (optional, will be set to "video", if omitted) and an optional **data-config** Attribute.

The Config Attribute must be a JSON encoded String of an Object, that would serve as Source for a **`_play.PlayerConfiguration`** Object.
{% endhint %}

After the nexxPLAY SDK has been loaded, the Instance can be started as a WebComponent:

```javascript
_play.config.enableWebComponents().then(function(){
    window.customElements.define("nexx-play",nexxPLAY);
}catch(function(){
    // provider a Fallback
});
```

In this Moment, the custom HTML Tag has been registered and will start the nexxPLAY Instance in the given Container. For registering for Events or further Control, the WebComponent Container offers a method to get the **`_play.PlayerInstance`** Instance, which runs inside the HTML Container and exposes the regular SDK Methods:

```javascript
let instance = document.getElementById("player").getInstance();
let mediaData = instance.getMediaData();
```