How to use THEOplayer with Streamroot

Introduction

This guide explains how you setup THEOplayer in combination with Streamroot, the provider of peer-assisted and multi-CDN video delivery solutions. . 

Boosting your video workflow with Streamroot DNA technology is easy as pie. In fact, is is so easy, that you could, in most cases, be up and running in under 20 minutes.

The following topics will be covered:

  1. Prerequirements
  2. Starting Template
  3. Integrating Streamroot
  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.17 or higher.
  2. This guide expects that you are a Streamroot client and that you are integrated with their streaming infrastructure. Information on Streamroot can be found at https://streamroot.io/ and https://support.streamroot.io/hc/en-us/articles/360001758273-THEOplayer.
  3. This guide expects that you have access to the Streamroot client SDK.

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,
libraryLocation : '/path/to/your-theoplayer-folder/'
);

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

</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,
libraryLocation : '/path/to/your-theoplayer-folder/'
);

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

</script>

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

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

3. Integrating Streamroot

Step 1: Add Streamroot to your webpage

Starting from the basic template above, you need to add the Streamroot client SDK to the page.

<script src="//cdn.streamroot.io/theoplayer-dna-wrapper/1/stable/theoplayer-dna-wrapper.js"></script>

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'> <!-- adds THEOplayer CSS -->
</head>
<body>

<div class='theoplayer-container video-js theoplayer-skin theo-seekbar-above-controls'></div>
<script src="//cdn.streamroot.io/theoplayer-dna-wrapper/1/stable/theoplayer-dna-wrapper.js"></script>
<script type='text/javascript' src='/path/to/THEOplayer.js'></script> <!-- adds THEOplayer library -->
...
</body>
</html>

Step 2: Activate Streamroot on THEOplayer

 In order for Streamroot DNA to be activated once a video is played, we’ll need add the following lines to the THEOplayer code inside the HTML <body> tag:

var dnaConfig = {};
var wrapper = new TheoPlayerDnaWrapper(player, 'YOUR_STREAMROOT_KEY', dnaConfig);

With the Streamroot code lines (in green), your webpage HTML <body> section should 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 src="//cdn.streamroot.io/theoplayer-dna-wrapper/1/stable/theoplayer-dna-wrapper.js"></script>
<script type='text/javascript' src='/path/to/THEOplayer.js'></script> <!-- adds THEOplayer library -->
<script> var dnaConfig = {};
var wrapper = new TheoPlayerDnaWrapper(player, 'YOUR_STREAMROOT_KEY', dnaConfig);

var player = new THEOplayer.Player(element,
libraryLocation : '/path/to/your-theoplayer-folder/'
);


// DASH
// player.source = {
// sources : [{
// src : 'YOUR_MANIFEST_URL', // sets DASH source
// type : 'application/dash+xml' // sets type to MPEG-DASH
// }]
// };



// HLS
player.source = {
sources : [{
src : 'YOUR_PLAYLIST_URL', // sets HLS source
type : 'application/x-mpegurl' // sets type to HLS
}]
};


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

 

YOUR_STREAMROOT_KEY is the unique Streamroot key that we have assigned to you; make sure it is identical to the one provided in the Account section of your dashboard (if you don’t already have one, you can ask for a trial account here).

YOUR_MANIFEST_URL and YOUR_PLAYLIST_URL are your DASH and HLD video URL sources, respectively.

dnaConfig is an optional object that allows content-owners to set options to apply their specific integration policy and optimize Streamroot DNA performance to different use-cases. Head to our dnaConfig documentation to learn more.

Debugging

In order to verify that Streamroot was correctly configured, we suggest you install Streamroot's debugging tool, DNA Graphs, by following these instructions.

4. Conclusion

THEOplayer partnered with Streamroot to fully pre-integrate their solution.

Extra resources:

  1. https://streamroot.io/
  2. THEOplayer Getting Started Guide
  3. Streamroot THEOplayer documentation