Menu

Lumen help

Quick Start: Setting up CDN Load Balancer

Introduction

CDN Load Balancer can be integrated into your website with the video player of your choice in just a few simple steps. In this quick start guide, we will cover how to set up CDN Load Balancer with a compatible player and media engine.  The complete list of integrations we support and guides for setting them up can be found here. If you would like to integrate CDN Load Balancer with a video player not on the list, write to us at cdnsupport@lumen.com and we will help you out.

Note: To set up CDN Load Balancer, you'll first have to create compassProperty. Please follow the documentation on configuring CDN Load Balancer to create your property and define your CDNs.

Steps to Integrate

After setting up your compassProperty, follow these steps to integrate CDN Load Balancer. The following example is for JW player.

 

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>

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

To get the highest flexibility of deployment, we recommend setting the StreamrootKey in the Query Parameter "srKey".

 

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.

Set up JW Player and CDN Load Balancer

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 CDN Load Balancer options.

compassProperty

No

The name of the CDN Load Balancer property you want to use. (See configuring CDN Load Balancer for more details)

YOUR_PLAYLIST_URL

Yes

Your HLS playlist (manifest) URL.

Visualize CDN Load Balancer


To verify that CDN Load Balancer was correctly configured, install our CDN Load Balancer Graphs

CDN Load Balancer graph

Optimize interaction between the player and CDN Load Balancer

To improve the behavior of CDN Load Balancer, we recommend setting timeouts on chunk and manifest requests where possible. This will trigger a CDN switch if possible.
 

If the player's default behavior is not sufficient, we recommend setting request timeout values to at least twice the chunk duration.
 

Here are some examples for most of our supported players.
 

HLS (Hls.js):

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

More on Hls.js parameters can be found in their API Documentation. These parameters also work with players based on Hls.js (Video.js, JW Player, Flowplayer, Clappr, etc.).

Shaka Player

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

More on Shaka Player configurations can be found in the Shaka Player documentation. These configurations also work with players based on Shaka Player (JW Player).

Bitmovin

Bitmovin does not abort slow requests. Lumen has 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 CDN Load Balancer on Safari

On Safari, the stream is played through the Safari Native Player by default (see this article from Bitmovin on the subject). For CDN Load Balancer to be activated on Safari, you 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'}
   ]
 }
};