CDN Orchestrator Web Integration – Streamroot Documentation

This article details how to use CDN Orchestrator multi-CDN selector on web with any Streamroot compatible player & media Engine.

Warning
Compass is available in Streamroot Libraries starting from Master Release DNA 2.10 (which corresponds to hlsjs-dna-wrapper 1.0.44 // dashjs-dna-wrapper 1.1.14). Check this page for more info on Master Releases and on which version of Streamroot wrapper/plugin to use.

Step 1: Install your player and Streamroot builds

CDN Orchestrator is compatible with all the web players listed in this page. The integration example listed in the Streamroot Web Players pages, are all valid for Streamroot Compass, the only change from a DNA integration is the addition of the compassProperty (see the below JW example) :

dnaConfig : {
	"compassProperty": "YOUR_COMPASS_PROPERTY_NAME"
}

The compassProperty can be define by either a String or a Function to apply different delivery parameters according to your business logic or other parameters.

We give below an example of the integration code required to set up Streamroot with JW Player for HLS streaming.

a - Install the build

Include these sources in the HTML <head>:

<!-- JW Player build -->
<script src="//ssl.p.jwpcdn.com/player/v/8.6.3/jwplayer.js"></script>

<!-- Streamroot plugin -->
<script src="//cdn.streamroot.io/jwplayer-hls-dna-plugin/1/stable/jwplayer-hls-dna-plugin.js#streamrootKey=YOUR_STREAMROOT_KEY"></script>

Parameter name	Mandatory	Description
YOUR_STREAMROOT_KEY	Yes	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.

b - Set up JW Player and Streamroot

Include the following code in the HTML <body>:

HLS (hls.js)

<div id="demoplayer"></div>
<script>
  jwplayer.key = "YOUR_JWPLAYER_LICENSE";
  jwplayer('demoplayer').setup({
    file : "YOUR_PLAYLIST_URL",  // example: "http://cloudfront.delivery.com/bigBuckBunny.smil/playlist.m3u8"
    hlsjsConfig: {},
    dnaConfig : {
    	"compassProperty": "YOUR_COMPASS_PROPERTY_NAME"
    }
  })
</script>

MPEG-DASH (Shaka Player)

<div id="demoplayer"></div>
<script>
  jwplayer.key = "YOUR_JWPLAYER_LICENSE";
  jwplayer('demoplayer').setup({
    file : "YOUR_PLAYLIST_URL",  //example: "http://cloudfront.delivery.com/bigBuckBunny/manifest.mpd"
    shakaConfig: {},
    dnaConfig : {
    	compassProperty: "YOUR_COMPASS_PROPERTY_NAME"
    }
  })
</script>

Parameter name	Mandatory	Description
dnaConfig	No	The object in which you can pass Streamroot options.
compassProperty	No	The name of the Compass property you want to use. See Step 2 of this page for more details.
YOUR_PLAYLIST_URL	Yes	Your HLS playlist (manifest) URL.

Step 2: Optimize Player and CDN Orchestrator interaction

To improve the behavior of Compass, we recommend setting timeouts on chunk and manifest requests when possible. This will trigger CDN switch if possible.

If the player's default behavior isn't enough, we recommend, when possible, setting requests timeouts values to at least twice the chunk duration.

Here are some examples for most of our supported players.

Hls.js

var hlsjsConfig = {
   "fragLoadingTimeOut": 4000,
   "manifestLoadingTimeOut": 4000,
   "levelLoadingTimeOut": 4000,
}

More on Hls.js parameters in their API Documentation.

These parameters also works with players based on Hls.js (Video.js, JW Player, Flowplayer; Clappr ...)

Shaka Player

"streaming": {
    "retryParameters": {
        "timeout": 4000, // timeout in ms, after which we abort; 0 means never
    }
}

More on Shaka Player configurations in their Documentation.

These configurations also works with players based on Shaka Player (JW Player)

Bitmovin

Bitmovin does not abort slow request. We've added an ability to add a forced timeout to chunk and/or manifest requests.

"streamroot": {
  "manifestTimeout": 4000, // In ms, 0 means no timeout
  "segmentTimeout": 4000, // In ms, 0 menas no timeout
}

Activating Streamroot on Safari

On Safari, the stream will be played through the Safari Native Player by default (see this article from Bitmovin on the subject). In order for CDN Orchestrator to be activated on Safari, you will need to configure the player to use Bitmovin HLS playback. To do so, add a preferredTech in the Bitmovin configuration object.

var conf = {
  key: "YOUR-BITMOVIN-KEY",
  source: {
    //Only one playlist URL must be set at a time.
    hls: 'YOUR_PLAYLIST_URL',
    dash: 'YOUR_PLAYLIST_URL',
    smooth: 'YOUR_PLAYLIST_URL'
  },
  playback: {
    preferredTech: [
       {player: 'html5', streaming: 'hls'}
   ]
 }
};

Web