Web

Web

This article details how to use Streamroot COMPASS™ 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

Streamroot Compass 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 Compass 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
}

In this article