How to use THEOplayer with Yospace Ad Insertion

Introduction

This guide explains how you set-up THEOplayer in combination with Yospace, a partnered dynamic Server-Side Ad Insertion (SSAI) vendor. THEOplayer provides a user-friendly and pre-integrated API for quality playback of Yospace's SSAI streams.

If you are already comfortable with the THEOplayer API, you can go straight over to the Server Side Ad Insertion Pre-Integration API

The following topics will be covered:

  1. Prerequirements
  2. Starting Template
  3. Integrating Yospace
  4. Conclusion

1. Prerequirements

There are three prerequirements in order to continue with this guide:

  1. This guide expects that you have a THEOplayer license. If you aren't using THEOplayer yet, you can start your free trial here. Be sure to have THEOplayer version 2.12 or higher.
  2. This guide expects that you are a Yospace client and that you are integrated with their streaming infrastructure. Information on Yospace can be found at www.yospace.com.
  3. This guide expects that you have access to the Yospace client SDK.

If you can place a checkmark next to these three fields, you are good to go.

2. Starting Template

The first thing you need is a valid THEOplayer set-up. If you have no experience with setting up our player, we have an excellent getting started guide.

To get THEOplayer to work, you only need to do three things:

  1. Reference the THEOplayer JavaScript library (and optionally the default CSS styles).
  2. Add a container which can hold your video player with HTML.
  3. Create your player through JavaScript using our API.

A basic HTML page with a working THEOplayer could like the following:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
<title>THEOplayer 2.X: Getting Started</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href='/path/to/ui.css'> <!-- ads THEOplayer CSS -->
</head>
<body>

<div class="theoplayer-container video-js theoplayer-skin theo-seekbar-above-controls"></div>

<script type='text/javascript' src='/path/to/THEOplayer.js'></script> <!-- ads THEOplayer library -->
<script>

var element = document.querySelector('.theoplayer-container');
var player = new THEOplayer.Player(element);

player.source = {
sources : [{
src : 'your.m3u8',
type : 'application/x-mpegurl'
}]
};

</script>
</body>
</html>

 Pretty self-explanatory, isn't it?

<link rel="stylesheet" type="text/css" href='/path/to/ui.css'> <
<script type='text/javascript' src='/path/to/THEOplayer.js'></script> 

The two snippets above are the references to the JS and CSS library.

<div class="theoplayer-container video-js theoplayer-skin theo-seekbar-above-controls"></div>

The snippet above is your HTML container.

<script>

var element = document.querySelector('.theoplayer-container');
var player = new THEOplayer.Player(element);

player.source = {
sources : [{
src : 'your.mpd',
type : 'application/dash+xml'
}]
};

</script>

The snippet above initializes your player, including a HLS source.

To fully master THEOplayer, be sure to read up our documentation.

3. Integrating Yospace

Starting from the basic template above, you need to add the Yospace client SDK to the page and a ServerSideAdInsertionConfiguration to your source that specifies that it is a Yospace SSAI source.

player.source = {
    sources : [{
        src : 'your.m3u8',
        type : 'application/x-mpegurl',
        ssai : {
             integration : 'yospace'
        }
    }]
};

Your updated starting template would now look like this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
<title>THEOplayer 2.X: Getting Started</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href='/path/to/ui.css'> <!-- ads THEOplayer CSS -->
</head>
<body>

<div class="theoplayer-container video-js theoplayer-skin theo-seekbar-above-controls"></div>

<script type='text/javascript' src='/path/to/yospaceSDK.js'></script> <!-- ads Yospacelibrary -->
<script type='text/javascript' src='/path/to/THEOplayer.js'></script> <!-- ads THEOplayer library -->
<script> player.source = { sources : [{ src : 'your.m3u8', type : 'application/x-mpegurl', ssai : { integration : 'yospace' } }] }; </script>
</body>
</html>

If you want to read up on how to specify a THEOplayer source with a ServerSideAdInsertionConfiguration you can check the server-side ad insertion pre-integration API documentation.

4. Conclusion

THEOplayer partnered with Yospace to fully pre-integrate their Server-Side Ad Insertion solution, allowing you to play their streams in a breeze.

This partnership means that we are compatible with each other: THEOplayer has a long history with and is optimized to play Yospace streams. We regularly validate our integration and are the first to know about changes to the Yospace infrastructure.

Extra resources:

  1. Server-Side Ad Insertion Pre-Integration API
  2. THEOplayer Getting Started Guide
  3. Yospace website