> For the complete documentation index, see [llms.txt](https://play.docs.nexx.cloud/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://play.docs.nexx.cloud/javascript-sdk/basic-integration.md).

# 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 %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://play.docs.nexx.cloud/javascript-sdk/basic-integration.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.