# Introduction

![](/files/-MOxi5Ek4dRWGKPUupkW)

This Documentation shall guide you through the Implementation of the nexxPLAY Media Player into your Websites and Apps..

For most Cases, the Integration via the Javascript SDK is most appropriate and offers the most Possibilities. 

{% content-ref url="/pages/-M9Fdlzna0yIKdW\_WjNj" %}
[Javascript SDK](/javascript-sdk)
{% endcontent-ref %}

Nevertheless, in some Scenarios, the iFrame Integration may be more easy to handle.

{% content-ref url="/pages/-M9FdorKLl9r4DQCDKmJ" %}
[iFrame Integration](/iframe-integration)
{% endcontent-ref %}

If you are working with a WordPress Environment, it may be helpfull to use the official nexxPLAY WordPress Plugin.

{% content-ref url="/pages/-M9YSzY8LDBA1BLLOJ60" %}
[Wordpress Plugin](/platform-plugins/wordpress-plugin)
{% endcontent-ref %}

If you need the Player in an AMP Environment, nexxPLAY also comes with a native AMP Plugin, that can be embedded right away.

{% content-ref url="/pages/-M9FeH6afjJulKoh5Zvf" %}
[Google AMP](/platform-plugins/google-amp)
{% endcontent-ref %}

If your Web Project is based on React, you might need the React Plugin.

{% content-ref url="/pages/GW8OXFimTQ2naUZD59wy" %}
[React Plugin](/platform-plugins/react-plugin)
{% endcontent-ref %}

In case, that you are working with native Apps, you will find Links and initial Integration Help here.

{% content-ref url="/pages/-M9Ye7-tHyas2tvRenYE" %}
[nexxPLAY for iOS](/native-players/nexxplay-for-ios)
{% endcontent-ref %}

{% content-ref url="/pages/-M9Ye9Mxc1uksG\_XiGUp" %}
[nexxPLAY for Android](/native-players/nexxplay-for-android)
{% endcontent-ref %}

For native Apps, based on Flutter, you will find the official Flutter Plugin here.

{% content-ref url="/pages/I4sQFBaDuwEGhpqIzyuZ" %}
[nexxPLAY for Flutter](/native-players/nexxplay-for-flutter)
{% endcontent-ref %}

If you are planning to use Widgets to promote your Content throughout Web, PWA, iFrames and native Apps, you can use the nexxPLAY Widgets here.

{% content-ref url="/pages/-MC-ctnHffFDHmsQ14GZ" %}
[Widgets](/widgets)
{% endcontent-ref %}

In case you have additional Questions, use the nexxOMNIA Help System

{% embed url="<https://omnia.nexx.cloud/help>" %}

&#x20;


# Javascript SDK

The Javascript SDK is the most powerfull Way to integrate nexxPLAY into a Website. Via the SDK, you can control the Player in every possible Way and change its Functionalities, Layout and Options whenever and whereever needed.

If you have a JS SDK Integration already, you might want to add more Functionality with Addons and Widgets.

{% content-ref url="/pages/-M9YN4WmP8mv1eX61-7a" %}
[Addons](/addons)
{% endcontent-ref %}

{% content-ref url="/pages/-MC-ctnHffFDHmsQ14GZ" %}
[Widgets](/widgets)
{% endcontent-ref %}

Nevertheless, as it requires a lot of Javascript Knowledge, in some Scenarios, it may be more suitable, to use the more easy to handle iFrame Integration.

{% content-ref url="/pages/-M9FdorKLl9r4DQCDKmJ" %}
[iFrame Integration](/iframe-integration)
{% endcontent-ref %}

If you need the Player in an AMP Environment, nexxPLAY also comes with a native AMP Plugin, that can be embedded right away.

{% content-ref url="/pages/-M9FeH6afjJulKoh5Zvf" %}
[Google AMP](/platform-plugins/google-amp)
{% endcontent-ref %}


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


# Advanced Integration

## Adding a Player with GlobalID

Besides the classic Integration with **`STREAMTYPE`** and **`MEDIA-ID`**, you can also integrate a Player with a GlobalID, which does not need a **`STREAMTYPE`** anymore.

```markup
_play.control.addPlayerWithGlobalID(CONTAINER-ID, GLOBAL-ID, 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" %}
**GLOBAL-ID** is the ID of an existing Media Object within nexxOMNIA
{% endhint %}

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

## Adding a Player with Remote Content

Although nexxPLAY only plays Content, that exists with nexxOMNIA, it is possible to play Video (and Audio), that is managed outside of nexxOMNIA by Partner Companies.

```javascript
_play.control.addPlayerWithRemoteMedia(CONTAINER-ID, REMOTE-REFERENCE, PROVIDER-CODE, 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" %}
**REMOTE-REFERENCE** is the ID of an existing Media Object at the nexxOMNIA Partner Provider.
{% endhint %}

{% hint style="info" %}
**PROVIDER-CODE** is the Code Name of a Partner Provider, given by 3Q
{% endhint %}

{% hint style="info" %}
**STREAMTYPE** is the Type of the Media Object (only **`video`** and **`audio`** is allowed here)
{% endhint %}

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

## Adding a Player with AutoContent

In most Cases, the Frontend define exactly, which IDs of Video/Audio/Scene... shall appear where on which Page. For optimal Control, this is the classic and intended Way to implement to nexxPLAY.

Nevertheless, there may be Scenarios, where the Domain does not fully care, which Media exactly shall appear where. Instead, they want to stream Media from its Content Pool defined by a Topic/Keywords or the Page itself.

To handle these Cases, nexxPLAY can be started in an "autoContent" Mode, which can be started like the following:

```javascript
var contentConfig = new _play.ContentConfiguration({keywords:'1234 123',limit:5});

_play.control.addAutoContentPlayer(CONTAINER-ID, STREAMTYPE, contentConfig, 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" %}
**STREAMTYPE** is the Type of the Media Object
{% endhint %}

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

You define the target Container, the Streamtype and the Player Configuration exactly as always. Instead of a **`MEDIA-ID`**, a **`_play.ContentConfiguration`** Object is given, which handles various Usecases.

You can set the following Object Keys for Control:

| Key             | Description                                                                                                                 |
| --------------- | --------------------------------------------------------------------------------------------------------------------------- |
| **titletag**    | the Container ID, HTML Object or HTML Tag Name of a Page Element, which contains Information about the Title                |
| **subtitletag** | the Container ID, HTML Object or HTML Tag Name of a Page Element, which contains Information about the Subtitle             |
| **contenttag**  | the Container ID, HTML Object or HTML Tag Name of a Page Element, which contains Information about the Content              |
| **keywords**    | a free List of manual Keywords - if this is set, the Content will be found by this Keywords and all other Tags are ignored. |
| **language**    | (optional, 2-Letter Language Code) if not given, the Player Language will be used                                           |
| **channel**     | (optional, Channel ID) if given, Contents will be searched for only in the given Channel                                    |
| **format**      | (optional, Format ID) if given, Contents will be searched for only in the given Format                                      |
| **limit**       | if a "Playlist/Video List/Audio List..." is wanted, enter the maximal Amount of Items here                                  |

{% hint style="info" %}
This Method is only available for HTML5 Players.
{% endhint %}


# Player Configuration

As already mentioned, each **`addPlayer`**&#x4D;ethod takes an (optional) **CONFIG** Object. This Object is used for override Rules of the Player, that are otherwise controlled by nexxOMNIA.&#x20;

It is basically used like this:

```javascript
var obj = { dataMode: "static", autoPlay:1 };
var cfg = new _play.PlayerConfiguration(obj);
cfg.addOverride("delay", 15);

var player = _play.control.addPlayer("div", 1234, "video", cfg);
```

The full (very long) List of supported Override Options can be found here:

{% content-ref url="/pages/-M9FfDOPhMEysfN-axhI" %}
[SDK Override Options](/integration-enhancements/override-options)
{% endcontent-ref %}


# Player Management

Besides the already mentioned **`addPlayer`** method, the **`_play.control`** Namespace offers various Methods to control all current Instance (i.e. Players), controlled by nexxPLAY. The most obvious Method of this Scenario, the various "addPlayer\*" Methods have already been discussed.

## Instance Management

```javascript
//verify, that the SDK is ready to use
_play.control.sdkIsReady()
```

```javascript
//get an Array of all Container Elements, that currently hold a nexxPLAY Instance.
_play.control.getInstances()
```

```javascript
//check, if there are any active nexxPLAY Instances on the current Page.
_play.control.hasActiveInstances()
```

```javascript
//will pause all Instances (except the exceptContainer).
//if canBeResumed is set to true, the Players can be resumed.
_play.control.pauseAll(exceptContainer, canBeResumed)
```

```javascript
//will continue all Instances (except the exceptContainer), if they have been paused (and are allowed to continue).
_play.control.continueAll(exceptContainer)
```

```javascript
//will remove the Player Instance from the current Container to a new Container
_play.control.moveToContainer(CONTAINER-ID,TARGET-CONTAINER-ID)
```

```javascript
//will update a Configuration, defined by Player Configuration
_play.control.updateConfiguration(CONTAINER-ID,SETTING-KEY,UPDATED-VALUE)
```

{% hint style="info" %}
The updateConfig Method does not support all Configuration Keys. Supported are primarily Settings for Ad URLs ad well as **`sharingData`**&#x61;nd **`aspectRatio`**.
{% endhint %}

```javascript
//will remove the nexxPLAY Instance from the given Container.
//it stopCasting is set to true and the Player is currently casting, the Casting will be stopped too
_play.control.removePlayer(CONTAINER-ID,stopCasting)
```

####

## Instance Properties

```javascript
//verify,if the given Container contains a nexxPLAY Instance
_play.control.instanceExists(CONTAINER-ID)
```

```javascript
//check, if the nexxPLAY Instance under the given Container is ready for Control
_play.control.instanceIsReady(CONTAINER-ID)
```

```javascript
//check, if the nexxPLAY Instance under the given Container is currently playing
_play.control.instanceIsPlaying(CONTAINER-ID)
```

```javascript
//check, if the nexxPLAY Instance under the given Container is currently playing an AD
_play.control.instanceIsPlayingAd(CONTAINER-ID)
```

```javascript
//check, if the nexxPLAY Instance under the given Container is currently in PopOut Mode
_play.control.instanceIsInPopOut(CONTAINER-ID)
```

```javascript
//check, if the nexxPLAY Instance under the given Container is currently in PiP Mode
_play.control.instanceIsInPiP(CONTAINER-ID)
```

```javascript
//check, if the nexxPLAY Instance under the given Container is currently actively connected to a Chromecast
_play.control.instanceIsCasting(CONTAINER-ID)
```

## Access Media Data of the Instance

```javascript
//will return an Object of Metadata Information of the currently played Media Object of the nexxPLAY Instance under the given Container.
_play.control.getCurrentMedia(CONTAINER-ID)
```

```javascript
//will return an Object of Metadata Information of the parent Item of the currently played Media Object.
//if there is no parent Item, null will be returned.
_play.control.getCurrentMediaParent(CONTAINER-ID)
```

```
//will return an Object of the detail Playback State of the nexxPLAY Instance under the given Container.
_play.control.getCurrentPlaybackState(CONTAINER-ID)
```

```javascript
//will return a Float, representing the current Play Position (in Seconds) of the currently played Media Object of the nexxPLAY Instance under the given Container.
_play.control.getCurrentTime(CONTAINER-ID)
```

```javascript
//will return an Object of available Text Tracks of the currently played Media Object of the nexxPLAY Instance under the given Container, if available.
_play.control.getTextTracks(CONTAINER-ID)
```

```javascript
//will return an Array of available Audio Tracks of the current Media Object.
_play.control.getAudioTracks(CONTAINER-ID)
```

```javascript
//will return an Array of available Files, connected to the current Media Object
_play.control.getConnectedFiles(CONTAINER-ID)
```

{% hint style="info" %}
The Parameter **CONTAINER-ID** in all previous Examples can be skipped (or replaced by null), if only one Player is active. If the Parameter is omitted, nexxPLAY will automatically choose the first existing Player Instance.
{% endhint %}

## SDK Settings

The following SDK Methods are rarely needed. They are mentioned for special Cases and should only be used, if advised by 3Q nexx.

```javascript
//enable Debug Output on Production Players
_play.config.enableDebug(filter);
```

```javascript
//explicitely set a different Language, than the Page/the User uses
_play.config.setLanguage(lang);
```

```javascript
//manually set a Platform/Gateway String. This will influence the Player Behaviour and must be handled very carefully.
_play.config.setPlatform(platform);
```

```javascript
//manually set a platformVariant. Usefull Values will be given by 3Q Nexx only.
_play.config.setPlatformVariant(platformVariant, platformVariantIndex=0);
```

```javascript
//manually set a Delivery Partner Details. All Media Events will then report this Partner as Delivery Partner.
//this is handled by nexxPLAY automatically normally.
_play.config.setDeliveryPartner(ID, hash, adRef);
```

```javascript
//manually set a Affiliate Partner ID. All Media Events will then report this Partner as Delivery Partner.
//this is handled by nexxPLAY automatically normally.
_play.config.setAffiliatePartner(ID, code='');
```

```javascript
//manually set a Campaign ID. All Media Events will then report this Campaign.
_play.config.setCampaign(ID, code='');
```

```javascript
//mark the current Page Context as Context Reference. This will be included in all Media Events for detailed Analysis Purposes.
_play.config.setContextReference(ref);
```

```javascript
//manually set a Session Identifier. This should never be used, unless advised by 3Q nexx.
_play.config.setCid(ID);
```

```javascript
//force the Player to use/not use SSL on the current Page (or App)
_play.config.setSSL(true/false);
```

```javascript
//controls a Page with multiple, independant Players. If set to true, the SDK will pause all other Players, if a new Player starts Playback
_play.config.setAllowOnlyOnePlayerPlaing(true/false)
```

```javascript
//manually override the PopOut Functionality of nexxPLAY. This should not be modified, if the User explicitley denied the Usage of PopOut Players
_play.config.setUserAllowsPopout(bool)
```

```javascript
//if the Page needs User Informations (for the Comment Addon for example), but will not use the nexxOMNIA User Management
_play.config.setExternalUser(externalRef, name, email, thumb);
```

## User Preferences, GDPR and Consent Management

In any TCF 2.0 compliant Frontends, nothing has to be done manually, if the Player needs ConsentStrings for Ad Requests. It is fully handled by the Player itself.

For manual Purposes though, Consent Management can be applied by calling the following Functionalities:

```javascript
//manually set a ConsentString for Ad Requests
_play.config.setUserConsentString(cs)
```

```javascript
//define a boolean Version of Consent Management by explicitely forbid Tracking
_play.config.setUserIsTrackingOptOuted()
```

Please compare this with the general Description of GDPR and TCF 2.0 here:

{% content-ref url="/pages/-MGx77wpSdS\_W2GSojWL" %}
[GDPR and TCF 2.0](/security-and-accessibility/gdpr-and-tcf-2.0)
{% endcontent-ref %}


# Playback Control

The SDK also allows to control all Playback Mechanisms of the Player in every Moment. The **`_play.control.interact`** Namespace is used for these Functions.

There are two Ways to control a Player Instances Playback:

* it is possible to use the global **`_play.control.interact.*`** Method with the Use of a Container-ID Parameter.
* it is possible to call the Method directly on the Player Instance Object (returned by every **`_play.control.addPlayer*`** Method)

####

### General Playback

```javascript
_play.control.interact.play(CONTAINER-ID)
```

```javascript
_play.control.interact.pause(CONTAINER-ID,canBeResumed)
```

```javascript
//starts play, if paused and pauses if currently playing.
_play.control.interact.toggle(CONTAINER-ID)
```

```javascript
//is identical to play() on an Instance in "paused" State
_play.control.interact.resume(CONTAINER-ID)
```

```javascript
//only possible on a Player Instance, that has not been started yet, but is ready to start
_play.control.interact.startMuted(CONTAINER-ID)
```

```
_play.control.interact.mute(CONTAINER-ID)
```

```
_play.control.interact.unmute(CONTAINER-ID)
```

```
_play.control.interact.seekTo(CONTAINER-ID,time)
```

```
_play.control.interact.seekBy(CONTAINER-ID,time)
```

```
_play.control.interact.setVolume(CONTAINER-ID,[0.1-1])
```

```
_play.control.interact.setPlaybackSpeed(CONTAINER-ID,[-1:2])
```

```
_play.control.interact.setAudioTrack(CONTAINER-ID,lang,role)
```

```
_play.control.interact.setTextTrack(CONTAINER-ID,lang,role)
```

```
_play.control.interact.hideTextTrack(CONTAINER-ID)
```

### Playback of multiple Items within a Media Container

```javascript
//swap to the next Item in a Container Element (Playlist, Collection, AudioAlbum etc)
_play.control.interact.next(CONTAINER-ID)
```

```javascript
//swap to the previous Item in a Container Element (Playlist, Collection, AudioAlbum etc)
_play.control.interact.previous(CONTAINER-ID)
```

```javascript
//swap to exactly this Position of the Item List
_play.control.interact.swapToPosition(CONTAINER-ID,position)
```

### Playback Mode

```javascript
//this Command will fail under most conditions (as Fullscreen Enter needs a User Gesture by Browser Security)
_play.control.interact.enterFullscreen(CONTAINER-ID)
```

```
_play.control.interact.exitFullscreen(CONTAINER-ID)
```

```
_play.control.interact.enterPopout(CONTAINER-ID)
```

```
_play.control.interact.exitPopout(CONTAINER-ID,andContinuePlay)
```

####

### Changing the Media Object

```
_play.control.interact.swapToMediaItem(CONTAINER-ID,MEDIA-ID,STREAMTYPE,startPosition,delay,reason,showReturnButton)
```

```
_play.control.interact.swapToGlobalID(CONTAINER-ID,GLOBAL-ID,startPosition,delay,reason,showReturnButton)
```

```
_play.control.interact.swapToRemoteMedia(CONTAINER-ID,REMOTE-REFERENCE,STREAMTYPE,PROVIDER,delay,reason,showReturnButton)
```

####

### Interacting with connected Files and Downloads

```javascript
//start Downloading a connected File, indicated by its position in the current File List
_play.control.interact.startDownloadFile(CONTAINER-ID,position);
```

### Interacting with connected Polls

```javascript
//start Downloading a connected File, indicated by its position in the current File List
_play.control.interact.startPoll(CONTAINER-ID,POLL-ID);
```

{% hint style="info" %}
**POLL-ID** is the valid ID of a Poll. If **POLL-ID** is omitted, the Player will start the Poll, that has been connected to the current Media (if any).
{% endhint %}


# iFrame Integration

The Integration of nexxPLAY with an iFrame is the most easy Way to get Video Playback on your Page. You can get the necessary Embed Codes from within the nexxOMNIA UI or the nexxOMNIA API.

For the most basic Integration, that will work anywhere, use the default Embed Codes:

{% content-ref url="/pages/-M9YTheMUdsD-SMI1kg1" %}
[Embed Codes](/iframe-integration/embed-codes)
{% endcontent-ref %}

If you need the Player in an AMP Environment, nexxPLAY also comes with a native AMP Plugin, that can be embedded right away.

{% content-ref url="/pages/-M9FeH6afjJulKoh5Zvf" %}
[Google AMP](/platform-plugins/google-amp)
{% endcontent-ref %}

If your Website is built with the React Framework, yought consider using the official React Plugin for nexxPLAY.

{% content-ref url="/pages/GW8OXFimTQ2naUZD59wy" %}
[React Plugin](/platform-plugins/react-plugin)
{% endcontent-ref %}

If you are working with a WordPress Environment, it may be helpfull to use the official nexxPLAY WordPress Plugin.

{% content-ref url="/pages/-M9YSzY8LDBA1BLLOJ60" %}
[Wordpress Plugin](/platform-plugins/wordpress-plugin)
{% endcontent-ref %}

For Integration with Third Party Tools, the full iFrame Code (not only the URL), can be received/distributed with an oEmbed Link

{% content-ref url="/pages/-M9FeAwOzeLmd8iEAnL4" %}
[oEmbed Discovery](/other-integration-options/oembed)
{% endcontent-ref %}


# Embed Codes

To enable nexxPLAY on your Pages via iFrame, you need the iFrame Embed URL. This URL can be received on any Media Item within the nexxOMNIA UI - or via the nexxOMNIA API.

The general Structure of a nexxPLAY Embed URL looks like this

**`https://embed.nexx.cloud/:domainid/:streamtype/:mediahash`**<br>

{% hint style="info" %}
&#x20;The **:domainid** Parameter is the Domain ID of the Media Object
{% endhint %}

{% hint style="info" %}
The **:streamtype** Parameter is the Media Type
{% endhint %}

{% hint style="info" %}
&#x20;The **:mediahash** Parameter is the Hash ID of the Media Object
{% endhint %}

The full Embed Code would then look like this:

```markup
<iframe width='640' height='360' 
    src='https://embed.nexx.cloud/:domainid/:streamtype/:mediahash' 
    allow='autoplay; picture-in-picture; gyroscope; magnetometer; accelerometer; encrypted-media; fullscreen' 
    frameborder='0' allowfullscreen>
</iframe>
```

If you need to modify the Player Instance within the iFrame, this is more complicated than with the Javascript SDK. Nevertheless, you can use PostMessage Control to achieve this (next Chapter), and the most important Override Options are also available as Query Parameters directly in the iFrame URL:

| Parameter           | Description                                                                                                                                                                   |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **autoPlay**        | if set to 1, the Player will start Playback immediately (always without Sound) \[0,1]                                                                                         |
| **dataMode**        | the DataMode of the Player \[api, static]                                                                                                                                     |
| **exitMode**        | the ExitMode / RevolverPlayer Mode of the Player \[replay, loop, load]                                                                                                        |
| **menuMode**        | the Menu Behaviour of the Player \[0,1,2]                                                                                                                                     |
| **delay**           | start the Media Object with the given Delay (in Seconds)                                                                                                                      |
| **platform**        | manually set the Player Platform (necessary, if used in an AMP Environemnt without the AMP Plugin - set it to "amp" in this Case)                                             |
| **language**        | manually set the Player Language                                                                                                                                              |
| **direction**       | set the Text Direction manually to "rtl". This is only necessary, if the Player Language is automatic or not set by default to an "RTL" Language.                             |
| **disableAds**      | if set to 1, the Player will not show any kind of Ads \[0,1]                                                                                                                  |
| **streamingFilter** | override the Streaming Filter (Playback Quality) for this Player \[3Q Code]                                                                                                   |
| **consentString**   | if the Frontend uses a Non TCF 2.0-compliant Frontend but needs a Consent String for Ad Management, the given Value here will be used by the Player in Ad Requests            |
| **affiliateCode**   | if the Player is launced on a Partner Website, this code indicates the Use of an Affiliate Partner - the corresponding Code can be found within nexxOMNIA                     |
| **campaignCode**    | if set to a valid Campaign ID of the calling Domain, the Campaign Rules and Reportings are used.                                                                              |
| **enableCOEP**      | in very advanced Settings, the surrounding Page might only accept COEP-protected Embeds. Set this Parameter to 1 in order to receive an iFrame with this Level of Protection. |


# PostMessage Control

In case, a Page uses the Embed Codes of nexxPLAY AND needs to control the Player through the SDK, a direct Communication is normally not possible due to Browser Restrictions.

Nevertheless, nexxPLAY exposes the **`_play.control`** Functionality also via the **PostMessage API**, so the most basic Controls of the Player are also available in an iFrame Context.

In order to use the **PostMessage API**, send an Object with “**`cmd`**” (and additionally “**param**” to the iFrame **contentWindow** in order to start the **`_play.control`** Functions of the JS SDK.

```javascript
let el = document.getElementById('playeriframe');
el.contentWindow.postMessage({cmd:'pause'},"*");
```

All Methods, referenced here

{% content-ref url="/pages/-M9Ff5c\_bjGXe44xg\_oO" %}
[Player Management](/javascript-sdk/player-management)
{% endcontent-ref %}

are available through this API - some may need the additional "**param**" Key to configure the return Values.


# native Players

nexxPLAY can also be integrated in native Apps.

The supported Platforms are iOS and android.

{% content-ref url="/pages/-M9Ye7-tHyas2tvRenYE" %}
[nexxPLAY for iOS](/native-players/nexxplay-for-ios)
{% endcontent-ref %}

{% content-ref url="/pages/-M9Ye9Mxc1uksG\_XiGUp" %}
[nexxPLAY for Android](/native-players/nexxplay-for-android)
{% endcontent-ref %}

If your native App is based on Flutter and you cannot use the native SDKs directly, there is also a Flutter Plugin for nexxPLAY.

{% content-ref url="/pages/I4sQFBaDuwEGhpqIzyuZ" %}
[nexxPLAY for Flutter](/native-players/nexxplay-for-flutter)
{% endcontent-ref %}


# nexxPLAY for iOS

nexxPLAY for iOS is a native Player, that is inteded to work in native iOS Apps

You can find all necessary Binaries for Download and latest Changelogs always here:

{% embed url="<https://github.com/nexxtv/nexxPLAY-iOS>" %}

## General Integration

1. In Xcode, select your project, select your target and open the tab “General”
2. Drag the nexxPlay.framework file from the Finder to the “Embedded Binaries” section
3. Please make sure that the framework is also included in “Linked Frameworks and Libraries”
4. Change your tab to “Build Phases”
5. Drag the nexxPlay.bundle from the Finder to the “Copy Bundle resources”

### IMA SDK - 3rd Party Library

nexxPLAY contains presenting Video Ads via the Google IMA SDK. If the Player will use this functionality, an additional SDK need to be added to the project.

The current version of IMA used in nexxPLAY is 3.17.0 and can be downloaded [here](https://developers.google.com/interactive-media-ads/docs/sdks/ios/client-side/download).

Please drag these frameworks into the "Embedded Binaries" section of your target (exactly as explained for the nexxPLAY framework) and make sure they also appear in the "Linked Frameworks and Libraries" section.

## Adding a Player Instance

```swift
import UIKit
import nexxPlay

class ViewController: UIViewController {

    override func viewDidLoad() { 
        super.viewDidLoad()
        let player = NexxPLAYView(frame: CGRect(x: 0, y: 0, width: 300, height: 300)) 
        view.addSubview(player)
        player.setEnvironment(NexxPLAYEnvironment(domain: ":domainid"))
        player.startPlay(streamtype: ":streamtype", mediaID: ":mediaid", configuration: NexxPLAYConfiguration())
    }
}
```

{% hint style="info" %}
As soon as the PlayerView is deallocated, the player will automatically stop.
{% endhint %}

## Player Environment

The NexxPLAYEnvironment object contains global settings for the player object. Except for the **`domain`** all the settings are optional and have a predefined value. The settings are:

| Attribute                            | Type             | Value                                                                                                                                                                                                                                  |
| ------------------------------------ | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **domain**                           | String           | the ID of the domain (mandatory)                                                                                                                                                                                                       |
| **sessionID**                        | String           | the ID of the current Session                                                                                                                                                                                                          |
| **language**                         | 2-Letter-Code    | the Player Langage, will be computed by the System Language and Domain Settings if omitted                                                                                                                                             |
| **userHash**                         | String           | an Identifer of the currently loggedin User                                                                                                                                                                                            |
| **externalUserReference**            | String           | an Identifier of a User, that is not registered by nexxOMNIA                                                                                                                                                                           |
| **campaign**                         | int              | the ID of an existing Campaign of the calling Domain                                                                                                                                                                                   |
| **affiliatePartner**                 | Int              | the ID of an existing Affiliate Partner of the calling Domain                                                                                                                                                                          |
| **deliveryPartner**                  | Int              | the ID of an existing DeliveryPartner of the calling Domain                                                                                                                                                                            |
| **contextReference**                 | String           | the Context Reference for this Player (a free String of "where is this Player located" for Reporting)                                                                                                                                  |
| **platformVariant**                  | String           | the PlatformVariant for this Player (usefull Values will be given by 3Q)                                                                                                                                                               |
| **platformVariantIndex**             | Int              | if platformVariant is not empty, this might further specify the current platform Variant.                                                                                                                                              |
| **appVersion**                       | String           | the Version of the App, including the SDK                                                                                                                                                                                              |
| **useSSL**                           | Bool             | set to false if the Player should not use SSL (default is true)                                                                                                                                                                        |
| **trackingOptOuted**                 | Bool             | if the App user explicitley opts out of Tracking and this Information is relevant for Ads, set this to true                                                                                                                            |
| **consentString**                    | String           | in TCF/CMP Envrionments, the Player might need the User Consent String for Ad Calls                                                                                                                                                    |
| **alwaysInFullscreen**               | Bool             | initially and always show the Player in Fullscreen (default is false)                                                                                                                                                                  |
| **showCloseButtonOnFullscreen**      | Bool             | set to false, if the Fullscreen should not show a "close" Button (default is true)                                                                                                                                                     |
| **googleIMAReferenceViewController** | UIViewController | the Google IMA SDK presents the advertisement modally on a UIViewController once the user taps the video ad. If the Google IMA SDK is used but no view controller is set, the advertisement will open in Safari (default is **`nil`**) |
| **hideStatusbarOnFullscreen**        | Bool             | if set to true, the status bar is automatically hidden when the player is in fullscreen mode (default is **`false`**)                                                                                                                  |
| **openPodcastURLsDirectly**          | Bool             | if set to true, podcast URLs will automatically be opened by the default browser application (default is **`false`**)                                                                                                                  |

## Player Configuration

Just like the Javascript Player, the Player can be configured by a Configuration Object. This Object will be used in one of the various play() Methods of the SDK.

All Options are identical to the general SDK Override Options, you will find here:

{% content-ref url="/pages/-M9FfDOPhMEysfN-axhI" %}
[SDK Override Options](/integration-enhancements/override-options)
{% endcontent-ref %}

{% hint style="info" %}
Please notice, that some Options only make sense in the Web and are therefore not supported.&#x20;
{% endhint %}

If you are looking for the TCF Consent String Management, this is documented here:

{% content-ref url="/pages/-MGx77wpSdS\_W2GSojWL" %}
[GDPR and TCF 2.0](/security-and-accessibility/gdpr-and-tcf-2.0)
{% endcontent-ref %}

## Public Methods

### Preparing and Configuring the Player

```swift
//Sets the environment object for the player. This method must be called before any start method is called
setEnvironment(environment:NexxPLAYEnvironment)
```

```swift
//update a previously defined Environment Value
//domain, language, sessionID and alwaysInFullscreen cannot be updated
updateEnvironment(key:String, value:String)
```

```swift
//start the Player with the given Media
startPlay(streamtype:String, mediaID:String, configuration:NexxPLAYConfiguration)
```

```swift
//start the Player with a given GlobalID
startPlayWithGlobalID(globalID:String, configuration:NexxPLAYConfiguration)
```

```swift
//start the Player with a Remote Media Reference
startPlayWithRemoteMedia(streamtype:String, reference:String, provider:String, configuration:NexxPLAYConfiguration)
```

```swift
//update a previously defined Configuration. 
//supported are currently only the ad*URL Configuration Settings (and webURLRepresentation).
updateConfiguration(key:String, value:String) 
```

```swift
//will clear all currently cached Data
clearCache()
```

### Playback Control

```swift
//restart a paused Player
play()
```

```swift
//pauses a playing Player
pause()
```

```swift
//pauses/restarts a Player, depending on its current State
toggle()
```

```swift
//mutes the Player
mute()
```

```swift
//unmutes the Player
unmute()
```

```swift
//seeks to the given Time, if the Media supports that
seekTo(time:Float)
```

```swift
//seeks relatively by a certain amount of Seconds, if the Media supports that
seekBy(seconds:Float)
```

```swift
//swap to the next Item in a Container Element
next()
```

```swift
//swap to the previous Item in a Container Element
previous()
```

```swift
//swap to a new Item in a Container Element
swapToPosition(position:Int)
```

```swift
//swap to a completely new Media Item
swapToMediaItem(mediaID:String, streamtype:String? = nil, startPosition:Int = 0, delay:Double = 0, reason:String? = nil, showReturnButton:Bool = false)
```

```swift
//swap to a completely new Media Item, referenced by a GlobalID
swapToGlobalID(globalID:String, startPosition:Int = 0, delay:Double = 0, reason:String? = nil, showReturnButton:Bool = false)
```

```swift
//swap to a completely new Media Item, referenced by a Remote Reference
swapToRemoteMedia(reference:String, streamtype:String? = nil, provider:String, delay:Double = 0, reason:String? = nil, showReturnButton:Bool = false)
```

### Requesting Player Status and Details

```swift
//returns Information about the currently played Media Item
getCurrentMedia() -> [String:Any]
```

```swift
//returns Information about the Container Element of the currently played Media Item
getCurrentMediaParent() -> [String:Any]
```

```swift
//returns Information about the current Playback State of the Player
getCurrentPlaybackState() -> [String:Any]
```

```swift
//returns the text tracks of the current media item
getTextTracks() -> [String:Any]
```

```swift
//returns all available Audio Tracks of the current Media
getAudioTracks() -> [String:Any]
```

```swift
//returns the current playback time of the Player
getCurrentTime() -> Float
```

```swift
//returns true, if the Player is currently playing
isPlaying() -> Bool
```

```swift
//returns true, if the Player is currently playing an Ad
isPlayingAd() -> Bool
```

```swift
//returns true, if the Player is currently muted
isMuted() -> Bool
```

```swift
//returns true, if the Player is currently in PictureToPicture Mode
isInPiP() -> Bool
```

### LocalMedia and Offline Playback

nexxPLAY for iOS also supports playback of previously downloaded media items and therefore offers some SDK methods to manage localMedia.

```swift
//start a Download of a given Media Item (internal ID or Remote Reference)
startDownloadLocalMedia(mediaID:String, streamtype:String, provider:String? = nil)
```

```swift
//returns a List of currently available localMedia Items
listLocalMedia(streamtype:String) -> [[String:String]] 
```

```swift
//returns true, if the referenced Media Item is already available locally
hasDownloadOfLocalMedia(mediaID:String, streamtype:String, provider:String? = nil) -> Bool
```

```swift
//remove a previously downloaded Media Item
removeLocalMedia(mediaID:String, streamtype:String, provider:String? = nil)
```

```swift
//remove all previously downloaded Media Items
clearLocalMedia(streamtype:String? = nil)
```

```swift
//returns the currently used Storage by downloaded Media Items
diskSpaceUsedForLocalMedia() -> Int64
```

{% hint style="info" %}
This Feature must be enabled within nexxOMNIA. Furthermore, various Settings to finetune the Details of the localMedia Behaviour can be setup there. Contact 3Q for more Information.
{% endhint %}

## Player Notifications

Just like the JavaScript Player, the Player emits all Events to a Listener Function.

The notifications are sent by the NSNotificationCenter. To receive a notification you can use the following code snippet:

```swift
NSNotificationCenter.defaultCenter().addObserver(self, selector: "notificationReceived:", name: nexxPlay.nexxPlayErrorNotification, object: playerView)
```

The appropriate function that is called when the notification is received:

```swift
@objc func notificationReceived(notification:NSNotification) {
    println(notification.name)        // prints “NexxPlayErrorNotification”
    if notification.name == nexxPlay.nexxPlayPlayPosNotification, let userInfo = notification.userInfo {
        // use the additional data in userInfo
    }
}
```

If you have multiple players you can determine the player that sent the notification by checking notification.object

If you want to receive all notifications from the player, there is a convenience function:

```swift
playerView.addObserverForAllNotifications(observer, selector:”notificationReceived:”)
```

Whenever a notification from playerView is received by the observer, the functio&#x6E;**`notificationReceived`** is called. With **`notification.name`** you can determine which notification was received and act accordingly.

There is also a convenience function to remove the observer for all notifications:

```
playerView.removeObserverForAllNotifications(observer)
```

You can find a List of all Player Notifications here:

{% content-ref url="/pages/-M9Ff8FIIKv2tr-6mtmf" %}
[Player Events](/integration-enhancements/player-events)
{% endcontent-ref %}

{% hint style="info" %}
Please notice, that on iOS, the Events (Notifications) have a different name, that is built by the following Rule: **"nexxPlay" + EventName.camelCase() + "Notification"**.&#x20;

So for example, a "**pause**" Notification will become a "**nexxPlayPauseNotification**", and a "**changeplaypos**" Notification will become a "**nexxPlayChangePlayPosNotification**"
{% endhint %}

## Additional Information

### Fullscreen Behaviour

When the player switches to fullscreen, a subview (containing the video and all controls) of the PlayerView is added to the applications key window `UIApplication.sharedApplication().keyWindow`. Once the user switches back, the subview is added back to the PlayerView.

### Orientation Behaviour

When the device is rotated, the video automatically rotates accordingly.

### AirPlay and Picture-in-Picture Support

The player does support AirPlay and PiP, if it is also supported by the device.&#x20;

Furthermore the **Background Modes** capability *Audio, Airplay and Picture in Picture* must be activated in your project settings in Xcode.

{% hint style="info" %}
Picture-in-Picture AND AirPlay also requirs to be enabled in nexxOMNIA Player Settings and/or Configuration with Overrides.

Additionally, it may not be available on all Devices, depending on Hardware Capabilities.
{% endhint %}

### Widgets

The iOS Platform also supports native Widgets by nexxPLAY.

{% content-ref url="/pages/-MC-g-hgJ7a858hq4cS5" %}
[Widgets for native Apps](/widgets/widgets-for-native-apps)
{% endcontent-ref %}


# nexxPLAY for Android

nexxPLAY for android is a native Player, that is intended to work in native android Apps

In this Section, you will find all necessary basic Steps to integrate the nexxPLAY SDK to your native android App.

Please notice - 3Q also provides a sample App, that you can find here:

{% embed url="<https://github.com/3qnexx/nexxPLAY-android>" %}

## General Integration

First add the 3Q Repository to the Apps `allprojects` Gradle Definition.

```
...
maven { url "https://www.myget.org/F/3qnexx/maven" }
...
```

Add the Dependency for nexxPLAY in the Apps build.gradle:

```json
dependencies { 
    ...
    implementation 'tv.nexx.android:play:6.+'
    ...
}
```

Make sure, that every Activity, that uses nexxPLAY handles configChanges:

```xml
<application>
    ...
    <activity
        ...
        android:configChanges="orientation|keyboardHidden|screenSize|smallestScreenSize|screenLayout" />
  
</application>
```

nexxPLAY needs a root anchor view which should be a FrameLayout. Please add something likes this to your layout, depending on your needs:

```xml
    <FrameLayout
        android:id="@+id/root"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
```

## Adding a Player Instance

nexxPLAY needs a single view. The root view is the view group where the media player control layout (the player skin) is shown. Also the player needs the Acitivity's window

```java
import tv.nexx.android.play.NexxPLAY;
import tv.nexx.android.play.NexxPLAYConfiguration;
import tv.nexx.android.play.NexxPLAYEnvironment;

public class PlayerActivity{

    private NexxPLAY player;
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
    ...
      ViewGroup root = (ViewGroup) findViewById(R.id.root);

      //define the Player object
      NexxPLAY player = new NexxPLAY(this, root, getWindow());

      //define an Environment and specify at least the DomainID
      NexxPLAYEnvironment env = new NexxPLAYEnvironment(new HashMap<String, Object>() {{
         put(domain, ":domainid");
         ...
      }});
      player.setEnvironment(env);
      
      //define a Configuration and specify all Overrides, that shall be applied
      NexxPLAYConfiguration config = new NexxPLAYConfiguration(new HashMap<String, Object>() {{
         ...
      }});
      
      //start Playback of a given Media (here, by Streamtype and ID)
      player.startPlay(":streamtype", ":mediaid", config);
    }
    
    @Override
    public void onResume() {
        super.onResume();
        player.onActivityResume();
    }

    @Override
    public void onPause() {
        super.onPause();
        player.onActivityPause();
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
        player.onActivityDestroyed();
    }
}
```

You can also use the NexxPlayProvider Singleton, if you prefer a synchronized Singleton Approach:

```java
@Override
public void onCreate(Bundle savedInstanceState) {
    ...
    NexxPLAY player = NexxPlayProvider.init(getContext(), root, getActivity().getWindow());
    ...
}
```

## Player Environment

The NexxPLAYEnvironment object contains global settings for the player object. Except for the **`domain`** all the settings are optional and have a predefined value. The settings are:

<table data-header-hidden><thead><tr><th width="257.3333333333333">Attribute</th><th>Type</th><th>Value</th></tr></thead><tbody><tr><td>Attribute</td><td>Type</td><td>Value</td></tr><tr><td><strong>domain</strong></td><td>String</td><td>the ID of the domain (mandatory)</td></tr><tr><td><strong>contentURITemplate</strong></td><td>String</td><td>a Template to build a valid URL for an App Intent</td></tr><tr><td><strong>contentIDTemplate</strong></td><td>String</td><td>a Template to build a valid ContentID of each Media</td></tr><tr><td><strong>sessionID</strong></td><td>String</td><td>the ID of the current Session</td></tr><tr><td><strong>language</strong></td><td>String (2-Letter-Code)</td><td>the Player Langage, will be computed by the System Language and Domain Settings if omitted</td></tr><tr><td><strong>userHash</strong></td><td>String</td><td>an Identifer of the currently loggedin User</td></tr><tr><td><strong>externalUserReference</strong></td><td>String</td><td>an Identifier of a User, that is not registered by nexxOMNIA</td></tr><tr><td><strong>campaign</strong></td><td>int</td><td>the ID of an existing Campaign of the calling Domain</td></tr><tr><td><strong>affiliatePartner</strong></td><td>Int</td><td>the ID of an existing Affiliate Partner of the calling Domain</td></tr><tr><td><strong>deliveryPartner</strong></td><td>Int</td><td>the ID of an existing DeliveryPartner of the calling Domain</td></tr><tr><td><strong>contextReference</strong></td><td>String</td><td>the Context Reference for this Player (an indication of "where this Player is located" for Reporting)</td></tr><tr><td><strong>platformVariant</strong></td><td>String</td><td>the PlatformVariant for this Player (usefull Values will be given by 3Q)</td></tr><tr><td><strong>platformVariantIndex</strong></td><td>Int</td><td>if platformVariant is not empty, this might further specify the current platform Variant.</td></tr><tr><td><strong>appVersion</strong></td><td>String</td><td>the Version of the App, that includes the SDK (only for Reporting Purposes)</td></tr><tr><td><strong>useSSL</strong></td><td>[0,1]</td><td>set to 0 if the Player should not use SSL (default is 1)</td></tr><tr><td><strong>trackingOptOuted</strong></td><td>[0,1]</td><td>if the App user explicitley opts out of Tracking and this Information is relevant for Ads, set this to 1</td></tr><tr><td><strong>consentString</strong></td><td>String</td><td>in TCF/CMP Envrionments, the Player might need the User Consent String for Ad Calls</td></tr><tr><td><strong>alwaysInFullscreen*</strong></td><td>[0,1]</td><td>initially and always show the Player in Fullscreen (default is 0)</td></tr><tr><td><strong>showCloseButtonOnFullscreen*</strong></td><td>[0,1]</td><td>set to 0, if the Fullscreen should not show a "close" Button (default is 1)</td></tr><tr><td><strong>respectViewSizeForAudio</strong></td><td>[0,1]</td><td>(only for TV) set to 1, if you are using an Audio Player on TV, that is not intended to run Fullscreen.</td></tr><tr><td>notificationIcon</td><td>Drawable Ressource</td><td>if set, the Media Notifcation will show this Icon during Playback</td></tr><tr><td><strong>adManager</strong></td><td>NexxPLAYAdManager</td><td>a Reference to the nexxPLAY AdManager Class (if Ads are desired)</td></tr><tr><td><strong>castContext</strong></td><td>CastContext</td><td>compare Chromecast Support Docs for this Parameter.</td></tr><tr><td><strong>mediaSession</strong></td><td>MediaSessionCompat</td><td>compare Global MediaSession Support Docs for this Parameter</td></tr></tbody></table>

{% hint style="info" %}
On TV, the Player will always start in Fullscreen (unless its Audio and respectViewSizeForAudio is set to 1). Therefore, "alwaysInFullscreen" and "showCloseButtonOnFullscreen" have no Effect.
{% endhint %}

## Player Configuration

Just like the Javascript Player, the Player can be configured by a Configuration Object. This Object will be used in one of the various play() Methods of the SDK.

All Options are identical to the general SDK Override Options, you will find here:

{% content-ref url="/pages/-M9FfDOPhMEysfN-axhI" %}
[SDK Override Options](/integration-enhancements/override-options)
{% endcontent-ref %}

{% hint style="info" %}
Please notice, that some Options only make sense in the Web and are therefore not supported.&#x20;

In case of "starting the Player muted", please notice the special Overrides for native Players on the same link.
{% endhint %}

If you are looking for the TCF Consent String Management, this is documented here:

{% content-ref url="/pages/-MGx77wpSdS\_W2GSojWL" %}
[GDPR and TCF 2.0](/security-and-accessibility/gdpr-and-tcf-2.0)
{% endcontent-ref %}

## Public Methods

### Preparing and Configuring the Player

```swift
//Sets the environment object for the player. This method must be called before any start method is called
setEnvironment(NexxPLAYEnvironment nexxPLAYEnvironment)
```

```swift
//update a previously defined Environment Value
//domain, language, sessionID and alwaysInFullscreen cannot be updated
updateEnvironment(String key, String value)
```

```java
//start the Player with the given Media
startPlay(String streamtype, String mediaID, NexxPLAYConfiguration configuration)
```

```swift
//start the Player with a given GlobalID
startPlayWithGlobalID(String globalID, NexxPLAYConfiguration configuration)
```

```swift
//start the Player with a Remote Media Reference
startPlayWithRemoteMedia(String streamtype, String reference, String provider, NexxPLAYConfiguration configuration)
```

```swift
//update a previously defined Configuration. 
//supported are currently only the ad*URL Configuration Settings (and webURLRepresentation).
updateConfiguration(String key, String value) 
```

```swift
//will clear all currently cached Data
clearCache()
```

### Playback Control

```swift
//restart a paused Player
play()
```

```swift
//pauses a playing Player
pause()
```

```swift
//pauses/restarts a Player, depending on its current State
toggle()
```

```swift
//mutes the Player
mute()
```

```swift
//unmutes the Player
unmute()
```

```swift
//seeks to the given Time, if the Media supports that
seekTo(Float time)
```

```swift
//seeks relatively by a certain amount of Seconds, if the Media supports that
seekBy(Float seconds)
```

```swift
//swap to the next Item in a Container Element
next()
```

```swift
//swap to the previous Item in a Container Element
previous()
```

```swift
//swap to a new Item in a Container Element
swapToPosition(int position)
```

```swift
//swap to a completely new Media Item
swapToMediaItem(String mediaID, String streamtype:String, int startPosition = 0, Double delay = 0, String reason = "", Boolean showReturnButton = false)
```

```swift
//swap to a completely new Media Item, referenced by a GlobalID
swapToGlobalID(String globalID, int startPosition = 0, Double delay = 0, String reason = "", Boolean showReturnButton = false)
```

```swift
//swap to a completely new Media Item, referenced by a Remote Reference
swapToRemoteMedia(String reference, String streamtype, String provider, Double delay = 0, String reason:String = "", Boolean showReturnButton = false)
```

### Requesting Player Status and Details

```swift
//returns Information about the currently played Media Item
getCurrentMedia(): tv.nexx.play.android.MediaData
```

```java
//returns Information about the Container Element of the currently played Media Item
getCurrentMediaParent(): tv.nexx.play.android.MediaParentData
```

```java
//returns Information about the current Playback State of the Player
getCurrentPlaybackState(): tv.nexx.play.android.PlaybackState
```

```swift
//returns the Captions of the current Media Item (or only the ones matching the given Language)
getTextTracks(): tv.nexx.play.android.TextTrack[]
```

```swift
//returns all available Audio Tracks of the current Media
getAudioTracks(): tv.nexx.play.android.AudioTrack[]
```

```swift
//returns the current playback time of the Player
getCurrentTime(): Float
```

```java
//returns the Files, connected to the current Media
getConnectedFiles(): tv.nexx.play.android.ConnectedFile[]
```

```swift
//returns true, if the Player is currently playing
isPlaying(): Boolean
```

```swift
//returns true, if the Player is currently playing an Ad
isPlayingAd(): Boolean
```

```swift
//returns true, if the Player is currently muted
isMuted(): Boolean
```

```swift
//returns true, if the Player is currently in PictureToPicture Mode
isInPiP(): Boolean
```

```java
//returns true, if the Player is currently casting
isCasting(): Boolean
```

### LocalMedia and Offline Playback

nexxPLAY for android also supports Playback of previously downloaded Media Items and therefore offers some SDK Methods to manage localMedia.

```swift
//start a Download of a given Media Item (internal ID or Remote Reference)
startDownloadLocalMedia(String mediaID, String streamtype, @Nullable String provider)
```

```swift
//returns a List of currently available localMedia Items
listLocalMedia(@Nullable String streamtype)
```

```swift
//returns true, if the referenced Media Item is already available locally
hasDownloadOfLocalMedia(String mediaID, String streamtype, @Nullable String provider): Boolean
```

```swift
//remove a previously downloaded Media Item
removeLocalMedia(String mediaID:String, String streamtype, @Nullable String provider:String)
```

```swift
//remove all previously downloaded Media Items
clearLocalMedia(@Nullable String streamtype)
```

```swift
//returns the currently used Storage by downloaded Media Items
diskSpaceUsedForLocalMedia():long
```

{% hint style="info" %}
This Feature must be enabled within nexxOMNA. Furthermore, various Settings to finetune the Details of the localMedia Behaviour can be setup there. Contact 3Q for more Information.
{% endhint %}

## Player Notifications

Just like the Javascript Player, the Player emits all Events to a Listener Function, that can be configured as outlined below. The Player Class has to implement the NexxPLAYNotification.Listener Interface in this case.

```java
import tv.nexx.android.play.NexxPLAYConfiguration;
import tv.nexx.android.play.NexxPLAYEnvironment;
import tv.nexx.android.play.NexxPLAYNotification;
import tv.nexx.android.play.INexxPLAY;
import tv.nexx.android.play.player.IPlayer;

public class PlayerActivity implements NexxPLAYNotification.Listener {

    private INexxPLAY player;
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
    ...    
    }
    
    @Override
    public void onResume() {
        super.onResume();
        player.addPlaystateListener(this);
        player.onActivityResume();
    }

    @Override
    public void onPause() {
        super.onPause();
        player.removePlaystateListener(this);
        player.onActivityPause();
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
        player.onActivityDestroyed();
    }
}
    @Override
    public void onPlayerEvent(NexxPLAYNotification.IPlayerEvent playerEvent) {
        //do something with the Event
    }
    
    @Override
    public void onPlayerStateChanged(IPlayer.State state) {
        //do something 
    }

    @Override
    public void onPlayerError(String reason, String details) {
        //do something 
    }

    @Override
    public void onFullScreen(boolean fullScreen) {
        //do something 
    }
    
}
```

{% content-ref url="/pages/-M9Ff8FIIKv2tr-6mtmf" %}
[Player Events](/integration-enhancements/player-events)
{% endcontent-ref %}

## Ad Support

nexxPLAY supports Video Ads on all Platforms. This is handled internally with the Google IMA Framework. To minimize the Google Footprint in the Android Manifests, nexxPLAY seperates the Ad Functionality from the main SDK since Version 6.3.00.

To support Ads, just add a Reference to the latest AdManager SDK and add a Reference to the Player Environment like the following:

```
dependencies { 
    ...
    implementation 'tv.nexx.android:admanager:1.+'
    ...
}
```

```java
import tv.nexx.android.play.NexxPLAY;
import tv.nexx.android.play.NexxPLAYEnvironment;

public class PlayerActivity{
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
    ...

      //define the Player object
      NexxPLAY player = new NexxPLAY(this, root, getWindow());

      //define an Environment and specify at least the DomainID
      NexxPLAYEnvironment env = new NexxPLAYEnvironment(new HashMap<String, Object>() {{
         put(domain, ":domainid");
         put(adManager, new NexxPLAYAdManager(PlayerActivity.this))
         ...
      }});
      player.setEnvironment(env);
      ...
    }
```

## TV Support

### Remote Control

nexxPLAY for android works identical on mobile Devices as on Phones - unless the Platform demands different Behaviour. Most significantly, you must support Remote Control Input and forward it to the Player:

```java
import tv.nexx.android.play.NexxPLAYConfiguration;
import tv.nexx.android.play.NexxPLAYEnvironment;
import tv.nexx.android.play.NexxPLAYNotification;
import tv.nexx.android.play.NexxPLAY;

public class PlayerActivity implements NexxPLAYNotification.Listener {
    
    ...
 
    @Override
    public boolean dispatchKeyEvent(KeyEvent event) {
        NexxPLAY player = NexxPlayProvider.getInstance();
        if (player != null && player.dispatchKeyEvent(event)) {
            return true;
        }
        return super.dispatchKeyEvent(event);
    }
}
```

### Fullscreen

As it is common on TV to show the Player in Fullscreen, the Overrides "alwaysInFullscreen" and "showCloseButtonOnFullscreen" are ignored on this Platform.

In case the Player will use Audio Contents on TV, it might make sense to not use it Fullscreen. Use the Configuration Option "**respectViewSizeForAudio"** in this Case.

### Homescreen Rows

nexxPLAY for Android TV also support the "WatchNext" System, if possible (GoogleTV needs a manual Review for this Feature).&#x20;

In order to make this work, a valid **contentURITemplate** and **contentIDTemplate** must be set. This can be done either within nexxOMNIA or via the Environment Settings.

Please notice, that nexxOMNIA can also manage the Channel Rows on androidTV. For this, you must also add the "Channel Widget" to your Project (see below).

## Picture-in-Picture

To enable Picture-in-Picture (on mobile, Tablet and/or TV) add the following code:

```java
import tv.nexx.android.play.NexxPLAYConfiguration;
import tv.nexx.android.play.NexxPLAYEnvironment;
import tv.nexx.android.play.NexxPLAYNotification;
import tv.nexx.android.play.NexxPLAY;

public class PlayerActivity implements NexxPLAYNotification.Listener {

    ...
 
    @Override
    public void onUserLeaveHint() {
        NexxPLAY player = NexxPlayProvider.getInstance();
        if (player != null) {
            player.onUserLeaveHint();
        }
    }

    @Override
    public void onPictureInPictureModeChanged(boolean isInPictureInPictureMode, Configuration newConfig) {
        NexxPLAY player = NexxPlayProvider.getInstance();
        if (player != null) {
            player.onPictureInPictureModeChanged(isInPictureInPictureMode, newConfig);
        }
    }
}
```

{% hint style="info" %}
Picture-in-Picture must also be declared in the App Manifest, at least like this:

`android:supportsPictureInPicture="true"`
{% endhint %}

{% hint style="info" %}
Picture-in-Picture also requires to be enabled in nexxOMNIA Player Settings and/or Configuration with Overrides.

Additionally, it may not be available on all Devices, depending on Hardware Capabilities.
{% endhint %}

## Chromecast

nexxPLAY for android supports Chromecast and Casting on mobile and Tablet Devices.

Chromecast can only be used, if 3Q adds this Module to the target Domain. If Chromecast Module is enabled, follow these Implementation Steps to enable Chromecast also in the android App.

First, add the Chromecast Receiver Application ID (from 3Q) to your "res/values/strings.xml":

```xml
...
<string name="chromecast_receiver_app" translatable="false">RECEIVER_APP</string>
...
```

Add the latest Cast Framework to the build.gradle of the App:

```
implementation 'com.google.android.gms:play-services-cast-framework:21.5.0'
```

Add the nexxPLAY CastOptionsProvider Class as MetaData to the Manifest:

```xml
<application>
    ...

  <receiver
    android:name="androidx.mediarouter.media.MediaTransferReceiver"
    android:exported="true"></receiver>

  <meta-data
    android:name="com.google.android.gms.cast.framework.OPTIONS_PROVIDER_CLASS_NAME"
    android:value="tv.nexx.android.play.cast.CastOptionsProvider"/>

</application>
```

Within the main Application, as early as possible and in the "onCreate" Method, initiate the CastContext, provided by Google Play Services and save it. This CastContext should be used then every time, nexxPLAY is initiated.

```java
public class MainActivity{
    ...
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        CastContext.getSharedInstance(this, Executors.newSingleThreadExecutor())
            .addOnSuccessListener(castContext -> {
                mCastContext=castContext;
            }).addOnFailureListener(exception -> {
                //some Devices (especially TVs etc) may not support Casting
            });
    }
    ...
}
```

Every time, the Application starts a new nexxPLAY Instance, set NexxPLAYEnvironment.castContext to the captured CastContext (mCastContext in this Example). The rest will be handled by nexxPLAY internally.

## Global MediaSession

normally, there is no need to handle MediaSession and TransportControl app-wise, as nexxPLAY will handle this automatically and initiate/terminate the necessary Objects and States corresponding to Config and System Capabilities.

If your App needs a consistent MediaSession though (for example for Assistant Commands), you can use the Environment Options mediaSession and send your Global MediaSession to the Player, whenever it is initiated. In this case, the Player will NOT terminate the Session, even if it will be destroyed. Nevertheless, as the Player changes the Callbacks of the MediaSession, your App might have to set the App-related Callbacks later.

In case nexxPLAY received an app-related Command via MediaSession while active, the App will be informed about that via the nexxPLAY Event System.

## Notch and Display CutOut

nexxPLAY will automatically respect the App Notch Settings and expand under it, if defined. If this is desired, configure the App Theme like:

```xml
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
```

## Flutter

nexxPLAY for android is also supported in Flutter.

{% content-ref url="/pages/I4sQFBaDuwEGhpqIzyuZ" %}
[nexxPLAY for Flutter](/native-players/nexxplay-for-flutter)
{% endcontent-ref %}

## Widgets

The android Platform also supports native Widgets by nexxPLAY.

{% content-ref url="/pages/-MMFMBDvqErCYtTFzLsE" %}
[Android Widget](/widgets/widgets-for-native-apps/android-widget)
{% endcontent-ref %}

{% content-ref url="/pages/KZHHKKOZSsuMmdsjOI8y" %}
[Android TV Channel](/widgets/widgets-for-native-apps/android-tv-channel)
{% endcontent-ref %}


# nexxPLAY for Flutter

nexxPLAY for Flutter allows the Integration of nexxPLAY for android in any Flutter Project

nexxPLAY offers also an official Flutter Plugin for Integration in Flutter Projects (on android).

All Player Funcitonality of the native android SDK are also supported via Flutter, most important that is:

* Environment and Configuration Settings
* Event System
* Fullscreeen
* PiP
* SDK Methods and Options

You can find the official Plugin in its latest Version here:

{% embed url="<https://pub.dev/packages/nexxplay>" %}

3Q also provides a sample Application based on the Flutter Package with additional Documentation here:

{% embed url="<https://github.com/3qnexx/nexxPLAY-Flutter>" %}

{% hint style="info" %}
We strongly recommend, that especially for more complicated Cases with many SDK Methods, Picture-in-Picture and Fullscreen, you take a look at the example main.dart File, as given in the Sample Project.
{% endhint %}


# Platform Plugins

Although the Javascript SDK and the iFrame Integration work on nearly every Platform, a specific Plugin for a specific Environment is sometimes more helpfull.

If you are using WordPress for your Websites, the nexxPLAY for Wordpress Plugin is a very easy Way to include your Media into your Websites:

{% content-ref url="/pages/-M9YSzY8LDBA1BLLOJ60" %}
[Wordpress Plugin](/platform-plugins/wordpress-plugin)
{% endcontent-ref %}

Google AMP is an important Platform for many Publishers. 3Q offers an officially approved SDK for this here:

{% content-ref url="/pages/-M9FeH6afjJulKoh5Zvf" %}
[Google AMP](/platform-plugins/google-amp)
{% endcontent-ref %}

If your Website is built with the React Framework, the following official Plugin might be more easy to handle than a simple iFrame Helper:

{% content-ref url="/pages/GW8OXFimTQ2naUZD59wy" %}
[React Plugin](/platform-plugins/react-plugin)
{% endcontent-ref %}


# Google AMP

The nexxPLAY Embed Code System works automatically also in a Google AMP Environment. Nothing has to be changed compared to the default Way of Embedding.

### AMP Plugin

3Q offers an official AMP Plugin for nexxPLAY, which handles all available Settings automatically.

You can find all Details of this Plugin here:

{% embed url="<https://www.ampproject.org/docs/reference/components/amp-nexxtv-player>" %}

A basic Integration would look like this:

```markup
<amp-nexxtv-player
 data-mediaid="ABCDEFGHIJKL"
 data-domain="999"
 data-streamtype="video"
 data-mode="static"
 data-disable-ads=”1”
 layout="responsive"
 width="480" 
 height="270"
 ></amp-nexxtv-player>
```

### Attritubes

| **data-mediaid (required)**                 | Represents the ID of the media you want to play.                                                                                                                                                                                        |
| ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **data-client OR data-domain-id(required)** | Your domain ID.                                                                                                                                                                                                                         |
| **data-streamtype (optional)**              | <p>Indicates the media streaming type, which can be one of the following:</p><ul><li>video (default)</li><li>audio</li><li>playlist</li><li>audioalbum</li><li>live</li><li>radio</li><li>set</li><li>rack</li><li>collection</li></ul> |
| **data-mode (optional)**                    | Indicates the data mode, which can be `static` (default) or `api`.                                                                                                                                                                      |
| **data-disable-ads (optional)**             | Ads are enabled by default. Set value to 1 to disable.                                                                                                                                                                                  |
| **data-streaming-filter (optional)**        | Set streaming filter e.g. "nxp-bitrate-0750" for max 750kbit max bitrate.                                                                                                                                                               |
| **data-exit-mode (optional)**               | <p>Defines player exit screen</p><ul><li>replay</li><li>loop</li><li>load</li></ul>                                                                                                                                                     |
| **common attributes**                       | This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes?format=websites) extended to AMP components.                                                                       |

### Custom AMP iFrame

You do not have to use the Plugin, you can also use your own iFrame Solution, if necessary. In those Cases though, it will help to indicate to the Player, that this iFrame is displayed in an AMP Environment:

{% hint style="info" %}
Although not necessary in all Situations, adding the "platform=amp" Parameter will help the Player to distinguish Platforms and optimize Reporting.&#x20;
{% endhint %}


# Wordpress Plugin

The Management of nexxPLAY Embeds can be simplified by using the nexxPLAY for WordPress Plugin, if your CMS System is compatible with WordPress 5 (or higher):

{% embed url="<https://wordpress.org/plugins/nexxplay/>" %}

You can access all Media Items, stored in your nexxOMNIA Account directly from the WordPress Sidebar, once you linked your nexxOMNIA Account with this Plugin.

The Plugin also supports nexxPLAY Widgets, AI-driven Content Selection based on the surrounding Post and custom EmbedURLs.


# React Plugin

The nexxPLAY Embed Code System works also in any React Project. You can simply embed any iFrame Plugin to embed a nexxPLAY instance directly.

For more Control, 3Q nexx offers a dedicated React Plugin, that can be added to your Project easily. It supports all Streamtypes and Widgets and all Post-Message controlled Functionality.

You can find the Project here:

{% embed url="<https://github.com/3qnexx/nexxPLAY-React>" %}

## Basic Integration

```javascript
npm install nexxplay-react
```

A very simple Usage could look like this:

```javascript
import {NexxPLAY} from "nexxplay-react";

export default function TestPlayer{

	return (
		<div style={{width:"640px",height:"320px"}}>
			<NexxPLAY domain="999" mediaHash="ABCDEFG" streamtype="video" params="{{autoPlay:0}}" />
		</div>
	);

}
```

## Supported Attributes

You can use the following Attributes directly in your JSX - only "domain" and "mediaHash" are mandatory, the rest is optional (if you need any other Streamtype than "video", "streamtype" is also mandatory").

| Attribute           | Type                                                                                                                                                                         | Description                                                                                                                |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| **domain**          | int                                                                                                                                                                          | your 3Q nexx Domain ID                                                                                                     |
| **mediaHash**       | String                                                                                                                                                                       | the "Hash" of the Media, you want to include                                                                               |
| **streamtype**      | \[video, audio, live, radio, playlist, audioalbum, collection, set, rack, widget]                                                                                            | the Streamtype of the given Media Hash. If omitted, defaults to "video".                                                   |
| **deliveryPartner** | String                                                                                                                                                                       | if the Media Reporting should be connected to a Delivery Partner, add its Code here.                                       |
| **protocol**        | String                                                                                                                                                                       | if you want to force "http" Usage, set this to "http". It defaults to "https".                                             |
| **params**          | Object with the following possible Keys \[autoPlay, language, direction, dataMode, exitMode, streamingFilter, consentString, delay, disableAds, affiliateCode, campaignCode] | if you need additional Parameters, that would be appended via GET Parameters, set them here.                               |
| **embedHost**       | String                                                                                                                                                                       | if you use a custom Embed Domain, enter the Domain (without protocol and Slashes) here. It defaults to "embed.nexx.cloud". |
| **onPlayerEvent**   | function                                                                                                                                                                     | to receive PlayerEvents in your app (see below)                                                                            |
| **onPlayerData**    | function                                                                                                                                                                     | to receive Player Metadata in your app (see below)                                                                         |

## Interacting with the Player

If you want to interact with the Player, use the "useRef" Hook from React to control the Player Instance. For Notification/Reporting on the various Player Events, you can use the "setEventListener" Method of the Player.

```javascript
import {useRef,useEffect} from 'react';
import {NexxPLAY} from "nexxplay-react";

export default function TestPlayer{

	const player=useRef(null);

        useEffect(() => {
 		if(player.current){
 			player.current.setEventListener(onEvent);
 		}
    	}, []);
    
    	function onEvent(event){
    		console.log(event);
    	}
	
	return (
		<div style={{width:"640px",height:"320px"}}>
			<NexxPLAY domain="999" media="ABCDEFG" streamtype="video"
				ref={player} />
		</div>
	);

}
```

## Available Functions

You can control each Player Instance after it has been created with the general SDK Functions from within React by using the "useRef" Hook and use its Methods afterwards.

```javascript
import {useRef} from 'react';
import {NexxPLAY} from "nexxplay-react";

export default function TestPlayer{

	const player=useRef(null);

	function pausePlayer(){
		if(player.current){
			player.current.pause();
		}
	}
	
	function seekToPosition(position){
		if(player.current){
			player.current.seekTo(position);
		}
	}
	
	return (
		<div style={{width:"640px",height:"320px"}}>
			<NexxPLAY domain="999" media="ABCDEFG" streamtype="video"
			ref={player} />
		</div>
	);

}
```

You can use (nearly) all Functions, that are given in the SDK Overview here:

{% content-ref url="/pages/-M9Y4SzQwnl-IPlt\_6KF" %}
[Playback Control](/javascript-sdk/playback-control)
{% endcontent-ref %}

## Available Events

If you decide to listen for the Player Events, you will receive all Events, that are given here:

{% content-ref url="/pages/-M9Ff8FIIKv2tr-6mtmf" %}
[Player Events](/integration-enhancements/player-events)
{% endcontent-ref %}

The React Plugin for nexxPLAY also supports Widgets.

{% content-ref url="/pages/L0cxcOPppweV3SR3e3Aw" %}
[Widget React Plugin](/widgets/widget-react-plugin)
{% endcontent-ref %}


# Integration Enhancements

After the Integration of nexxPLAY into your Pages (or Apps), there may be some more Details, that can optimize the Integration.

If you are integrating Audio Content (or Podcasts), you should take a Look at the Implementation Details for Audio Players, as a default Audio Player behaves differently than a Video Player:

{% content-ref url="/pages/-M9FeePXI2dTAIIx9Pg-" %}
[Audio Player](/integration-enhancements/audioplayers)
{% endcontent-ref %}

Many Pages and Apps needs statistical Data for their Reporting. The nexxPLAY Player Events handle this:

{% content-ref url="/pages/-M9Ff8FIIKv2tr-6mtmf" %}
[Player Events](/integration-enhancements/player-events)
{% endcontent-ref %}

If you need to consider GDPR Compliance Rules, please verify the necessary Changes here:

{% content-ref url="/pages/-MGx77wpSdS\_W2GSojWL" %}
[GDPR and TCF 2.0](/security-and-accessibility/gdpr-and-tcf-2.0)
{% endcontent-ref %}

If you are monetizing your Media with Ads, take a look at nexxPLAY VAST Macros:

{% content-ref url="/pages/-M9FeS7MId6XM1cc6S48" %}
[VAST Macros](/integration-enhancements/vast-macros)
{% endcontent-ref %}


# Player UI

### Player Skins

nexxPLAY is available with lots of Features and Settings - most of them also influence the Layout - the available Buttons, Icons and their Positiong.

Nevertheless, as a first Indication, the following Player Skins are generally available within nexxOMNIA (and can also be set via SDK Override).

![Standard (2020)](/files/-MEmcKLU3FpjGPv4Rk9T)

![Modern (2019)](/files/-MEmcNInusvNyGxQ1hA0)

![Modern (2018)](/files/-MEmcPtPRWqByp3pANkP)

![Windows 10](/files/-MEmcT1cQd0Ph38cCs0r)

![Floating Bar](/files/-MEmcVv78waxeLfEnWI_)

![Classic (more Variants are available)](/files/-MEmc_MyE3kEWzfdS5Wx)

![Moving Bars](/files/-MEmdCrs2k3ITtpVHaVB)

{% hint style="info" %}
Please dont confuse these general Skins with the final Layout within your nexxPLAY. Each Skin can and will be customized by setting Colors, Spaces, Radius, Icons, Backgrounds, Transparency and many many more Variations.
{% endhint %}

### Icon Sets

![Solid](/files/-MEmcKLU3FpjGPv4Rk9T)

![Regular](/files/-MFFqw3PhWGCEiWE0hUY)

![Light](/files/-MFFr0MuiLEcC4RII7Re)

![Thin](/files/lvR46e8nv5TJ002WERj7)


# Audio Player

It is fully supported to use nexxPLAY for playing Audio Files instead of Videos in the same Container with the same Dimensions. nexxPLAY will show the Audio ArtWork instead of the Video in this Case. This Case is also usefull, if the Player shall combine Audio Playback with Video Ads.

Nevertheless, in many Cases, the Player shall look more like a classic Audio Player and needs far less Space. There is no special Configuration needed, just style the surrounding Containers according to these Rules:

## **Micro Player**

* shows only a Seekbar, Playbutton and Times
* will be automatically applied, if the Player Height is less than **64px**

## **Mini Player**

* identical to Micro Player, but shows additionally Artwork, Title and Subtitle/Author, according to available Space
* will be automatically applied, if the Player Height is less than **110px** and higher than **64px**

Every Player Container, with a Height larger than **110px** will use the classic Layout (unless otherwise configured within nexxOMNIA).

## Audio Player UI

Please also notice, that Video Players often use a black Layout – which is not common for simple Audio Players. The Design Colors for the Micro/Mini/Hero Audio Players can be set within nexxOMNIA and/or set via Player Override.

## Playback on native Players

The native SDKs of nexxPLAY also support Audio Playback. In these Cases, the Playback also supports Download/Offline Listening and continuing Playback while the Phone/Tablet has no active Screen.

The Layout Variants "**Micro**" and "**Mini**" are also supported here, on Phones, Tablets and (in case of android), also on TV.

{% content-ref url="/pages/-M9Ye7-tHyas2tvRenYE" %}
[nexxPLAY for iOS](/native-players/nexxplay-for-ios)
{% endcontent-ref %}

{% content-ref url="/pages/-M9Ye9Mxc1uksG\_XiGUp" %}
[nexxPLAY for Android](/native-players/nexxplay-for-android)
{% endcontent-ref %}

{% content-ref url="/pages/I4sQFBaDuwEGhpqIzyuZ" %}
[nexxPLAY for Flutter](/native-players/nexxplay-for-flutter)
{% endcontent-ref %}


# Player DataMode

nexxPLAY is able to work in a **`static`**&#x44;ataMode, which works without usage of the API. Every Client is allowed to enable this DataMode for their Players by using the appropriate SDK Overrides (or configure the general Rule via nexxOMNIA).

Please notice the following Restrictions of this DataMode carefully:

* Only available with the Playmodes: **`video, scene, audio, live`** and **`radio`**. The GlobalID System also supports this DataMode (as long as it references a Streamtype, that supports it). The "**autoContent**" and "**remote**" Playback Modes do not support static DataMode.
* Will not work, if CDN Security methods (Tokenizing, DRM) are used.
* Due to the fact, that the player uses a pre-rendered JSON Config file in this case, it is not guaranteed, that Domain Settings, Metadata and Video Suggestions always reflect the latest Configuration. The Backend Service will update these Files as soon as possible, but if up-to-date Information is absolutely necessary, the usage of this DataMode is not suitable.
* The following Functionalities of nexxPLAY will be automatically disabled:
  * MultiLanguage Texts
  * Pay Management
  * User-based Features (Favourites, personal Recommendations, Likes etc)
  * Addons (except Recommendations)
  * Session-based Restrictions:
    * Geo restricted Access
    * Device Number restricted Access
    * User Login State restricted Access
  * Geo-specific Ad Providers


# Player Events

The nexxPLAY SDK makes heavy Use of various Events. In order to react to them, the Page must add Listeners to those Event Types, it is interested in.

## The Playstate Listener

This is the most used Listeners and receives all Events, that are exposed by a nexxPLAY Player Instance.

```javascript
_play.config.addPlaystateListener(function);
```

The given **Function** will then be called for every Player related Event of every Player with a lot of Metadata. The **Function** will get an Object, that can easily be filtered by **`object.type`** to handle only the Events, the Page is interested in.&#x20;

{% hint style="info" %}
Please notice, that this Function will receive ALL Events of ALL Players. If that is not desired, dont use a global Listener, add a Player-specific Listener with the **`_play.PlayerConfiguration.playstateListeners`** Override.
{% endhint %}

## All available Events

Here is the current List of all emitted Events (that are related to Media Playback):

| Event                  | Description                                                                                                                                                                                                                                                                       |
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **playeradded**        | a new Player Instance has been added                                                                                                                                                                                                                                              |
| **startsession**       | the Player inited (or re-used) a Session                                                                                                                                                                                                                                          |
| **metadata**           | the Media Item Metadata has been loaded, parsed and verified                                                                                                                                                                                                                      |
| **playerready**        | the Player is ready to start Playback                                                                                                                                                                                                                                             |
| **startplayback**      | the Player is starting Playback (Content or Ad)                                                                                                                                                                                                                                   |
| **startplay**          | the Player is starting Playback of Content                                                                                                                                                                                                                                        |
| **maininteraction**    | the User clicked on the Player the first Time                                                                                                                                                                                                                                     |
| **changemedia**        | the Player swaps to a new Media Item, that is not Part of the current List                                                                                                                                                                                                        |
| **changeplaypos**      | the Player swaps to a new Media Item in the current List                                                                                                                                                                                                                          |
| **changemediaintent**  | the Player used virtual Prev/Next Controls, that have been activated (or the Playback has been finished and forcePrevNext is active OR ErrorExit has been disabled and the Player needs a new Media Item). This Event must be answered with a Call to one of the swapMedia Calls. |
| **showoverlay**        | the Player opens the Overlay UI                                                                                                                                                                                                                                                   |
| **hideoverlay**        | the Player closes the Overlay UI                                                                                                                                                                                                                                                  |
| **enterfullscreen**    | the Player enters Fullscreen                                                                                                                                                                                                                                                      |
| **exitfullscreen**     | the Player exists Fullscreen                                                                                                                                                                                                                                                      |
| **enterpip**           | the Player enters PiP                                                                                                                                                                                                                                                             |
| **exitpip**            | the Player exits PiP                                                                                                                                                                                                                                                              |
| **enterpopout**        | the Player enters PopOut Mode                                                                                                                                                                                                                                                     |
| **exitpopout**         | the Player exits PopOut Mode                                                                                                                                                                                                                                                      |
| **enterremote**        | the Player enters a Remote Display (AirPlay, Chromecast)                                                                                                                                                                                                                          |
| **exitremote**         | the Player exists a Remote Display (AirPlay, Chromecast)                                                                                                                                                                                                                          |
| **trickplay**          | the Player changes Playback Speed                                                                                                                                                                                                                                                 |
| **play**               | the Media Item is playing                                                                                                                                                                                                                                                         |
| **replay**             | the Playback starts again                                                                                                                                                                                                                                                         |
| **pause**              | the Media Item is pausing                                                                                                                                                                                                                                                         |
| **second**             | every Second of Playback                                                                                                                                                                                                                                                          |
| **quarter**            | every 15 Seconds of Playback                                                                                                                                                                                                                                                      |
| **progress25**         | the Media Item has reached 25% of its Duration                                                                                                                                                                                                                                    |
| **progress50**         | the Media Item has reached 50% of its Duration                                                                                                                                                                                                                                    |
| **progress75**         | the Media Item has reached 75% of its Duration                                                                                                                                                                                                                                    |
| **progress95**         | the Media Item has reached 95% of its Duration                                                                                                                                                                                                                                    |
| **ended**              | the Media Item has been played completely                                                                                                                                                                                                                                         |
| **endedall**           | there is no new Media Item in the Playback List                                                                                                                                                                                                                                   |
| **mute**               | the Player is muted                                                                                                                                                                                                                                                               |
| **unmute**             | the Player unmutes                                                                                                                                                                                                                                                                |
| **unmuteautoplay**     | the Player was muted due to muted AutoPlay, but is now allowed to use Sound                                                                                                                                                                                                       |
| **showhotspot**        | a HotSpot is shown                                                                                                                                                                                                                                                                |
| **hidehotspot**        | a HotSpot is removed                                                                                                                                                                                                                                                              |
| **adcalled**           | the Player is calling for Ads                                                                                                                                                                                                                                                     |
| **adstarted**          | an Ad starts                                                                                                                                                                                                                                                                      |
| **adended**            | an Ad ends                                                                                                                                                                                                                                                                        |
| **aderror**            | ad Ad Error occured                                                                                                                                                                                                                                                               |
| **adclicked**          | an Ad has been clicked                                                                                                                                                                                                                                                            |
| **adresumed**          | a paused Ad is resuming                                                                                                                                                                                                                                                           |
| **adcompanions**       | the Player found Ad Companions, that can be integrated                                                                                                                                                                                                                            |
| **bumperclicked**      | a Bumper has been clicked                                                                                                                                                                                                                                                         |
| **error**              | a fatal Error has occured and the Player cannot continues                                                                                                                                                                                                                         |
| **intersection**       | the Player is more/less visible than before                                                                                                                                                                                                                                       |
| **paypreviewended**    | <p>the Player is stopping, as the Media is a PayPreview Item, which </p><p>reached its free Duration</p>                                                                                                                                                                          |
| **presentationtarget** | <p>the Player was in PresentationMode and the User selected a Media Item </p><p>for Playback in a Detail View</p>                                                                                                                                                                 |
| **downloadstarted**    | the Download of an Attachment, Source File or localMedia Process has started                                                                                                                                                                                                      |
| **downloadprogress**   | returns Information about a started Downloads Progress                                                                                                                                                                                                                            |
| **downloadready**      | a Download has been finished successfully                                                                                                                                                                                                                                         |
| **downloaderror**      | a Download has been finished with an Error                                                                                                                                                                                                                                        |
| **newcontentrequest**  | will be emitted, if the SDK received an App-related Command via MediaSession (only android/androidTV SDK)                                                                                                                                                                         |
| **closerequest**       | will be emitted, if the "back" Button in Fullscreen Mode (enabled via "**showCloseButtonOnFullscreen"** Environmen&#x74;**)** was pressed and therefore, the PlayerView should be removed by the App (only android/androidTV SDK)                                                 |

{% hint style="info" %}
Please notice, that on iOS, the Events (Notification) have a different Name, that is built by the following Rule: **"nexxPlay" + EventName.camelCase() + "Notification"**. So for example, a "**pause**" Notification will become a "**nexxPlayPauseNotification**", and a "**changeplaypos**" Notification will become a "**nexxPlayChangePlayPosNotification**"
{% endhint %}

Every Event consists of a Data Object besides the Event Name. Accessing the Details varies between Player Technologies, but in General, the Events provide at least basic Information of the Media, that it refers to (EVENT.mediaID, EVENT.globalID, EVENT.streamtype).

These Events are also supported by nexxPLAY for iOS and nexxPLAY for android.

{% content-ref url="/pages/-M9Ye7-tHyas2tvRenYE" %}
[nexxPLAY for iOS](/native-players/nexxplay-for-ios)
{% endcontent-ref %}

{% content-ref url="/pages/-M9Ye9Mxc1uksG\_XiGUp" %}
[nexxPLAY for Android](/native-players/nexxplay-for-android)
{% endcontent-ref %}

## Additional Listener Functions

Although the PlaystateListener is the most used Listener, the nexxPLAY SDK offers a variety of other Listener Functionalities, that can be used in advanced Contexts.

```javascript
//get notified for Addon Events
_play.config.addAddonListener(function,addonName);
```

| **Event**         | Description                                             |
| ----------------- | ------------------------------------------------------- |
| **addonrendered** | the Player rendered an Addon                            |
| **addonerror**    | a Player Addon could not be finished and removes itself |

```javascript
//get notified for Widget Events
_play.config.addWidgetListener(function);
```

| **Event**         | Description                        |
| ----------------- | ---------------------------------- |
| **widgetclicked** | the Widget has been Clicked        |
| **widgeterror**   | the Widget could not load the Feed |

```javascript
//get notified for LifeCycle Events like "freeze"
_play.config.addLifecycleListener(function);
```

```javascript
//get notified for Network Events like "online, offline"
_play.config.addNetworkListener(function);
```

```javascript
//get notified for Geo (and Geo Permission) Events
_play.config.addGeoListener(function);
```


# SDK Override Options

The following List reflects all Key/Value Pairs, that can be used in a **`_play.PlayerConfiguration`** Object.

## Player Layout and Control

| Key                               | Values                                                                                          | Description                                                                                                                                                                                                                                                           |
| --------------------------------- | ----------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **adjustContainerDimensions\***   | \[0,**1**]                                                                                      | If set to 0, nexxPLAY will never try to change the Dimensions of the Container, even if no width/height is found. This may lead to inconsistent Layouts. If set to 1, nexxPLAY will automatically scale Player Height with **`aspectRatio`**, if necessary.           |
| **aspectRatio\***                 | Float                                                                                           | Used, if **`adjustContainerDimensions`**&#x69;s set to 1 and no style.height Value is found                                                                                                                                                                           |
| **playstateListeners\***          | Array                                                                                           | If you want to use a dedicated Listener only for this PlayerInstance, add an Array of Listener Functions here                                                                                                                                                         |
| **applyFocus**\*                  | \[0,1]                                                                                          | automatically apply Page Focus to the Player after Init Phase                                                                                                                                                                                                         |
| **dataMode**                      | \[api, static]                                                                                  | overrides the Player DataMode                                                                                                                                                                                                                                         |
| **backgroundColor**               | Hex                                                                                             | overrides the Background Color of the Player                                                                                                                                                                                                                          |
| **seekbarColor**                  | Hex                                                                                             | overrides the Color of the Seekbar(s)                                                                                                                                                                                                                                 |
| **playerSkin**                    | \[simple, default, glass, glass66, float, centered, minimal, minimalwithtime, minimalwithright] | overrides the Player Skin - if you use a custom Skin, ask 3Q for Details, as its Codename is not mentioned here.                                                                                                                                                      |
| **loaderSkin**                    | \[default, doublebounce, material, metro, ios]                                                  | overrides the Loading Spinner Skin.                                                                                                                                                                                                                                   |
| **audioSkin**                     | \[image, wave, hero]                                                                            | overrides the Audio Player Layout (only applied, if Player is not in Mini/Micro Mode)                                                                                                                                                                                 |
| **imageScaleMode**                | \[width, height, fixed]                                                                         | controls the Image Scaling of Startimage, Background Image, ExitDisplay Image etc.                                                                                                                                                                                    |
| **popOutClass\***                 | CSS Class                                                                                       | if the Player enters PopOut Mode, the given Class will be applied                                                                                                                                                                                                     |
| **applySafeAreaPadding**          | \[**0**, 1]                                                                                     | if the Player is positioned on the extreme Top on an Edge-to-Edge Layout not in Fullscreen, the Player will add Safety Padding on the extreme Top/Bottom Elements                                                                                                     |
| **applyNotchPadding**             | \[**0**, 1]                                                                                     | if the Player is embedded in a Website, where it may conflict with Notches, apply left/right Padding on the Notch Side                                                                                                                                                |
| **titleMode**                     | \[0, 1, 2]                                                                                      | <p>handles the Title Display Behaviour </p><p><em>0: never show Title,</em> </p><p><em>1: always show Title,</em> </p><p><em>2: show Title only in Fullscreen</em></p><p>(Setting will be ignored on Audio Players)</p>                                               |
| **menuMode**                      | \[0, 1, 2]                                                                                      | <p>handles the Menu Display Behaviour </p><p><em>0: never show Menu,</em> </p><p><em>1: show Menu on MouseOver/Tap,</em> </p><p><em>2: always show Menu</em></p><p>(Setting will be ignored on Audio Players)</p>                                                     |
| **scrollingMode\***               | \[0, 1, 2]                                                                                      | <p><em>0: don’t react to Scrolling at all,</em> </p><p><em>1: pause Player, if less than 50% is visible</em></p><p><em>2: switch to PopOut Player, if less than 50% is visible</em></p>                                                                               |
| **scrollingModeTrigger\***        | \[0-100]                                                                                        | if Scrolling Mode is set, trigger the Behaviour on this Value (=Player is visible at VALUE%)                                                                                                                                                                          |
| **bumperMode**                    | \[0,1]                                                                                          | forces or disables Usage of Bumpers on the given Media Item                                                                                                                                                                                                           |
| **watermarkMode**                 | \[0,1]                                                                                          | forces or disables Usage of Watermark                                                                                                                                                                                                                                 |
| **pauseOnPageVisibility\***       | \[0, 1, 2]                                                                                      | <p>automatically pause the Player, if current Tab is not visible anymore (wont be applied on AudioPlayers):</p><p></p><p><em>0: dont apply this Feature,</em> </p><p><em>1: apply this Feature only during Ads,</em> </p><p><em>2: always apply this Feature</em></p> |
| **streamingFilter**               | 3Q Code                                                                                         | reduces Bandwidth Consumption of the Player to a maximum Value                                                                                                                                                                                                        |
| **streamingFilterDataSaver**      | 3Q Code                                                                                         | this Setting works like streamingFilter, if the Device uses Data Saving.                                                                                                                                                                                              |
| **useContainerMetadata**          | \[**0**, 1]                                                                                     | if playing a Container Media, the Startscreen can show Container Metadata or Item Metadata                                                                                                                                                                            |
| **interactionsOnContainer**       | \[**0**, 1]                                                                                     | if set, this Config influences, which Element is the Target of Interactions (like, rate, react, comment etc). It can be the currently playing Element (default), but the parent Playlist/Audio Album or Series could also receive the Interaction.                    |
| **enableStartScreenTitle**        | \[0, 1]                                                                                         | if set, the Titles on a (possible) StartScreen are shown/hidden - without respecting the Settings on nexxPLAY or the Rules on the current Media.                                                                                                                      |
| **enableSeekbarThumbsBreakOut\*** | \[0, **1**]                                                                                     | if the Seekbar shows Preview Thumbs on Hover/Drag, by default, those Thumbs are displayed close to the Seekbar, so they may break out of the Player. If this should not happen, set this Value to 0.                                                                  |
| **loadCustomAttributes**          | \[**0**, 1]                                                                                     | if the Domain uses Custom Attributes and the Frontend needs those Values, set this Value to 1 to force Loading of these Values. The Frontend can access them with the getMediaData() Functionality.                                                                   |
| **webViewRestrictionsDisabled\*** | \[**0**, 1]                                                                                     | the surrounding WebView guarantees, that AutoPlay can be started without a User Gesture and with Sound. If this Setting is set to 1 AND the WebView does not behave like promised, the Payer may crash or influence the UI.                                           |
| **disableTooltips**               | \[**0**, 1]                                                                                     | if set to 1, the Player will not show Tooltips on hover/focus                                                                                                                                                                                                         |
| **enableSEOJSON\***               | \[0, **1**]                                                                                     | if set to 0, the Player will not insert a JSON+LD Object to the Page, even if that would be allowed otherwise                                                                                                                                                         |
| **enableSEOMicro\***              | \[0, **1**]                                                                                     | if set to 0, the Player will not append HTML5 SEO Microdata, even if that would be allowed otherwise                                                                                                                                                                  |
| **enableStitching**               | \[0, 1]                                                                                         | if set to 0, disables Stitching for the given Media, if the Player would normally use Stitching for Playback                                                                                                                                                          |
| **abTestVersion**                 | \[1, 2]                                                                                         | if an A/B Test is active, force the Player to use the given Value for Cover Display                                                                                                                                                                                   |
| **enableSystemMedia**             | \[none, audio, video, all]                                                                      | defines whether the command center shows and is able to control the current media or not                                                                                                                                                                              |

## Player Functionality

<table data-header-hidden><thead><tr><th width="292.3333333333333">Key</th><th>Values</th><th>Description</th></tr></thead><tbody><tr><td>Key</td><td>Values</td><td>Description</td></tr><tr><td><strong>autoPlay</strong></td><td>[0, 1]</td><td>If set to 1, the Player will start immediately (if Browser supports this)</td></tr><tr><td><strong>autoPlayIfMutedPossible*</strong></td><td>[0, 1]</td><td>If set to 1 AND <strong><code>autoPlay</code></strong> is active, the Player will also try to start automatically, if only muted Playback is possible.</td></tr><tr><td><strong>autoPlayMutedAlways*</strong></td><td>[0, 1]</td><td>in AutoPlay Mode, start muted, even if the Browser would support Playback with Sound</td></tr><tr><td><strong>autoPauseAutoPlayMutedAfterSeconds*</strong></td><td>int</td><td>if set to 0, muted AutoPlay will run forever, otherwise, if will automatically stop after the given Integer (Seconds)</td></tr><tr><td><strong>autoPlayMutedAfterSeconds*</strong></td><td>int</td><td>if set to a Value larger 0 and if the Player does not use AutoPlay, the Player will start muted AutoPlay without User Interaction after the given Integer (Seconds)</td></tr><tr><td><strong>respectAutoPlayDataSaver</strong></td><td>[0, 1]</td><td>if set to 1, the Player will not start automatically, even if other Settings are forcing it, if the current Device uses Data Saving</td></tr><tr><td><strong>autoNext</strong></td><td>[0, 1]</td><td>enables “RevolverPlay” / “Continuous Play”, if an <strong><code>exitMode</code></strong>is defined and Browser supports this.</td></tr><tr><td><strong>delay</strong></td><td>float</td><td>start the Media Item not at the Beginning, but at this Position</td></tr><tr><td><strong>startPosition</strong></td><td>int</td><td>if playing a Container Item, dont start at the Beginning, but at this Item Position</td></tr><tr><td><strong>exitMode</strong></td><td>[replay, loop, load, navigate, stop]</td><td><p><strong>replay</strong>: only show Replay Button on Media End</p><p><strong>loop</strong>: automatically restart on Media End</p><p><strong>stop:</strong> dont do anything</p><p><strong>load/navigate</strong>: load Suggestions and show them in the Player (and start them IN the Player (load) or NAVIGATE to the Media (navigate)</p></td></tr><tr><td><strong>playbackMode</strong></td><td>[default, pseudolive, story, presentation, scenesplit]</td><td>forces the Player to present the UI in the given Playback Mode</td></tr><tr><td><strong>mobileAutoFullscreen*</strong></td><td>[0, 1]</td><td>automatically enters Fullscreen on first User Interaction (on Smartphones only)</td></tr><tr><td><strong>playOnExistingCastSession</strong></td><td>[0, <strong>1</strong>]</td><td>automatically play the new Media on a connected Chromecast, if this Chromecast was connected before and still able to receive Commands</td></tr><tr><td><strong>hidePrevNext</strong></td><td>[<strong>0</strong>, 1]</td><td>if the Player controls a Container Element, it will show prev/next Buttons. If that is not desired, set this Feature to 1</td></tr><tr><td><strong>forcePrevNext</strong></td><td>[<strong>0</strong>, 1]</td><td>if the Player controls a single Element, if will not show prev/next Buttons. If that is desired though, set this Feature to 1 (the Player will emit an "<strong>changemediaintent</strong>" Event, which must be answered via one of the swapMedia SDK Functions)</td></tr><tr><td><strong>disableErrorExit</strong></td><td>[<strong>0</strong>, 1]</td><td>if the Player encounters an Error during Media Playback or API Communication, it normally switches to an Error View. If the Environment can handle it, you can disable ErrorView for these Cases. Instead, the Player emits an "<strong>changemediaintent</strong>" Event, which must be answered via one of the swapMedia SDK Functions)</td></tr><tr><td><strong>enableSystemMedia</strong></td><td>[none, all, audio, video]</td><td>controls the OS-level Media Detail Display and Control of the Player</td></tr><tr><td><strong>enablePictureInPicture</strong></td><td>[0, 1]</td><td>enables/disables PiP Functionality</td></tr><tr><td><strong>enableFullscreen</strong></td><td>[0, 1]</td><td>enables/disables Fullscreen Functionality</td></tr><tr><td><strong>enableSeekingButtons</strong></td><td>[0, 1]</td><td>enables/disables Seeking Buttons</td></tr><tr><td><strong>enableAirPlay</strong></td><td>[0, 1]</td><td>enables/disables AirPlay Functionality</td></tr><tr><td><strong>enableChromecast</strong></td><td>[0, 1]</td><td>enables/disables Chromecast Functionality</td></tr><tr><td><strong>enableSharing*</strong></td><td>[0, 1]</td><td>enables/disables Sharing Button</td></tr><tr><td><strong>enableSidebar</strong></td><td>[0, 1]</td><td>enables/disables Sidebar</td></tr><tr><td><strong>enableInteractions</strong></td><td>[0, 1]</td><td>enables/disables Interactions (like, rate, Favourites)</td></tr><tr><td><strong>enableTrickPlay</strong></td><td>[0, 1]</td><td>enables/disables TrickPlay</td></tr><tr><td><strong>enableScenes</strong></td><td>[0, 1]</td><td>enable/disable Scene Overlay Button</td></tr><tr><td><strong>enableDownloads</strong></td><td>[0, 1]</td><td>if the Player allows Downloads normally, set this Value to 0, if its not allowed on this given Item.</td></tr><tr><td><strong>enableSwipeToSkip</strong></td><td>[0, 1]</td><td>activates the Listeners for moving forwards/backwards to next/previous Element via Swipe Gesture</td></tr><tr><td><strong>enableAutoResume</strong></td><td>[0, 1]</td><td>if the Player normally offers automatic Resume on last Play Position, and this is not desired in a special Case, set this Value to 0.</td></tr><tr><td> <strong>forceShowPopoutSetting*</strong></td><td>[0, 1]</td><td>the User Setting for PopOut Player Control only appears under certain Conditions. If the Player will be controlled by the SDK, it may be needed to show the Setting UI any way.</td></tr><tr><td><strong>webURLRepresentation</strong></td><td>String</td><td>define a URL for the currently playing Media (for Ad Purposes or Sharing). This is only supported in native SDKs (and WebViews).</td></tr></tbody></table>

{% hint style="info" %}
Attributes, marked with a "**\***" are only usefull in a Web Environment and therefore not available for native Players.
{% endhint %}

### Overrides specific for native Player Functionality

| Key                  | Value       | Description                                                                                                           |
| -------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------- |
| **startMuted**       | \[**0**, 1] | the Player will start muted if set to 1                                                                               |
| **adStartWhenMuted** | \[0, 1]     | if the Player started muted AND the Player uses Ads, this Setting will control, if Ads are allowed to play muted too. |

{% hint style="info" %}
Although the Web SDK also supports muted Playback and muted Start, the Overrides for this Functionality make only sense in a Web Environment with Web Restrictions.&#x20;

Starting the Player muted is therefore the only Override, that differs between Web and native Players. Furthermore, native Players ignore any muted Setting, defined within nexxOMNIA.
{% endhint %}

## Ad Management

| Key                         | Values       | Description                                                                                                          |
| --------------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------- |
| **disableAds**              | \[0, 1]      | disable all Ad Types in the Player                                                                                   |
| **disablePrerolls**         | \[0, 1]      | disables only Prerolls                                                                                               |
| **disableMidrolls**         | \[0, 1]      | disable only Midrolls                                                                                                |
| **disablePostrolls**        | \[0, 1]      | disable only Postrolls                                                                                               |
| **adProvider**              | 3Q nexx Code | overrides the configured Ad Provider Code                                                                            |
| **adMinimalDistance**       | int          | <p>manually override the minimal Time, </p><p>that has to pass between two (linear) AdCalls</p>                      |
| **adVASTTimeout**           | int          | manually override the Time (in Seconds), that the Player allows to process a single VAST Call                        |
| **adMediaTimeout**          | int          | manually override the Tme (in Seconds), that the Player allows to process an Ad Media Item                           |
| **adBumperURL**             | url          | manually override the Ad Bumper URL.                                                                                 |
| **adPrerollURL**            | url          | manually override the Ad Preroll URL.                                                                                |
| **adMidrollURL**            | url          | manually override the Ad MidRoll URL.                                                                                |
| **adPostrollURL**           | url          | manually override the Ad Postroll URL.                                                                               |
| **adMidrollInterval**       | int          | <p>manually override the Frequency of Midroll Calls </p><p>(if Interval is the chosen Midroll Logic, in Minutes)</p> |
| **adMidrollUseScenes**      | \[0, 1]      | if set to 1, Midrolls will be shown between Scens/Breakpoints. Otherwise, the Interval Logic will be used.           |
| **adBumperThreshold**       | float        | defines until which Video Duration a Bumper is used instead of a Preroll                                             |
| **adExternalDataFuntion\*** | String       | the Name of a sync Function, that the Player will call for additional Replacements in VAST URLs                      |
| **adExternalDataDefault\*** | String       | if an externalDataFunction is used, the Default Value, if the called Method doesnt return anything                   |

{% hint style="info" %}
Attributes, marked with a "**\***" are only usefull in a Web Environment and therefore not available for native Players.
{% endhint %}

## Addon Management

| Key                       | Values          | Description                                                                                                                                                 |
| ------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **commentBoxContainer**   | HTML Element ID | The ID of a "div" (or other HTML Element), that shall be used by the Player to render Comments (via Comment Addon).                                         |
| **containerBoxContainer** | HTML Element ID | The ID of a "div" (or other HTML Element), that shall be used by the Player to render Sub-Elements (for Playlists, Audio-Albums etc) (via Container Addon). |
| **recoBoxContainer**      | HTML Element ID | The ID of a "div" (or other HTML Element), that shall be used by the Player to render Recommendations (via Reco Addon).                                     |
| **sceneBoxContainer**     | HTML Element ID | The ID of a "div" (or other HTML Element), that shall be used by the Player to render Scenes (via Scene Addon).                                             |
| **albumBoxContainer**     | HTML Element ID | The ID of a "div" (or other HTML Element), that shall be used by the Player to render an Image Album (via Album Addon).                                     |
| **filesBoxContainer**     | HTML Element ID | The ID of a "div" (or other HTML Element), that shall be used by the Player to render connected Files (via Files Addon).                                    |
| **linksBoxContainer**     | HTML Element ID | The ID of a "div" (or other HTML Element), that shall be used by the Player to render connected Links (via Links Addon).                                    |
| **tickerBoxContainer**    | HTML Element ID | The ID of a "div" (or other HTML Element), that shall be used by the Player to render a LiveTicker (via LiveTicker Addon).                                  |
| **pollBoxContainer**      | HTML Element ID | The ID of a "div" (or other HTML Element), that shall be used by the Player to render a Poll (via Poll Addon).                                              |

{% hint style="info" %}
Addons are not supported by native Players.
{% endhint %}


# VAST Macros

nexxPLAY can automatically modify given VAST/VPAID URLs with dynamic content on the fly. As every Ad Provider uses its own Set of Macros/dynamic Replacements, you must modify the VAST URL from your Provider by replacing its Macro Syntax by a Syntax, that nexxPLAY can parse.

The following Macros are currently supported:

| Macro                          | Description                                                                                                               |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------- |
| **{general.random}**           | a random Value (often called CacheBuster)                                                                                 |
| **{general.unique}**           | a unique ID (of the Session)                                                                                              |
| **{page.url}**                 | the URL of the current Page (or of the parent Page, if inside an iFrame)                                                  |
| **{page.externaldata}**        | the result of a predefined Function, that the Player will call to get this String (not available in Apps, iFrames or AMP) |
| **{player.width}**             | the current Width of the Player                                                                                           |
| **{player.height}**            | the current Height of the Player                                                                                          |
| **{media.id}**                 | the Media ID                                                                                                              |
| **{media.title}**              | the Media Title                                                                                                           |
| **{media.duration}**           | the Media Duration (in Seconds, not available on Live Media)                                                              |
| **{container.index}**          | the Position of the current Media inside a Container                                                                      |
| **{channel.adreference}**      | the Ad Reference Token of the Media Channel                                                                               |
| **{studio.adreference}**       | the Ad Reference Token of the Media Studio                                                                                |
| **{domain.adreference}**       | the Ad Reference Token of the current Domain                                                                              |
| **{session.deliverypartner}**  | the Ad Reference Token of the Delivery Partner of the Session                                                             |
| **{session.campaign}**         | the Ad Reference Token of the Campaign of the Session                                                                     |
| **{session.gdprapplies}**      | depending on a TCF 2.0 compliant Frontend, this will be "1" or "0"                                                        |
| **{session.consentstring}**    | the Consent String of the Pages TCF Environment                                                                           |
| **{session.trackingoptouted}** | the current User denied/allowed the Use of personalized Ads/Tracking                                                      |
| **{user.loggedin}**            | depending of the Login State, will be "user" or "non\_user"                                                               |
| **{app.adidentifier}**         | the App Ad Identifier (IDFA) (only in native Players)                                                                     |
| **{app.bundle}**               | the App Bundle ID (only in native Players)                                                                                |

These Macros are also supported by nexxPLAY for iOS and nexxPLAY for android.

{% content-ref url="/pages/-M9Ye7-tHyas2tvRenYE" %}
[nexxPLAY for iOS](/native-players/nexxplay-for-ios)
{% endcontent-ref %}

{% content-ref url="/pages/-M9Ye9Mxc1uksG\_XiGUp" %}
[nexxPLAY for Android](/native-players/nexxplay-for-android)
{% endcontent-ref %}


# GET Parameters

Besides the Possibility to configure nexxPLAY with Overrides, the Javascript SDK automatically interprets GET-Parameters of the current URL and configures the corresponding Overrides automatically.

Supported Parameters are

| Parameter      | Description                                                                                                                                                                                                        |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **nxp\_t**     | Defines the Offset, the Player will start at. This Parameter takes a Float and corresponds to the "delay" Configuration Option.                                                                                    |
| **nxp\_plswi** | Defines the Index of a Container Element, the Player will start at. This Parameter takes an int (starting at 0) and corresponds to the "startPosition" Configuration Option.                                       |
| **nxp\_plswn** | Similar to nxp\_plswi, but instead of defining the Index of the Container, this Parameter takes the ID of the Element to start with (and computes the Index then automatically).                                   |
| **nxp\_sbpc**  | This Parameter defines the StartContext of the Player. It it rarely necessary to set this, but in some Situations, it may be usefull to set this Value to a supported Value to indicate the Origin of this Player. |

{% hint style="info" %}
These Parameters also work in iFrames, if they are appended to the iFrame URL.
{% endhint %}


# Widgets

The Widget Functionality is not fully a Media Delivery Tool, but is made available via the nexxPLAY SDK and nexxPLAY iFrame Systems.

A Widget is a "SlideShow" of exisiting Media Objects of the calling Domain and can be configured as "**AutoExport**" within nexxOMNIA.

As usual, various Platforms are supported.

For Implementation in JS/HTML5:

{% content-ref url="/pages/-MC-fuVrpf2\_Duv-VDk3" %}
[Javascript SDK](/widgets/javascript-sdk)
{% endcontent-ref %}

{% content-ref url="/pages/-MC-fxLVC702UmA7-0r6" %}
[iFrame Integration](/widgets/iframe-integration)
{% endcontent-ref %}

For React

{% content-ref url="/pages/L0cxcOPppweV3SR3e3Aw" %}
[Widget React Plugin](/widgets/widget-react-plugin)
{% endcontent-ref %}

For iOS

{% content-ref url="/pages/-MM\_b9vfXEP\_NX7Y80fk" %}
[iOS Widget](/widgets/widgets-for-native-apps/ios-widget)
{% endcontent-ref %}

For android

{% content-ref url="/pages/-MMFMBDvqErCYtTFzLsE" %}
[Android Widget](/widgets/widgets-for-native-apps/android-widget)
{% endcontent-ref %}

{% content-ref url="/pages/KZHHKKOZSsuMmdsjOI8y" %}
[Android TV Channel](/widgets/widgets-for-native-apps/android-tv-channel)
{% endcontent-ref %}

For Windows 10

{% content-ref url="/pages/-MMFMF1otXheeoVyciFF" %}
[Windows 10 LiveTile](/widgets/widgets-for-native-apps/windows-10-livetile)
{% endcontent-ref %}


# Javascript SDK

After the nexxPLAY SDK is ready, the Frontend can embed as many Widget Containers on the Frontend as desired.

```javascript
_play.control.addWidget(CONTAINER-ID, WIDGET-HASH, WIDGET-STREAMTYPE, CONFIG);
```

{% hint style="info" %}
**CONTAINER-ID** is the id of the target Container on the Page, that the Widget 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 Widget to measure its Dimensions.
{% endhint %}

{% hint style="info" %}
**WIDGET-HASH** is the Reference Hash of an existing AutoExport Widget within nexxOMNIA
{% endhint %}

{% hint style="info" %}
**WIDGET-SECRET** is an optional Security Mechanism, that can be enabled within nexxOMNIA
{% endhint %}

The mentioned **`CONFIG`** is similar to nexxPLAY a Configuration Object, but of Type **`WidgetConfiguration`**.

```javascript
var obj = { feedUpdateInterval: 30, slideUpdateInterval:10 };
var cfg = new _play.WidgetConfiguration(obj);
cfg.addOverride("animation", "zoom");

var widget = _play.control.addWidget("div", "HASH", "SECRET", cfg);
```

You can find a List of all available Override Options here:

{% content-ref url="/pages/-MC-gDOXnzwDKsA-5gZm" %}
[Widget Override Options](/widgets/widget-override-options)
{% endcontent-ref %}

The **`addWidget`** Method will return a **`_play.WidgetInstance`** Object, which can be used to control the Widget via JavaScript after Initialization.


# iFrame Integration

To enable a nexxPLAY Widget on your Pages via iFrame, you need the iFrame Embed URL. This URL can be received within the nexxOMNIA UI - or via the nexxOMNIA API.

The general Structure of a nexxPLAY Widget Embed URL looks like this

**`https://embed.nexx.cloud/:domainid/widget/:widgethash/:widgetsecret`**<br>

{% hint style="info" %}
&#x20;The **:domainid** Parameter is the Domain ID of that Widget
{% endhint %}

{% hint style="info" %}
The **:widgethash** Parameter is the Hash of the Widget
{% endhint %}

{% hint style="info" %}
&#x20;The **:widgetsecret** Parameter is the (optional) Secret for this Widget
{% endhint %}

The full Embed Code would then look like this:

```markup
<iframe width='640' height='360' 
    src='https://embed.nexx.cloud/:domainid/widget/:widgethash/:widgetsecret' 
    frameborder='0'>
</iframe>
```

If you need to modify the Widget Instance within the iFrame, this is more complicated than with the Javascript SDK. Nevertheless, you can use PostMessage Control to achieve this.

{% hint style="info" %}
If the Media Objects within the Feed do not have a valid fixed Link (because nexxOMNIA couldnt define a Link via the "**slug**" Attribute or a **Domain Pattern**), you must listen to Widget Events via PostMessage and handle the Navigation via Script.
{% endhint %}

{% hint style="info" %}
In Contrast to the nexxPLAY iFrame Codes, the **allow** Attributes are not necessary, as Widgets only show Images or inline Video.
{% endhint %}

{% content-ref url="/pages/-M9YTo8ua38YU62FG9b7" %}
[PostMessage Control](/iframe-integration/postmessage-control)
{% endcontent-ref %}

The following Override Options from nexxPLAY are also available for Widget iFrames:

| Parameter         | Description                                                                                                                                                         |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **platform**      | manually set the Player Platform (necessary, if used in an AMP Environemnt without the AMP Plugin - set it to "amp" in this Case)                                   |
| **language**      | manually set the Player Language                                                                                                                                    |
| **affiliateCode** | if the Widgetis launced on a Partner Website, this code indicates the Use of an Affiliate Partner - the corresponding Code can be found within nexxOMNIA            |
| **launchMode**    | If set to **`window`**, the Widget will try to open the Links of Click directly in a new Window. If you want to process the Event directly, set this to **`none`**. |
| **userHash**      | a valid User Reference Hash for personalized Results                                                                                                                |

The Widget System is also supported by the nexxPLAY WordPress Plugin and by nexxPLAY for React.

{% content-ref url="/pages/-M9YSzY8LDBA1BLLOJ60" %}
[Wordpress Plugin](/platform-plugins/wordpress-plugin)
{% endcontent-ref %}

{% content-ref url="/pages/GW8OXFimTQ2naUZD59wy" %}
[React Plugin](/platform-plugins/react-plugin)
{% endcontent-ref %}


# Widgets for native Apps

The nexxPLAY Widgets are also available for native Apps. They work differently on any Platform, but show the same Media Objects.&#x20;

{% hint style="info" %}
The native Widgets do not open any Links directly (except androidTV). They emit an Event, that the corresponding App must handle.
{% endhint %}

## Widget SDK

| Operation System | supported Versions               |
| ---------------- | -------------------------------- |
| **iOS**          | Version 13 (Today Widget)        |
|                  | Version 14+ (HomeScreen Widgets) |
| **android**      | Version 4.1+                     |
| **androidTV**    | Version 8.0+                     |
| **macOS**        | Version 11 (Desktop Widget)      |
| **Windows**      | Version 10 (StartMenu LiveTile)  |


# iOS Widget

For iOS, there are two possible Ways to bring a native Widget to iOS/iPadOS. The standard Way to add a Widget for the Homescreen is available sind iOS 14. Nevertheless, if also lower iOS Versions are supported, there is also a "Today Extension" which brings a simliar Experience to the Today Screen.

You will find the native SDK and the latest Changes here:

{% embed url="<https://github.com/3qnexx/nexxPLAY-iOS>" %}

Unlike android, there is no need for a different SDK, the nexxPLAY SDK includes Support for both Forms of Widgets.

## Widget (iOS 14+)

Since iOS 14 Apple introduced Widgets that can be added to the springboard in different sizes. They behave just as the today extensions, presenting data from their corresponding app and deeplinking into the app once the user has selected an element or the widget itself. In order to add the NexxWidget to our application, please follow these steps:

1. In Xcode select your project and in the targets column, add a new target via the "+" on the bottom
2. Select the "Widget Extension" and give it an appropriate product name
3. In case you are asked to activate the target, please select "Activate"
4. Select your new target and add the nexxPLAY framework to "Frameworks and Libraries"
5. Switch to "Build Phases" and add the nexxPlay.bundle to "Copy Bundle Resources"
6. Remove all code above the `@main` in your widget code file so you only have the imports, the widget struct and its preview left.
7. Surround the complete code with a precompiler check for arm64 or simulators (see code example).&#x20;
8. Configure the widget to your needs by modifying the **`WidgetConfiguration`** and **`WidgetData`** objects
9. Try and run the extension on device/simulator

```swift
#if arch(arm64) || arch(x86_64)
@main
struct MyWidget: Widget {
    private let kind: String = "MyWidget"
    
    var widgetData:NexxPLAYWidgetData {
        let config = NexxPLAYWidgetConfiguration(app: 0, language: "de", slideUpdateInterval: nil, feedUpdateInterval: nil,widgetPreviewImage: "", widgetPreviewTitle: "", widgetPreviewInfo: "")
        return NexxPLAYWidgetData(domain: "", launchURL: "", feedHash: "", feedSecret: "", userHash:"", config: config)
    }

    public var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: WidgetProvider(widgetData: widgetData)) { (entry) -> WidgetEntryView in
            WidgetEntryView(entry: entry)
        }
        .configurationDisplayName("My Widget")
        .description("my widget.")
        .supportedFamilies([.systemSmall,.systemMedium, .systemLarge])
    }
}
```

## Today Extension (iOS 13)

1. In Xcode select your project and in the targets column, add a new target via the "+" on the bottom
2. Select the "Today Extension" and give it an appropriate product name
3. In case you are asked to activate the target, please select "Activate"
4. Select your new target and add the nexxPLAY framework to "Frameworks and Libraries"
5. Switch to "Build Phases" and add the nexxPlay.bundle to "Copy Bundle Resources"
6. In the project tree you should see a new folder with the name you gave the today extension in 2. Open the folder and open the TodayViewController
7. replace the code of the file with the following code:
8. Configure the extension to your needs by modifying the **`NexxPLAYWidgetConfiguration`** and **`NexxPLAYWidgetData`** objects
9. There should also be a "Maininterface.storyboard" that contains a UILabel by default. Please remove the label there.

```swift
import UIKit
import NotificationCenter
import nexxPlay

class TodayViewController: UIViewController, NCWidgetProviding {
        
    var nexxPLAYTodayView:NexxPLAYTodayView = NexxPLAYTodayView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        let config = NexxPLAYWidgetConfiguration(app: 0, language: "de", slideUpdateInterval: nil, feedUpdateInterval: nil,widgetPreviewImage: "", widgetPreviewTitle: "", widgetPreviewInfo: "")
        let widgetData = NexxPLAYWidgetData(domain: "", launchURL: "", feedHash: "", feedSecret: "", userHash:"", config: config)
        
        nexxPLAYTodayView.initializeView(withData: widgetData) { media in
            let urlString = "demoURL://..."
            if let url = URL(string: urlString) {
                self.extensionContext?.open(url, completionHandler: nil)
            }
        }
        nexxPLAYTodayView.add(toView: self.view)
    }
    
    func widgetPerformUpdate(completionHandler: (@escaping (NCUpdateResult) -> Void)) {
        nexxPLAYTodayView.widgetPerformUpdate() { (height) in
            if let height = height {
                self.extensionContext?.widgetLargestAvailableDisplayMode = .expanded
                self.preferredContentSize = CGSize(width: self.view.frame.size.width, height: height)
                completionHandler(.newData)
            } else {
                completionHandler(.failed)
            }
        }
    }
    
    func widgetActiveDisplayModeDidChange(_ activeDisplayMode: NCWidgetDisplayMode, withMaximumSize maxSize: CGSize) {
        self.preferredContentSize = nexxPLAYTodayView.widgetActiveDisplayModeDidChange(activeDisplayMode, withMaximumSize: maxSize)
    }
}
```

## Extension data objects

There are two data objects that need to be provided for the extensions, so they can retreive and present the media data.

#### NexxWidgetData

| Attribute      | Type   | Value                                                                                                    |
| -------------- | ------ | -------------------------------------------------------------------------------------------------------- |
| **domain**     | String | the ID of the Domain (mandatory)                                                                         |
| **launchURL**  | String | the deeplink that is registered to open your application with the data of the selected media (mandatory) |
| **feedHash**   | String | the Hash of the Feed, that the Widget will show                                                          |
| **feedSecret** | String | if the target Feed is secured by a Secret, ad this Value here                                            |
| **userHash**   | String | a valid User Reference Hash for personalized Results                                                     |

The **NexxPLAYWidgetConfiguration** Object is the iOS Version of the Widget Override Object. You will find all Details here:

{% content-ref url="/pages/-MC-gDOXnzwDKsA-5gZm" %}
[Widget Override Options](/widgets/widget-override-options)
{% endcontent-ref %}

Additionally the **NexxPLAYWidgetConfiguration** object contains overrides for the preview:

| Attribute              | Type   | Value                                                                      |
| ---------------------- | ------ | -------------------------------------------------------------------------- |
| **widgetPreviewImage** | String | the name of an image from the apps assets that is presented in the preview |
| **widgetPreviewTitle** | String | the preview title                                                          |
| **widgetPreviewInfo**  | String | the preview subtitle                                                       |


# Android Widget

## Basic Integration

&#x20;Make the following changes to your Projects `build.gradle`

```
...
allprojects{
    repositories{
        maven { url "https://www.myget.org/F/3qnexx/maven" }
    }
}
...
```

&#x20;add the following dependencies

```
dependencies { 
    implementation "tv.nexx.android:widget:2.+"
}
```

Configure the Widget by adding the following Settings to your `values/strings.xml:`

```markup
<resources>
    <string name="widget_domain" translatable="false">YOUR_DOMAIN_ID</string>
    <string name="widget_feed_hash" translatable="false">YOUR_FEED_HASH</string>
    <string name="widget_launchactivity" translatable="false">YOUR_LAUNCH_ACTIVITY</string>
    
    <!-- only needed, if the Feed is secured with a Secret -->
    <string name="widget_feed_secret" translatable="false">YOUR_FEED_SECRET</string>
    <!-- this Parameter can be obtained from 3Q nexx or nexxOMNIA -->
    <string name="widget_app" translatable="false">YOUR_APP_ID</string>
    <!-- only needed for android 12+ -->
    <string name="widget_description">Widget Description</string>
</resources>
```

Handle the System Intents by adding a receiver to `src/main/AndroidManifest.xml`:

```markup
<receiver
  android:name="tv.nexx.android.widget.Widget"
  android:exported="true">
  <intent-filter>
    <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
  </intent-filter>
</receiver>
```

Prepare the necessary Image Assets (Icon and Preview PNGs) and place them under `src/main/res/drawable/`

| Asset                    | Dimensions | Usage                                           |
| ------------------------ | ---------- | ----------------------------------------------- |
| **widget\_icon.png**     | 512x512px  | Icon to be shown on the Widget as App Reference |
| **widget\_preview\.png** | 660x400px  | Icon for Widget Selection Dialogue in android   |

## Handling Intent

Once a User clicks on any Item of the Widget, the App is called directly (if the receiver has been configured correctly).

The App now is responsable to collect all necessary details in order to navigate to the Target of this Intent:

```java
...
@Override
public void onCreate(Bundle savedInstanceState) {
        Intent intent = getIntent();
        if (intent != null) {
                 String action = intent.getAction();
                 //make sure, this Intent comes from the Widget
                 if(action.equals("tv.nexx.android.widget.OPEN"){
                          //the Widget sends all available Item Identifiers in the Extra Bundle for easy access.
                          appDoNavigate(intent.getStringExtra("streamtype"), intent.getStringExtra("itemID"));         
                 }
        }
}
```

{% hint style="info" %}
The available Item Identifiers are:

* itemID
* itemHash
* globalID
* refnr
* slug
* link (if configured in nexxOMNIA)
* domainID
* streamtype
  {% endhint %}

## Enhanced Methods

It is possible to update/refresh/reconfigure all Widget Instances from your App directly with the following Methods:

```java
import tv.nexx.android.widget.Widget;
import tv.nexx.android.widget.WidgetConfiguration;

public class MainActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...
        
        Widget widget = new Widget();
        
        //simple force all Widget Instances to refresh the Feed
        widget.updateWidgets(this.getContext());
        
        //update the Configuration and refresh the Feed
        WidgetConfiguration config=new WidgetConfiguration(
            new HashMap<String, Object>() {{
               put("language","es");
               put("feedUpdateInterval", 30);
            }}
        );
        widget.updateConfiguration(this.getContext(),config);
    }
}
```

For a detailed Overview of the Meaning of the given Configuration, please take a look here:

{% content-ref url="/pages/-MC-gDOXnzwDKsA-5gZm" %}
[Widget Override Options](/widgets/widget-override-options)
{% endcontent-ref %}


# Android TV Channel

## Basic Integration

&#x20;Make the following changes to your Projects `build.gradle`

```
...
allprojects{
    repositories{
        maven { url "https://www.myget.org/F/3qnexx/maven" }
    }
}
...
```

&#x20;add the following dependencies

```
dependencies { 
    implementation "tv.nexx.android:tvrecommendations:1.0.03"
}
```

Configure the TV Channel Row by adding the following Settings to your `values/strings.xml:`

```markup
<resources>
    <string name="recommendations_channel_name">Initial Channel Name</string>
    <string name="recommendations_domain" translatable="false">YOUR_DOMAIN_ID</string>
    <string name="recommendations_feed_hash" translatable="false">YOUR_FEED_HASH</string>
    <string name="recommendations_linkintent_uri" translatable="false">YOUR_REGISTERED_APP_INTENT_URI</string>
    
    <!-- only needed, if the Feed is secured with a Secret -->
    <string name="recommendations_feed_secret" translatable="false">YOUR_FEED_SECRET</string>
    <!-- this Parameter can be obtained from 3Q nexx or nexxOMNIA -->
    <string name="recommendations_app" translatable="false">YOUR_APP_ID</string>
</resources>
```

Prepare the necessary Image Asset (Channel Logo JPG) and place them under `src/main/res/drawable/`

| Asset                         | Dimensions | Usage                                      |
| ----------------------------- | ---------- | ------------------------------------------ |
| **recommendations\_icon.jpg** | 80x80px    | Icon to be shown near the Channel Contents |

## Handling Intent

Once a User clicks on any Item of the Channel Row, your App is automatically opened with the corresponding Media. This will only work, if the "recommendations\_linkintent\_uri" String is configured correctly. Futhermore, nexxOMNIA must have the same URI in the Feed Configuration and a valid Template for constructing the Media IDs, that your App can understand.

## Enhanced Methods

It is possible to update/refresh/reconfigure the Recommendation Row from your App directly with the following Methods:

```java
import tv.nexx.android.recommendations.RecommendationManager;
import tv.nexx.android.recommendations.RecommendationConfiguration;

public class MainActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...
        
        RecommendationManager manager= new RecommendationManager(this.getContext());
        
        //update the Configuration and refresh the Feed
        RecommendationConfigurationconfig=new RecommendationConfiguration(
            new HashMap<String, Object>() {{
               put("language","es");
               put("feedUpdateInterval", 30);
            }}
        );
        manager.updateConfiguration(config);
        
        //updating only the Channel without any new Configuration
        manager.updateChannel();
        
        //enabling background Sync and automatic Updates
        manager.enableAutoUpdate();
    }
}
```

The Recommendation will normally automatically be created and updated by a System Intent on Installation. Nevertheless, updating it manually with these Methods wont disturb the (possibly) existing initial Settings.

## WatchNext

WatchNext is an automatic Row on androidTV, that automatically syncs the Users View Progress and displays them on the StartPage. This is handled by nexxPLAY alone, the Recommendation SDK is not needed for this.

Both Systems though need a valid App Intent URI and a Logic, on how nexxOMNIA/nexxPLAY can construct the Apps Media Reference. Contact 3Q nexx, if the Details are unclear.

{% content-ref url="/pages/-M9Ye9Mxc1uksG\_XiGUp" %}
[nexxPLAY for Android](/native-players/nexxplay-for-android)
{% endcontent-ref %}


# Windows 10 LiveTile

Windows 10 offers LiveTiles by default as a System Service, so there is not much to do for Implementation. Basically, only the right Feed URL have to be configured, the Widget APIs will handle the Rest.

The most easy Way for Implementing this is to use the uap:TileUpdate Setting in the AppXManifest.xml:

```markup
<uap:TileUpdate Recurrence="halfHour" UriTemplate="https://feeds.nexx.cloud/DOMAIN-ID/FEED-HASH?variant=windows&gateway=win8&app=APP-ID&implementation=os&secret=WIDGET-SECRET" />
```

{% hint style="info" %}
**WIDGET-HASH** is the Reference Hash of an existing AutoExport Widget within nexxOMNIA
{% endhint %}

{% hint style="info" %}
**WIDGET-SECRET** is an optional Security Mechanism, that can be enabled within nexxOMNIA
{% endhint %}

{% hint style="info" %}
**APP-ID** is the ID of an existing nexxOMNIA App for the Windows Platform (optional)
{% endhint %}

After that, the Widget is already active and working.

{% hint style="danger" %}
Please make sure to escape the "&" Symbols correctly for XML - for better Readibility, they have been simplified in the Example.
{% endhint %}


# Widget React Plugin

The nexxPLAY Widget System works also in any React Project. You can simply embed any iFrame Plugin to embed a nexxPLAY Widget instance directly.

For more Control, 3Q offers a dedicated React Plugin, that can be added to your Project easily. It supports Widgets and all Post-Message controlled Functionality.

You can find the Project here:

{% embed url="<https://github.com/3qnexx/nexxPLAY-React>" %}

## Integration

```javascript
npm install nexxplay-react
```

A very simple Usage could look like this:

```javascript
import {NexxWidget} from "nexxplay-react";

export default function TestWidget{

	return (
		<div style={{width:"640px",height:"320px"}}>
			<NexxWidget domain="999" widgetHash="ABCDEFG" params="{{launchMode:'none'}}" />
		</div>
	);

}
```

## Supported Attributes

You can use the following Attributes directly in your JSX - only "domain" and "widgetHash" are mandatory, the rest is optional (if you need any other Streamtype than "video", "streamtype" is also mandatory").

| Attribute           | Type                                                                                        | Description                                                                                                                |
| ------------------- | ------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| **domain**          | int                                                                                         | your 3Q nexx Domain ID                                                                                                     |
| **widgetHash**      | String                                                                                      | the "Hash" of the Widget, you want to include                                                                              |
| **secret**          | String                                                                                      | if the Widgets Feed is protected by a secret, enter it here.                                                               |
| **deliveryPartner** | String                                                                                      | if the Media Reporting should be connected to a Delivery Partner, add its Code here.                                       |
| **embedHost**       | String                                                                                      | if you use a custom Embed Domain, enter the Domain (without protocol and Slashes) here. It defaults to "embed.nexx.cloud". |
| **protocol**        | String                                                                                      | if you want to force "http" Usage, set this to "http". It defaults to "https".                                             |
| **params**          | Object with the following possible Keys \[language, affiliatePartner, launchMode, userHash] | if you need additional Parameters, that would be appended via GET Parameters, set them here.                               |

## Interacting with the Widget

If you want to interact with the Widget, you must set "launchMode" to "none" and add a "onWigetClick" Listener to the Component.

This Function will then get all available Details of the clicked Media Item, and your App can process this in any desired Way.

```javascript
import {useRef,useEffect} from 'react';
import {NexxWidget} from "nexxplay-react";

class test extends React.Component{
	
	const widget=useRef(null);

        useEffect(() => {
 		if(widget.current){
 			widget.current.setEventListener(onEvent);
 		}
    	}, []);
    
    	function onEvent(event){
    		console.log(event);
    	}
	
	return (
		<div style={{width:"640px",height:"320px"}}>
			<NexXWidget domain="999" widgetHash="ABCDEFG" secret="ABCABCABC"
			 ref={widget}	
			/>
		</div>
	);

}
```


# Widget Override Options

The following List reflects all Key/Value Pairs, that can be used in a **`_play.WidgetConfiguration`** Object. Many of the given Objects are also available on the Player SDK Override Options and identical in Usage and Functionality.

| Key                             | Values                                                   | Description                                                                                                                                                                                                                                                                   |
| ------------------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **feedUpdateInterval**          | int                                                      | The Number of Minutes, the Widget will wait to reload the Media Feed (must be larger than 30)                                                                                                                                                                                 |
| **slideUpdateInterval**         | int                                                      | The Number of Seconds between the next Image is shown (must be larger than 3)                                                                                                                                                                                                 |
| **animation\***                 | \[slideup, slidedown, slideleft, slideright, fade, zoom] | The Animation used during Image Swap.                                                                                                                                                                                                                                         |
| **scaleMode\***                 | \[width, height, fixed]                                  | overrides the ScaleMode of the Images                                                                                                                                                                                                                                         |
| **enablePreviewVideos\***       | \[**0**, 1]                                              | if set to 1, the Widget will show inline Video Previews - if they are available and the Device can handle that. The **`slideUpdateInterval`** Setting will be ignored in this Case.                                                                                           |
| **adjustContainerDimensions\*** | \[**0**, 1]                                              | If set to 0, the Widget will never try to change the Dimensions of the Container, even if no width/height is found. This may lead to inconsistent Layouts. If set to 1, nexxPLAY will automatically scale Player Height with **`aspectRatio`**, if necessary                  |
| **launchMode**                  | \[**window**, navigate, none]                            | If set to **`window`**, the Widget will try to open the Links of Click directly in a new Window. **`navigate`** will force the Widget to navgiate to the Page in the same Window. Both  is only possible, if nexxOMNIA can build the Links to the Media Items on the Backend. |
| **aspectRatio\***               | Float                                                    | Used, if **`adjustContainerDimensions`**&#x69;s set to 1 and no style.height Value is found.                                                                                                                                                                                  |
| **backgroundColor\***           | Hex                                                      | overrides the Background Color of the Widget                                                                                                                                                                                                                                  |
| **loaderSkin\***                | \[default, doublebounce, material, metro, ios]           | overrides the Loading Spinner Skin.                                                                                                                                                                                                                                           |
| **language**                    | String                                                   | The 2-Letter Code of the desired Language of the Media Metadata                                                                                                                                                                                                               |
| **userHash**                    | String                                                   | a valid User Reference Hash for personalized Results                                                                                                                                                                                                                          |

{% hint style="info" %}
Attributes, marked with a "**\***" are only usefull in a Web Environment and therefore not available for native Players.
{% endhint %}


# more Integrations

Besides the Javascript SDK and the iFrame Integration, under certain Circumstances, there may be better or additional Ways to include or reference nexxPLAY on your Website.

The Google AMP Plugin is helpfull for AMP Environment and should be used there, whenever possible in any AMP Project.

{% content-ref url="/pages/-M9FeH6afjJulKoh5Zvf" %}
[Google AMP](/platform-plugins/google-amp)
{% endcontent-ref %}

Facebook Instant Articles also support nexxPLAY, the easiest Way to integrate this can be found here:

{% content-ref url="/pages/-MJBR4K\_mbFPhiZQtqPe" %}
[Broken mention](broken://pages/-MJBR4K_mbFPhiZQtqPe)
{% endcontent-ref %}

If you look for special Considerations for Integrating nexxPLAY into WebViews, there are a few Options to consider.

{% content-ref url="/pages/-MJsrAhS6lPrgzdTHomx" %}
[WebViews](/other-integration-options/webviews)
{% endcontent-ref %}

For very advanced Projects, consider using a WebComponent instead of an iFrame, which offers also the Functionalities of the Javascript SDK

{% content-ref url="/pages/-M9FeDn\_EtV6fOLoWYA1" %}
[WebComponent](/other-integration-options/webcomponent)
{% endcontent-ref %}

And for Pages, that are looking for more Views by allowing everyone to embed their Players and Media, it may be a good Idea to offer an oEmbed Discovery Link

{% content-ref url="/pages/-M9FeAwOzeLmd8iEAnL4" %}
[oEmbed Discovery](/other-integration-options/oembed)
{% endcontent-ref %}

For special Occasions, you might want to share a complete Player Page for external Users. Maybe even for a Media Item, that is not published yet. For those cases, you can use the nexxOMNIA Preview Links.

{% content-ref url="/pages/-MABpZHMAy7BL2uEeOTZ" %}
[Preview Links](/other-integration-options/preview-links)
{% endcontent-ref %}

If you need more Options to modify the Media Covers live, the Cover Service may help here.

{% content-ref url="/pages/-MCJaLP7OeqEmmUpXh4s" %}
[Cover Service](/other-integration-options/cover-service)
{% endcontent-ref %}


# WebViews

## Setting the Platform

nexxPLAY will work in WebViews out of the Box. It is strongly recommended though to use the Javascript SDK instead of iFrames here - nevertheless, iFrames will work most of the Times too.

If the Player will be shown in your own native App in a hybrid Context, you might want to inform the Player about this Gateway for statistical Purposes. You can use an SDK Method for this:

```javascript
//supported are iOS and android WebViews. Choose the right Platform (lowercase)
_play.config.setPlatform('ios|android');
```

You can find all available Configuration Settings here:

{% content-ref url="/pages/-M9Ff5c\_bjGXe44xg\_oO" %}
[Player Management](/javascript-sdk/player-management)
{% endcontent-ref %}

## UI and Functionality

As the WebView in your hybrid App is under your Control, you can decide to disable (or force) certain common Web Restrictions (like AutoPlay, FullScreen etc). nexxPLAY will automatically detect, if Fullscreen and PictureInPicture Functionalities are available.

Nevertheless, if you want to use AutoPlay with active Sound without a User Gesture, you can configure your WebView to behave like that. There is no Way to detect this for nexxPLAY though, so you can force the Player to behave like this by using the following Override:

```javascript
var cfg=new _play.PlayerConfiguration({
    webViewRestrictionsDisabled:1
});
```

In modern Apps without Borders and a fully stretched UI, the Player UI might intefere with the Status Bar or a physical Notch. This specific Case can be handled with another Override:

```javascript
var cfg=new _play.PlayerConfiguration({
    forceNotchPadding:1
});
```

You can find all available Overrides here:

{% content-ref url="/pages/-M9FfDOPhMEysfN-axhI" %}
[SDK Override Options](/integration-enhancements/override-options)
{% endcontent-ref %}


# oEmbed Discovery

Many Third-Party Services rely on an oEmbed Discovery Service, integrated into a Website. Although nexxPLAY cannot embed the oEmbed Discovery Link directly, nexxOMNIA can construct the necessary oEmbed URL, that can be integrated into your Frontends. This oEmbed Link can also be obtained by using the nexxOMNIA API.

You integrate the oEmbed Discovery Link like this:

```markup
<link rel="alternate" type="application/json+oembed" 
href="https://services.nexx.cloud/oembed/json?url=URL">
```

Per Default, the oEmbed Service returns JSON - if you need XML, the URL and Mimetype would look like this:

```markup
<link rel="alternate" type="text/xml+oembed" 
href="https://services.nexx.cloud/oembed/xml?url=URL">
```

The URL Attribute is normally the current Webpage. If Embedding is allowed in the nexxOMNIA Settings and nexxOMNIA can find the Media Object URL (with a corresponding /slug Attribute or a Domain Media Template), the oEmbed Service will return a valid oEmbed Response (in JSON or XML, exposing all necessary Metadata for the target iFrame).

Furthermore, the oEmbed Service will also respond to Calls with a Shortcut URL like the following:

```markup
/:domainid/:streamtype/:mediahash/:deliverypartner
```

{% hint style="info" %}
&#x20;The **:domainid** Parameter is the Domain ID of the Media Object
{% endhint %}

{% hint style="info" %}
&#x20;The **:streamtype** Parameter is the Media Type
{% endhint %}

{% hint style="info" %}
&#x20;The **:mediahash** Parameter is the Hash ID of the Media Object
{% endhint %}

{% hint style="info" %}
&#x20;The **:deliverypartner** Parameter is optional. If given, it must be the ID of an exisiting Delivery Partner of the Domain of the Media Object.
{% endhint %}

Both URL Building Options support the following oEmbed Standard Parameters:

| Parameter     | Description                                                                                                            |
| ------------- | ---------------------------------------------------------------------------------------------------------------------- |
| **maxwidth**  | the desired Width of the iFrame. If omitted, the default Value will be 640px (or, in Case of a Portrait Media, 360px)  |
| **maxheight** | the desired Height of the iFrame. If omitted, the default Value will be 360px (or, in Case of a Portrait Media, 640px) |


# 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();
```


# Preview Links

For special Occasions, you might want to share a complete Player Page for external Users. Maybe even for a Media Item, that is not published yet.&#x20;

To create a Preview Link, navigate within nexxOMNIA to the target Media Item, choose the "**share**" Button and open the "**Preview Link**" Tab. Create a new Preview Link and define its Details.

![nexxOMNIA Preview Link Dialogue](/files/-MABqmIE2mp-pOVCRzyG)

You can define in the upcoming Dialogue, which Features should be enabled within this Link and save it afterwards. nexxOMNIA will create the Preview Link URL for this Media Item and with the selected Features immediately.

{% hint style="info" %}
You can also use nexxOMNIA API to create/read Preview Links for each Media Item.
{% endhint %}

{% hint style="info" %}
Please notice, that by default, the Preview Link URLs will be based on the "nexx.cloud" URL Structure. If you want to use your own URLs for Preview Links, use the nexxOMNIA Support Section to enable a Custom Domain for this Feature.
{% endhint %}


# Cover Service

In nearly every Scenario, nexxOMNIA produces the necessary Image Files for all Covers and other Image Contexts of every Media Item backendwise in all necessary Sizes and Formats for optimal Delivery.

Nevertheless, in certain Situations, there may be the need for a special Cover in a specific Size or with a specific Overlay. You can use the Image Gateway Cover Service for this.

## General Usage

You generate a Service URL with the following Template:

**`https://images.nexx.cloud/:streamtype/:mediaid/:operation/:sizing.:format`**

{% hint style="info" %}
The **:streamtype** and **:mediaid** Parameters define the target Media Object as usual
{% endhint %}

{% hint style="info" %}
&#x20;The **:operation** Parameter defines the Behaviour of the URL after the Image Creation:

* **redirect** does not return anything but redirects the Browser via 302 HTTP Response to the CDN Location of the Cover of this Media Object
* **direct** will return the CDN Image directly (slower than **redirect**)
* **transform** will return the Image directly, but adds Transforms to it.
* **cachedtransform** behaves like **transform**, but will store the result permanently on the Asset CDN
  {% endhint %}

{% hint style="info" %}
The **:sizing** Parameter refers to the desired Image Resolution or Image Context
{% endhint %}

{% hint style="info" %}
The **:format** Parameter defines the Image Format. Supported Formats are **jpg**, **png**, **webp** and **avif.** If omitted, the original File Extension will be used.
{% endhint %}

## Optional Query Parameters

| Parameter         | Description                                                                                                                                      |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| **addPlayButton** | if set to 1, the Image will show a PlayButton on Top                                                                                             |
| **theme**         | if set to "dark" and an Error Image will be returned, it will be optimized for a Darkmode-suitable Environment                                   |
| **language**      | if a MultiLanguage Cover is requested with a non-default Language Version, query for this Version using the corresponding 2-Letter-Language Code |

## Image Sizing and Context

| Action                | Description                                  |
| --------------------- | -------------------------------------------- |
| **default**           | returns the Default Cover                    |
| **x2**                | if available, a 720p Cover will be returned  |
| **x3**                | if avaialble, a 1080p Cover will be returned |
| **max**               | the maximal Cover will be returned           |
| **actionshot**        | returns the ActionShot Cover, if available   |
| **quadcover**         | returns the Quad Cover, if available         |
| **abtestalternative** | returns the A/B Test Cover, if available     |
| **alternativecover**  | returns the alternative Cover, if available  |
| **banner**            | returns the Banner, if available             |

## Available Transform Operations

The Image Transform Operations are a powerfull Way to instantly recreate the given Images. Please notice though, that the more Operations are added, the slower the Result will be.

Generally, the URL Pattern for a given Transform is "/transform:ACTIONS:PARAMETERS" where Actions will be defined below and Parameters are optional. Both URL Parts are technically Comma seperated Lists of Values, but it is strongly advised to only use one Operation, if possible.

### Resizing

| Action            | Description                                                                                                                                                                                 | Parameters          |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| **resizeexact**   | forces an exact Resizing, without applying Aspect Ratio                                                                                                                                     | WIDTHxHEIGHT        |
| **resizetothumb** | forces an exact Resizing, but internally applies the Aspect Ratio. The final Image will have the desired Dimensions, but it has been cut from the Middle of the Image, so its not distorted | WIDTHxHEIGHT        |
| **resizewithcut** | behaves exactly like resizetothumb, but the internal Rearrangement can be defined with the optional OFFSET Parameter                                                                        | WIDTHxHEIGHTxOFFSET |
| **resizetomax**   | delivers an Image, as big as possible with respecting the Aspect Ratio and the given Parameters                                                                                             | WIDTHxHEIGHT        |
| **resizewidth**   | scales the Image to the given Width and respects the Aspect Ratio                                                                                                                           | WIDTH               |
| **resizeheight**  | scales the Image to the given Height and respects the Aspect Ratio                                                                                                                          | HEIGHT              |

### Composition

| Action        | Description                                                     | Parameters       |
| ------------- | --------------------------------------------------------------- | ---------------- |
| **flipx**     | flips the Image on the X Axis                                   |                  |
| **flipy**     | flips the Image on the Y Axis                                   |                  |
| **flipxy**    | flips the Image on both Axis                                    |                  |
| **rotate90**  | rotates the Image on 90°                                        |                  |
| **rotate180** | rotates the Image on 180°                                       |                  |
| **rotate270** | rotates the Image on 270°                                       |                  |
| **border**    | renders a Border in the given Color and Sizing around the Image | HEX-COLORxSIZING |

### Quality

| Action        | Description                                                            | Parameters           |
| ------------- | ---------------------------------------------------------------------- | -------------------- |
| **lowq**      | reduces the Quality to the given Percentage (only on Image Format JPG) | QUALITY (in Percent) |
| **optimize**  | applies an internal Optimization Algorithm                             |                      |
| **sharpen**   | applies an internal Sharpening Algorithm                               |                      |
| **deskew**    | applies an internal Deskew Algorithm                                   |                      |
| **despeckle** | applies an internal Despeckle Algorithm                                |                      |

### Effects

| Action         | Description                  | Parameters            |
| -------------- | ---------------------------- | --------------------- |
| **blur**       | applies a Blur Filter        | STRENGTH (in Percent) |
| **motionblur** | applies a Motion Blur Filter | STRENGTH (in Percent) |
| **radialblur** | applies a Radial Blur Filter | STRENGTH (in Percent) |
| **negate**     | applies a Negation Filter    |                       |
| **sepia**      | applies a Sepia Filter       | STRENGTH (in Percent) |
| **gray**       | applies a Grayscale Filter   |                       |
| **charcoal**   | applies a Charcoal Filter    | STRENGTH (in Percent) |
| **oilpaint**   | applies an Oilpaint Filter   | STRENGTH (in Percent) |
| **sketch**     | applies a Sketch Filter      | STRENGTH (in Percent) |
| **swirl**      | applies a Swirl Filter       | STRENGTH (in Percent) |

## Examples

All Examples will be used on a Sample Video with ID 1580785.

You only want the Cover:

**`https://images.nexx.cloud/video/1580785`**

The same Cover, but in maximal Resolution and in WEBP Format

**`https://images.nexx.cloud/video/1580785/direct/max.webp`**

The same Cover, but now with a PlayButton on Top

**`https://images.nexx.cloud/video/1580785/direct/max.webp?addPlayButton=1`**

The same Cover, but with some Effects applies to it and the PlayButton on Top

**`https://images.nexx.cloud/video/1580785/transform:flipx,swirl:0,80?addPlayButton=1`**


# Reporting for external Players

For external Players or special Cases, the Customer can use a special Gateway to report the same Events as nexxPLAY does. For these Purposes, a Ping URL has to be built like the following:

## Media Event Ping

<mark style="color:blue;">`GET`</mark> `https://ping.nexx.cloud/:domainid/:streamtype/:mediahash/:event`

#### Path Parameters

| Name       | Type    | Description                                                                                                    |
| ---------- | ------- | -------------------------------------------------------------------------------------------------------------- |
| domainid   | integer | The Domain ID                                                                                                  |
| streamtype | string  | The Type of the current Media Object                                                                           |
| mediahash  | string  | The Hash ID of the current Media Object                                                                        |
| event      | string  | The Action to Report. Currently supported is \[display, playerstart, play, click, engage, adcall, ad, adclick] |

#### Query Parameters

| Name             | Type    | Description                                                                                                                                                      |
| ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| feedid           | string  | If the Media Items for this Action were collected by a MRSS Feed/Podcast, report this ID here                                                                    |
| deliveryPartner  | integer | If the Action tool place by a known Delivery Partner, but within the Context of the Domain ID, add the Delivery Partner ID here.                                 |
| affiliatePartner | integer | If the Action took place on a Frontend, provided by a known Affiliate Partner, add the Affilate Partner ID here (not the Affiliate Partner Code!).               |
| gateway          | string  | The Playback Gateway for this Action. Supported values (for Standard Actions) are \[desktop, mobile, tablet, ios, android, win8, osx, smarttv, androidtv, smart] |
| device           | string  | The Playback Device for this Action. Supported values a re \[pc, mobile, tablet, tv, smart, watch]                                                               |
| r                | string  | A random Value (Cache Buster)                                                                                                                                    |

{% tabs %}
{% tab title="200 All Parameters were ok, Action created." %}

```
OK
```

{% endtab %}

{% tab title="403 Parameters didnt match or referenced a non-existing Media Object" %}

```
ERROR
```

{% endtab %}
{% endtabs %}

For the **`play`**&#x45;vent, the following additional Query Parameters are supported:

| Parameter  | Description                                                              |
| ---------- | ------------------------------------------------------------------------ |
| protocol   | The Stream Protocol \[http, dash, hls]                                   |
| codec      | The Stream Codec \[mp4, webm, hevc, vp9, mp3, opus, aac]                 |
| protection | The Stream is protected via \[token, url, playready, widevine, fairplay] |
|            |                                                                          |

For the **`engage`**&#x45;vent, the following additional Query Parameters are supported:

| Parameter | Description                           |
| --------- | ------------------------------------- |
| action    | The Engagement Action, provided by 3Q |
| context   | The Engagement Context                |
| value     | The Engagement Value, if suitable     |

For the **`click`**&#x45;vent, the following additional Query Parameters are supported:

| Parameter        | Description                                                                                                 |
| ---------------- | ----------------------------------------------------------------------------------------------------------- |
| targetItem       | The Item ID, that has been clicked, if the Click was handled on an Item, presented by the main Item         |
| targetStreamtype | The Item Streamtype, that has been clicked, if the Click was handled on an Item, presented by the main Item |
| targetURL        | The URL, that was opened by the Click                                                                       |

For all **`ad*`**&#x43;alls, the following Query Parameters are supported:

| Parameter | Description                                                         |
| --------- | ------------------------------------------------------------------- |
| type      | The Type of the Asset \[bumper, preroll, midroll, postroll, banner] |
| mode      | The used Technology \[vast, ima, plugin]                            |
| provider  | A Reference Code for the Ad Provider, provided by 3Q                |


# Addons

nexxPLAY Addons offer a convenient way to add additional Functionality, that is somehow connected to the Activity of the Player to an Element of the Page, but outside of the Player Container. These Addons are only available in "**API**" Datamode with SDK Integrations (and not available in native SDKs).

As a general Rule, the SDK must be configured to add the Javascript Code of the desired Addon (can be setup in nexxOMNIA or by 3Q). After that, the Player will get an additional **CONTAINER-ID**, where the Addon should be rendered. Please notice, that this additional Container will be Part of the Page afterwards and the Styling of the Elements in this Container is NOT handled by the Player. For easier Handling, the Addon CSS Classes are outlined below, so they can be styled easily by the Frontend Team.

| Addon               | Override Box          | Description                                                                                                                                                                                                                                                                                                                                                                                 |
| ------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Comments**        | commentBoxContainer   | will show a List of Comments to the current Media Item in a seperate Box. Comments can be submitted and will be displayed in RealTime. Comments can be managed within nexxOMNIA too.                                                                                                                                                                                                        |
| **Recommendations** | recoBoxContainer      | will show the List of Recommendations to the current Media Item in a seperate Box. Clicking one of the Recommendations will force the Player to swap to this Item.                                                                                                                                                                                                                          |
| **LiveTicker**      | tickerBoxContainer    | will show LiveTicker Updates to the current Media Item in a seperate Box. Every Update ("Fragment") consists of a Title, Image, Date and Text. The Fragments will be created within nexxOMNIA and published in RealTime to all Frontends.                                                                                                                                                   |
| **Container**       | containerBoxContainer | will show a List of Items below the current Media Player. This only works, if the Media Item is a Container Element. As an Example - the Container Addon, linked to a Media Player, that is currently playing a Playlist will show all Elements of the Playlist - and also indicates, which one is playing currently. Clicking one of the Items will force the Player to swap to this Item. |
| **Scene**           | sceneBoxContainer     | will show a List of Scenes below the current Media Player. This only works, if the current Media Item is split into Scenes. Clicking one of the Items will force the Player to swap to this Time (=the Scene Start).                                                                                                                                                                        |
| **Album**           | albumBoxContainer     | will show a second Player below the current Media Player. The second Player shows the Image Album, that has been connected to the current Media Item.                                                                                                                                                                                                                                       |
| **Files**           | filesBoxContainer     | will show the Files, that have been connected to the current Media Item. This Addon is usefull, if there are multiple Items connected to a Media Item, that can be downloaded (PDFs for example).                                                                                                                                                                                           |
| **Links**           | linksBoxContainer     | will show the Links, that have been connected to the current Media Item.                                                                                                                                                                                                                                                                                                                    |
| **Poll**            | pollBoxContainer      | will show a Poll, that has been connected to the current Media Item. Depending on the Poll Options, it may not be shown due to other Rules (does not allow Multiple Usage for example).                                                                                                                                                                                                     |

The following Code for example will instruct the Player to display available Recommendations in the Container "otherDiv" (for the full List of Container Configuration Options, check **SDK Override Options**).

```javascript
let playerConfig = new _play.PlayerConfiguration({recoBoxContainer:'otherDiv',...});
let player = _play.control.addPlayer("div", streamtype, playerConfig);
```

{% content-ref url="/pages/-M9FfDOPhMEysfN-axhI" %}
[SDK Override Options](/integration-enhancements/override-options)
{% endcontent-ref %}

{% hint style="info" %}
As usual, the nexxPLAY Addons also emit Events for important Activities. Please be aware, that those Events cannot be received via the **PlayState Listener Callbacks** (as they are not related to Media Playback). The Frontend must register an **AddonListener Function**, if it needs those Events.
{% endhint %}

{% content-ref url="/pages/-M9Ff8FIIKv2tr-6mtmf" %}
[Player Events](/integration-enhancements/player-events)
{% endcontent-ref %}

## CSS Rules

### Container CSS Classes

| Class                             | Description                                                                                                           |
| --------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| **nxp\_box\_scroller**            | The Wrapper of the whole Addon (scrollable, if needed)                                                                |
| **nxp\_lists\_orient\_landscape** | The Wrapper of the "**Recommendation**" Addon. As this Addon is rendered horizontally, it uses this additional Class. |
| **nxp\_ticker\_container**        | The Wrapper of the "**LiveTicker**" Addon.                                                                            |

###

### Item CSS Classes

| Class                        | Description                                                                                           |
| ---------------------------- | ----------------------------------------------------------------------------------------------------- |
| **nxp\_container\_item**     | every Item is wrapped in this Container                                                               |
| **nxp\_container\_image**    | The Item Cover Image has this Class                                                                   |
| **nxp\_container\_content**  | The Item Metadata is wrapped in this Container                                                        |
| **nxp\_container\_title**    | The Item Title has this Class                                                                         |
| **nxp\_container\_teaser**   | The Item Teaser / Description has this Class                                                          |
| **nxp\_container\_runtime**  | If a Video/Audio/Scene is rendered, its Runtime has this Class                                        |
| **nxp\_container\_download** | <p>If the displayed Item can be downloaded, </p><p>the Download Icon is wrapped in this Container</p> |

###

### Comment Addon additional CSS Classes

| Class                           | Description                                                                                                      |
| ------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
| **nxp\_form\_holder**           | The Input Section is wrapped in this Container                                                                   |
| **nxp\_form**                   | The Input Form has this Class                                                                                    |
| **nxp\_form\_row**              | Each Input Form Row is wrapped in this Container                                                                 |
| **nxp\_form\_row\_button**      | This Input Row contains a Button                                                                                 |
| **nxp\_form\_input**            | Each Text Input Field has this Class                                                                             |
| **nxp\_form\_input\_mandatory** | Each Row with a mandatory Field has this Class                                                                   |
| **nxp\_form\_area**             | Each Text Area has this Class                                                                                    |
| **nxp\_form\_button**           | Each Button has this Class                                                                                       |
| **nxp\_form\_commentholder**    | The Comment Display Section is wrapped in this Container                                                         |
| **nxp\_comment**                | Each Comment is wrapped in this Container                                                                        |
| **nxp\_reply**                  | A Comment, that is a Reply to another Comment has this Class.                                                    |
| **nxp\_comment\_from**          | The Author of the Comment has this Class                                                                         |
| **nxp\_comment\_text**          | The Text of the Comment itself has this Class                                                                    |
| **nxp\_comment\_footer**        | A Wrapper Class, holding Time, Likes and Options                                                                 |
| **nxp\_comment\_time**          | The Time of the Comment has this Class                                                                           |
| **nxp\_comment\_icons**         | The Actions for each Comment are wrapped in this Class                                                           |
| **nxp\_comment\_icon**          | Each Action Icon has this Class                                                                                  |
| **nxp\_comment\_likes**         | If Comment Likes are active, this field shows the Amount of Likes for the parent Comment                         |
| **nxp\_comment\_own**           | A comment, created by the current User (which disables Interactions for this Item)                               |
| **nxp\_novalue**                | A Like Counter, that has no active Likes currently.                                                              |
| **nxp\_comment\_status**        | In Case the Domain uses Comment Approvals, this Class is showing a short Hint after a User sent a Comment/Reply. |

### LiveTicker Addon additional CSS Classes

| Class                          | Description                                                                                                |
| ------------------------------ | ---------------------------------------------------------------------------------------------------------- |
| **nxp\_ticker\_item**          | every Item is wrapped in the **nxp\_container\_item** is also wrapped in this Class in a LiveTicker Class. |
| **nxp\_ticker\_title**         | Every **nxp\_container\_title** has also this Class in a LiveTicker Context.                               |
| **nxp\_ticker\_content**       | Wraps the Fragment Image and Text, so displays the Context (without the Title and the Date) in full.       |
| **nxp\_ticker\_align\_left**   | The **nxp\_ticker\_content** Box will contain an Image, that shall be aligned to the left.                 |
| **nxp\_ticker\_align\_right**  | The **nxp\_ticker\_content** Box will contain an Image, that shall be aligned to the right.                |
| **nxp\_ticker\_align\_center** | The **nxp\_ticker\_content** Box will contain an Image, that shall be displayed full width above the Text. |
| **nxp\_ticker\_image**         | If the Fragment contains an Image, it will have this Class                                                 |
| **nxp\_ticker\_text**          | The Text Content of the Fragment is wrapped in this Class.                                                 |

### Poll Addon additional CSS Classes

| Class                          | Description                                                                |
| ------------------------------ | -------------------------------------------------------------------------- |
| **nxp\_poll\_title**           | Every Title of the Intro, Outro and each Question has this Class           |
| **nxp\_poll\_subtitle**        | Every Subtitle of the Intro, Outro and each Question has this Class        |
| **nxp\_poll\_text**            | The Text Blocks of Intro and Outro are wrapped in this Class               |
| **nxp\_poll\_button**          | The "**continue**" and "**send**" Buttons have this Class                  |
| **nxp\_poll\_question\_index** | The Indicator of the current and the total Sum of Questions has this Class |
| **nxp\_poll\_item\_options**   | The Box of Answers for each Question has this Class                        |
| **nxp\_poll\_item\_option**    | Every Poll Option has this Class                                           |

### Links Addon additional CSS Classes

| Class               | Description                                          |
| ------------------- | ---------------------------------------------------- |
| **nxp\_link\_icon** | Every Link Icon has this Class                       |
| **nxp\_link\_url**  | The displayed Target URL of each Link has this Class |


# Security and Accessibility

nexxPLAY supports Data Security on various Levels and Systems.

{% content-ref url="/pages/zalqGnp4Pw5pr9ojlgXF" %}
[Data Protection and Security](/security-and-accessibility/data-protection-and-security)
{% endcontent-ref %}

If you plan to use the nexxPLAY SDK or any other 3Q Service in Europe, take a look at the GDPR and TCF Guidelines here.

{% content-ref url="/pages/-MGx77wpSdS\_W2GSojWL" %}
[GDPR and TCF 2.0](/security-and-accessibility/gdpr-and-tcf-2.0)
{% endcontent-ref %}

Furthermore, if you want to support any WCAG or Accessibility Guidelines, nexxPLAY can support here on various Levels,

{% content-ref url="/pages/SVh6iCZlsAblwlVpnvQf" %}
[Accessibility and WCAG](/security-and-accessibility/accessibility-and-wcag)
{% endcontent-ref %}


# Data Protection and Security

## Content-Security-Policy&#x20;

If the Frontend, that embeds nexxPLAY is using a Content Security Policy, the following URLs, Settings  and Protocols must be added

| Policy      | URL                                       | Info                                                    |
| ----------- | ----------------------------------------- | ------------------------------------------------------- |
| script-src  | arc.nexx.cloud                            |                                                         |
|             | [www.gstatic.com](http://www.gstatic.com) | only necessary, if Chromecast is used.                  |
|             | imasdk.googleapis.com                     | only necessary, if Ads and Ads via Google IMA are used. |
| style-src   | arc.nexx.cloud                            |                                                         |
| font-src    | arc.nexx.cloud                            |                                                         |
| frame-src   | embed.nexx.cloud                          |                                                         |
|             | download.nexx.cloud                       | only necessary, if Download Functionality is used.      |
| img-src     | assets.nexx.cloud                         |                                                         |
|             | images.nexx.cloud                         |                                                         |
|             | data:                                     |                                                         |
| connect-src | arc.nexx.cloud                            |                                                         |
|             | api.nexx.cloud                            |                                                         |
|             | services.nexx.cloud                       |                                                         |
|             | feeds.nexx.cloud                          | only necessary, if Widgets are used.                    |
|             | nexxtv-events.servicebus.windows.net      |                                                         |
|             | \*.firebasedatabase.app                   | only necessary, if Realtime Features are used.          |
|             | wss:                                      | only necessary, if Realtime Features are used.          |
| media-src   | blob:                                     | necessary for Streaming Protocols (HLS / DASH)          |
| navigate-to | download.nexx.cloud                       | only necessary, if Download Functionality is used.      |
|             |                                           |                                                         |

{% hint style="info" %}
Each Customer can use own Embed URLs / Feed URLs as CNAME, if desired and configured. In that Case, adding the default \*.nexx.cloud URLs is not necessary.
{% endhint %}

#### Further Considerations:

* nexxPLAY will download automatically and async more Scripts, depending on Features and Browser. Therefore, the Page CSP must allow "**unsafe-inline**" (at least for "**script-src**"). If this is not an Option, nexxPLAY supports the CSP-Feature "**nonce**". Setting "script-src: 'nonce-nexxplay\_internal'" will allow Scripts, that have this nonce Attribute. nexxPLAY will add this Attribute to all additional Script Tags, it will create.
* nexxPLAY MUST use Inline-Styles in various SItuations, as it is embedded into a Client Page. In order to allow this, at least "**style-src**" must be set to "**unsafe-inline**".&#x20;
* Each Customer uses one (or various) Media CDNs for Video/Audio/Live Delivery. Each Customer must therefore add the necessary URLs to at least "**media-src**" and "**connect-src**" ("connect-src" is necessary for Licenses and Manifests.)

### Simple CSP Example

```html
<meta http-equiv="Content-Security-Policy" 
content="default-src 'self' data: blob: wss: *.nexx.cloud *.windows.net; 
         media-src blob: data: *;
         script-src 'nonce-nexxplay_internal' *.nexx.cloud;
         style-src 'unsafe-inline' *.nexx.cloud;
         object-src 'none';
         base-uri 'none';" />
```

This Example will make nexxPLAY work completely, even with Realtime and Download Features. Nevertheless, no Content CDN URLs are shown here, as they are always Customer-specific.

### Content-Security and Ads

As a general Rule, 3Q does not recommend using CSP on a Page, where Ads will be integrated. Due to the dynamic nature of Media Ads / VAST, its is nearly impossible to list all possible VAST URLs and Media Origins that may occur.

Furthermore, depending on the used Features, it may be necessary to allow even the Javascript Functionality "eval", which may expose a Security Risk. Therefore "**unsafe-eval**" must be allowed in the CSP, if advanced Ad Settings will be used.

If the Client wants to work with **Google IMA**, nexxPLAY will automatically download the **Google IMA** SDK, which will then process all Ad Requests and Reporting. This may pose another Security Hole, that must be addressed propperly.

nexxPLAY is able to use Anti-Ad-Block Technologies in some Situations. For these Purposes, some additional Scripts will be loaded and processed - here, "**unsafe-eval**" must also be allowed.

## iFrame Settings

nexxPLAY iFrames automatically emit CORP and COOP Headers as necessary. If the Environment also needs COEP, the Embed Codes can be extended with the "enableCOEP" Parameter to also emit this Header.

nexxPLAY also supports Environments with "sandbox" Attribute. The only strictly necessary Condition would be "allow-scripts" - everything is optional and depends on the enabled Functionalities. "allow-popups" is often needed for various scenarios, but not for basic Operations.

## Third-Party Data Connections

Per Default, nexxPLAY will not send any Data to Third-Parties at all. Nevertheless, depending on enabled Features, the following Products/Services may be integrated (besides the already mentioned various Ad-related Connections):

* **Google Firebase**
  * this Product is used for Realtime Features (like Comments, Polls, Premieres and HotSpots).
  * No Data will be sent to Google explicitely, but the Player SDK will actively connect to a Google Firebase Domain and listens for Events.
* **Recombee / XRoadMedia / IrisTV**
  * these are Third-Party Recommendation Services, which may enhance the Recommendations, given to Users on Media End.
  * depending on the Service and its Settings, nexxPLAY will send automatically various Usage Events and anonymous Visitor Identifiers to the Services respective Endpoints permanently.

## Data Storage

nexxPLAY stores User Preferences and anonymous Device/Session Identifiers in Cookies and localStorage. For Caching Purposes, also sessionStorage may be used.

For Recommendation Optimization (and Features like A/B Testing and AutoResume), nexxPLAY also stores Data in IndexedDB, if the Browser supports this - this Data is stored only locally and will never be transmitted to any 3Q Analysis System.

{% hint style="info" %}
As (First Party) Cookies are sensitive, you may disable the Usage of Cookies in nexxOMNIA Player Settings - disabling this will affect only a few of the available Usage Analysis Offers in nexxOMNIA.
{% endhint %}

The complete List of Data, nexxPLAY stores, is exposed via a DSGVO/TCF compliant URL, as described here:

{% content-ref url="/pages/-MGx77wpSdS\_W2GSojWL" %}
[GDPR and TCF 2.0](/security-and-accessibility/gdpr-and-tcf-2.0)
{% endcontent-ref %}


# GDPR and TCF 2.0

### Javascript SDK and iFrames

If the Player is embedded in a GDPR-compliant Environment and the Frontend uses a TCF 2.0 enabled CMP, there is nothing to change. The Player will detect TCF 2.0 Functionality automatically and uses Consent Strings and Settings accordingly.

{% hint style="info" %}
The automatic TCF 2.0 Detection is available in the SDK for Javascript, but also in any Form of iFrame Integration.
{% endhint %}

Nevertheless, if the Frontend does not use a CMP or is not TCF 2.0 compliant, but needs some kind of Consent Strings for Ad Purposes, the Javascript SDK and also the iFrame Service supports this.

For the Javascript SDK, please use the "**setUserConsentString**" Method:

{% content-ref url="/pages/-M9Ff5c\_bjGXe44xg\_oO" %}
[Player Management](/javascript-sdk/player-management)
{% endcontent-ref %}

For iFrames, please add the "**consentString**" Parameter to the iFrame URL:

{% content-ref url="/pages/-M9YTheMUdsD-SMI1kg1" %}
[Embed Codes](/iframe-integration/embed-codes)
{% endcontent-ref %}

### Device Storage

Depending on various Configurations and Features, the Player SDK may store Data in Cookies, localStorage, sessionStorage and IndexedDB. If an active TCF Configuration is active on Page, the Player SDK will respect the Removal of Storage Rights by this Framework and immediately stop using Cookies (and remove all exisiting ones).

For further Details, 3Q offers an in-depth Device Storage Overview in accordance with IAB/TCF Guidelines here:

{% embed url="<https://services.nexx.cloud/tcf/storage-disclosure.json>" %}

### Native Players

For native Players please use the Override Parameter "**consentString**" for applying the received Consent String to the Player.&#x20;

{% content-ref url="/pages/-M9Ye7-tHyas2tvRenYE" %}
[nexxPLAY for iOS](/native-players/nexxplay-for-ios)
{% endcontent-ref %}

{% content-ref url="/pages/-M9Ye9Mxc1uksG\_XiGUp" %}
[nexxPLAY for Android](/native-players/nexxplay-for-android)
{% endcontent-ref %}

###

### VAST Macros

Unimportant which SDK is used, Consent String and GDPR Compliance is mostly only needed in Environments, where Ad Providers depend on these Strings - in this Case, the Ad VAST URLs must also contain the necessary Macros.

{% content-ref url="/pages/-M9FeS7MId6XM1cc6S48" %}
[VAST Macros](/integration-enhancements/vast-macros)
{% endcontent-ref %}


# Accessibility and WCAG

nexxPLAY supports Accessilbility Standards and Techniques in all Player Versions. The Page/App Owner does not have to activate anything on any Platform.

## Web SDK

* supports ARIA Roles, Labels and Client Hints.
* supports Haptic Feedback, where possible
* supports "**reduced-motion**" Settings on various Levels
* supports LRT/RTL Layout Flow
* supports "**forced-colors**" Settings
* supports **Image Descriptions** for visualy impaired
* supports Captions and Audio-Description

{% content-ref url="/pages/-M9Fdlzna0yIKdW\_WjNj" %}
[Javascript SDK](/javascript-sdk)
{% endcontent-ref %}

{% content-ref url="/pages/-M9FdorKLl9r4DQCDKmJ" %}
[iFrame Integration](/iframe-integration)
{% endcontent-ref %}

{% hint style="info" %}
LTR/RTL Layout Flow may need some hints from the surrounding Page to work propperly. nexxPLAY via Javascript will follow any parent Container "**dir**" Attribute by default.&#x20;

In an iFrame, this may be more difficult, therefore a special "**direction**" Attribute exists for this Purpose.
{% endhint %}

## iOS SDK

* supports **VoiceOver** with **UIAccessibility** Frameworks
* supports Accessibility Traits and Labels
* supports Haptic Feedback, where possible
* supports "**reduced-motion**" Settings on various Levels
* supports MACaptionAppearanceDisplayType (prefers Audio-Description Setting)
* supports "**User Defined Caption Style**"
* supports **Image Descriptions** for visualy impaired
* supports Captions and Audio-Description

{% content-ref url="/pages/-M9Ye7-tHyas2tvRenYE" %}
[nexxPLAY for iOS](/native-players/nexxplay-for-ios)
{% endcontent-ref %}

## android / androidTV SDK

* supports **contentDescription** and "**importantForAccessibility**" Attributes
* supports Haptic Feedback, where possible
* supports "**reduced-motion**" Settings on various Levels
* supports LRT/RTL Layout Flow
* supports "**System Caption Style**"
* supports **Image Descriptions** for visualy impaired
* supports Captions and Audio-Description

{% content-ref url="/pages/-MMFMBDvqErCYtTFzLsE" %}
[Android Widget](/widgets/widgets-for-native-apps/android-widget)
{% endcontent-ref %}

{% content-ref url="/pages/I4sQFBaDuwEGhpqIzyuZ" %}
[nexxPLAY for Flutter](/native-players/nexxplay-for-flutter)
{% endcontent-ref %}

{% hint style="info" %}
If your App wants to support LTR/RTL Layout Flows, make sure that the Application Manifest contains the "**android:supportsRtl='true'**" Setting.
{% endhint %}


# Compatibility

nexxPLAY tries to offer as many Features, as the current Platform can offer. Due to technical Limitations though, it is not possible, to offer every Feature on every Platform.

As a general Guide, nexxPLAY supports the following Platforms

## HTML5 SDK

| Browser                  | supported Versions                                                                                                   |
| ------------------------ | -------------------------------------------------------------------------------------------------------------------- |
| **Chrome**               | always the latest 3 Versions                                                                                         |
|                          | Chrome for android is supported                                                                                      |
|                          | Chrome for iOS is supported                                                                                          |
|                          | <p>Chrome for WebViews in supported </p><p>(depending on WebView Configurations, some Features might be missing)</p> |
| **Firefox**              | always the latest 3 Versions (and the latest ESR Version)                                                            |
|                          | Firefox for android is supported                                                                                     |
|                          | Firefox for iOS is supported                                                                                         |
|                          | Firefox Focus is supported                                                                                           |
| **Safari**               | supported, starting with Safari 13                                                                                   |
|                          | Safari for iOS is supported                                                                                          |
|                          | Safari for WebViews is supported                                                                                     |
| **Edge**                 | always the latest 3 Versions                                                                                         |
|                          | Edge for android is supported                                                                                        |
|                          | Edge for iOS is supported                                                                                            |
|                          | Edge for XBox (XBox One, XBox Series) is supported                                                                   |
| **Internet Explorer**    | only Version 11 (with some Restrictions)                                                                             |
| **other Browsers**       | Opera (latest 3 Versions)                                                                                            |
|                          | Vivaldi (latest 3 Versions)                                                                                          |
|                          | Amazon Silk (latest 3 Versions)                                                                                      |
|                          | Samsung Browser (latest 3 Versions)                                                                                  |
|                          | Huawei Browser (latest 3 Versons)                                                                                    |
| **special Environments** | Google AMP (via Plugin and iFrame)                                                                                   |
|                          | Electron Apps                                                                                                        |

{% hint style="info" %}
Please notice, that these minimal Versions mean, that nexxPLAY will work as good as possible on these Platforms. Nevertheless, not all Features might be available in the specific Browser and Environment (especially in Internet Explorer and WebViews)
{% endhint %}

## native SDKs

| OS                | supported Versions                                                                                         |
| ----------------- | ---------------------------------------------------------------------------------------------------------- |
| **iOS**           | supported, starting with iOS 13                                                                            |
| **android**       | supported, starting with android 9 (Pie, API Level 28)                                                     |
| **androidTV**     | supported, starting with android 9 (Pie, API Level 28)                                                     |
| **amazon FireTV** | supported, starting with Fire OS 7.0 (API Level 28)                                                        |
| **Chromecast**    | supported on all Versions (Chromecast, Chromecast Ultra, androidTV with Chromcast, GoogleTV, SmartDevices) |


# Changelog

## 2023-06-13

Added Support for optional COEP Headers on iFrames for very advanced Environments.

{% content-ref url="/pages/aUAySVIHEsGx8Jtx8t7O" %}
[Security and Accessibility](/security-and-accessibility)
{% endcontent-ref %}

## 2023-05-22

Added Details on PlatformVariant Configs for very advanced Usecases.

## 2023-01-12

All SDKs now support the new Campaign System. The new Environment, iFrame URL and Javascript Config Settings are updated accordingly.

## 2022-10-09

Please notice, that all "Caption"-related Functionality is called "TextTrack" from now on. That effects various Methods and Response Types too.

## 2022-07-20

nexxPLAY supports the Link Addon from now on.

{% content-ref url="/pages/-M9YN4WmP8mv1eX61-7a" %}
[Addons](/addons)
{% endcontent-ref %}

## 2022-04-01

The nexxPLAY for React Plugin has been released.

{% content-ref url="/pages/GW8OXFimTQ2naUZD59wy" %}
[React Plugin](/platform-plugins/react-plugin)
{% endcontent-ref %}

## 2022-03-07

The JS SDK Method `getCaptionLanguages()` has been removed. Use `getCaptions()` from now on.&#x20;

The JS SDK Method `getAudioLanguages()` has been replaced by `getAudioTracks()`. It will return an Array of Objects with language and isAudioDescription Attributes from now on.

{% content-ref url="/pages/-M9Ff5c\_bjGXe44xg\_oO" %}
[Player Management](/javascript-sdk/player-management)
{% endcontent-ref %}

## 2022-02-20

The JS SDK now exposes the `getCurrentMediaParent()` Method, which can be called, if a Container (Playlist, AudioAlbum etc) is currently played. The Method will return the basic Metadata for the current parent Media.

{% content-ref url="/pages/-M9Ff5c\_bjGXe44xg\_oO" %}
[Player Management](/javascript-sdk/player-management)
{% endcontent-ref %}

## 2022-02-07

The Configuration Option "`sharingData`" has been removed. If needed, the Configuration Option `webURLRepresentation`  can be used. Although designed primarily for VAST Purposes, it is used too in creating the Sharing Dialogue, if present. Furthermore, it can be updated during Playback with `updateConfiguration` (on all Platforms).

{% content-ref url="/pages/-M9FfDOPhMEysfN-axhI" %}
[SDK Override Options](/integration-enhancements/override-options)
{% endcontent-ref %}

## 2022-01-10

* the `getMediaData()` Method of the JS SDK for querying about the "current Media" has been deprecated, as its response was too big and confusing. It mixed various States of the currently playing Media and the current State of Playback.
* Therefore, it was replaced by the new Methods `getCurrentMedia()` AND `getCurrentPlaybackState()` to better distinguish between the two types of information.

{% content-ref url="/pages/-M9Ff5c\_bjGXe44xg\_oO" %}
[Player Management](/javascript-sdk/player-management)
{% endcontent-ref %}

## 2021-12-27

* added Docs for the new androidTV Channel Extension

{% content-ref url="/pages/KZHHKKOZSsuMmdsjOI8y" %}
[Android TV Channel](/widgets/widgets-for-native-apps/android-tv-channel)
{% endcontent-ref %}

## 2021-11-14

* updating all android-related Docs as the new 6.0.00 Version is out

{% content-ref url="/pages/-M9Ye9Mxc1uksG\_XiGUp" %}
[nexxPLAY for Android](/native-players/nexxplay-for-android)
{% endcontent-ref %}

## 2021-07-30

* added additional Overrides for new Data Saving Settings

{% content-ref url="/pages/-M9FfDOPhMEysfN-axhI" %}
[SDK Override Options](/integration-enhancements/override-options)
{% endcontent-ref %}

## 2021-07-29

* Breaking Change
  * the VAST Macro Syntax has been updated

{% content-ref url="/pages/-M9FeS7MId6XM1cc6S48" %}
[VAST Macros](/integration-enhancements/vast-macros)
{% endcontent-ref %}

## 2021-06-09

* added additional Overrides vor Ad Management

{% content-ref url="/pages/-M9FfDOPhMEysfN-axhI" %}
[SDK Override Options](/integration-enhancements/override-options)
{% endcontent-ref %}

## 2021-02-16

* added **`imageScaleMode`** Override

{% content-ref url="/pages/-M9FfDOPhMEysfN-axhI" %}
[SDK Override Options](/integration-enhancements/override-options)
{% endcontent-ref %}

## 2020-12-08

* added **`disableErrorExit`**&#x4F;verride

{% content-ref url="/pages/-M9FfDOPhMEysfN-axhI" %}
[SDK Override Options](/integration-enhancements/override-options)
{% endcontent-ref %}

## 2020-11-20

* added more Details for native Widgets

{% content-ref url="/pages/-MC-g-hgJ7a858hq4cS5" %}
[Widgets for native Apps](/widgets/widgets-for-native-apps)
{% endcontent-ref %}

## 2020-10-18

* added more Details for WebView Integration

## 2020-10-09

* added various Enhancements for the AMP and FBIA Environment Settings

## 2020-09-11

* added various Enhancements for Consent Management and TCF 2.0

## 2020-08-09

* added **`enableSeekingButtons`**&#x53;etting

## 2020-07-24

* added the Player Skin Overview

## 2020-07-18

* added LiveTicker Addon&#x20;

## 2020-07-12

* added Widget Functionality and Settings
* optimized Description of Addon Listener Use Cases
* renamed Playlicense Partner to Delivery Partner

## 2020-06-27

* added **`forcePrevNext`**&#x53;etting
* added **`changemediaintent`** Event
* added **`stop`**&#x45;xitMode Override
* added **`tickerBoxContainer`** Setting

## 2020-06-16

* added **`moveToContainer`** Player Instance Method

## 2020-06-11

* initial Version