yospace-connector-web

The Yospace connector provides a Yospace integration for THEOplayer.

Prerequisites

In order to use this connector, a THEOplayer build with a valid license is required. You can use your existing THEOplayer HTML5 SDK license or request yours via THEOportal.

For setting up a valid Yospace session, the Yospace Ad Management SDK is required. For more information on how to install the Ad Management SDK, please refer to the documentation of Yospace.

Remark: This version of the Yospace Connector is compatible with Yospace Ad Management SDK version 3.5.2 or higher. If you still want to use an older Ad Management SDK, please use the connector version 1.4.0.

Installation

Install using your favorite package manager for Node (such as npm or yarn):

Install via npm

npm install @theoplayer/yospace-connector-web
Copy

Install via yarn

yarn add @theoplayer/yospace-connector-web
Copy

Usage

First you need to add the Yospace connector to your app :

• Add as a regular script

<script type="text/javascript" src="path/to/yospace-connector.umd.js"></script>
<script type="text/javascript">
    const player = new THEOplayer.Player(element, configuration);
    const yospaceConnector = new THEOplayerYospaceConnector.YospaceConnector(player);
</script>
Copy

• Add as an ES2015 module

<script type="module">
    import { YospaceConnector } from "path/to/yospace-connector.esm.js";
    const player = new THEOplayer.Player(element, configuration);
    const yospaceConnector = new YospaceConnector(player);
</script>
Copy

To make use of the Yospace integration, you need to set up a session for your Yospace source :

const source = {
    sources: [
        {
            src: "YOUR_YOSPACE_SRC",
            ssai: {
                integration: "yospace"
                // If necessary, you can define your streamType.
                // streamType: 'vod' | 'live' | 'livepause'
            }
        }
    ]
}

await yospaceConnector.setupYospaceSession(source);
Copy

If you want to customize your session, you can also pass your customized SessionProperties from the Yospace Ad Management SDK :

// create a new SessionProperties object using the Ad Management SDK.
const sessionProperties = new YospaceAdManagement.SessionProperties();
const source = {
    sources: [
        {
            src: "YOUR_YOSPACE_SRC",
            ssai: {
                integration: "yospace"
                // If necessary, you can define your streamType.
                // streamType: 'vod' | 'live' | 'livepause'
            }
        }
    ]
}

await yospaceConnector.setupYospaceSession(source, sessionProperties);
Copy

Once the setup of the Yospace session is done, you can continue to use the player and the connector will handle everything related to Yospace.