This article details how to use CDN Orchestrator multi-CDN selector on web with any CDN Orchestrator compatible player & media Engine.
CDN Orchestrator is available in Lumen 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 CDN Orchestrator wrapper/plugin to use.
CDN Orchestrator is compatible with all the web players listed in this page. In order to integrate, it is necessary to set the compassProperty in the dnaConfig.
dnaConfig : {
"compassProperty": "YOUR_COMPASS_PROPERTY_NAME"
}
Steps to Integrate:
After setting up your compassProperty, you can follow these steps in order to integrate with CDN Orchestrator. The following example is for JW player.
1. 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. |
2. Set up JW Player and CDN Orchestrator
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 3 of this page for more details. |
YOUR_PLAYLIST_URL | Yes | Your HLS playlist (manifest) URL. |
3. Visualize Streamroot.
In order to verify if Streamroot was correctly configured, please install our Compass Graphs | ![]() |
Optimize Player and CDN Orchestrator interaction
To improve the behavior of Orchestrator, 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'}
]
}
};