# Basic Integration

## Load the SDK

The most easy approach is to load the nexxPLAY SDK File and prepare empty HTML Containers, which will be filled by the Player after the SDK has been loaded. After Loading the Script File, the nexxPlay Framework can be used.

With the JavaScript Embed method, the player can be configured and controlled completely from the main page via the **`_play`** namespace.

To embed the SDK, use the following Code:

```markup
<script src="https://arc.nexx.cloud/sdk/:domainid.play" type="text/javascript" crossorigin="anonymous"></script>
```

{% hint style="info" %}
&#x20;The **:domainid** Parameter is a numeric Value, given by 3Q
{% endhint %}

The SDK itself might download additional Scripts, so the complete Loading Process is an async Mechanism. The SDK will notify the surrounding Page via an Event on **`window`** , when the SDK is ready to use. As some older Browsers do not work well with **`addEventListener`**, another Option is to create a global Function **`onPlayReady`**, that the Player will automatically call, once the SDK is ready to use.

```javascript
window.onPlayReady=function(){
    //nexxPLAY SDK is ready to use
}

window.addEventListener("nexxplay.ready", function(){
    //nexxPLAY SDK is ready to use
};

if((typeof(_play)=="object")&&(_play.control.sdkIsReady())){
    //nexxPLAY SDK is ready before Listeners were added
}
```

{% hint style="info" %}
Depending on your Page Structure, the SDK may be initialized even before the Listener is added.&#x20;
{% endhint %}

## Adding a new Player Instance

The most simple Way to start a Media Player is to tell the SDK to fill an existing HTML Container.

```javascript
_play.control.addPlayer(CONTAINER-ID, MEDIA-ID, STREAMTYPE, CONFIG);
```

{% hint style="info" %}
**CONTAINER-ID** is the id of the target Container on the Page, that the Player will be inserted into. Please notice, that the Container should have a given width/height in either inline CSS or by a CSS Document to allow the Player to measure its Dimensions.
{% endhint %}

{% hint style="info" %}
**MEDIA-ID** is the ID of an existing Media Object within nexxOMNIA
{% endhint %}

{% hint style="info" %}
**STREAMTYPE** is the Type of the Media Object
{% endhint %}

The following **`STREAMTYPE`**&#x56;alues are currently supported:

* video
* audio
* live
* radio
* scene
* playlist
* audioalbum
* rack
* collection
* set

Supported in the SDK (but not in iFrames) are also custom Lists of Media Types (**MEDIA-ID** is a comma seperated List in this Case):

* videolist
* audiolist
* scenelist

Depending on the nexxPLAY Settings, controlled in nexxOMNIA, the Player will now automatically start inside the given Container.&#x20;

The **`addPlayer`** Method will return a **`_play.PlayerInstance`** Object, which can be used to control the Player via JavaScript after Initialization.

{% hint style="info" %}
**CONFIG** is a Configuration Object, that serves as “Override” Object. By using this, the Player can behave differently in this Instance than normally defined.
{% endhint %}