This article provides a step-by-step guide to using CDN Mesh Delivery with the Bitmovin Player.
For VOD use cases, we have built an optimized plugin for Bitmovin Player from v 7.7.
For Live Streaming, we highly recommend using Bitmovin v 8.1 or above to enjoy the benefit of its new and more performant ABR logic v3 (activable in 7.8) and a fully optimized integration with CDN Mesh Delivery.
Not into tutorials? |
Step 1: Install the Bitmovin and Streamroot builds
From our CDN
Include these sources in the HTML <head>:
<!-- Bitmovin Player build -->
<script src="//bitmovin-a.akamaihd.net/bitmovin-player/stable/7.8/bitmovinplayer.js"></script>
<!-- Streamroot plugin -->
<script src="//cdn.streamroot.io/bitmovin-dna-plugin/1/stable/bitmovin-dna-plugin.js?srKey=YOUR_STREAMROOT_KEY"></script>
Using NPM
Install runtime and dev dependencies:
npm install @streamroot/bitmovin-dna-plugin
Step 2: Set up Bitmovin and Streamroot
In the HTML <body>
Include the following code in the HTML <body>.
(Note that these code examples are for Bitmovin 8.1+. Please refer to the Bitmovin documentation for code examples of previous versions.)
<div id="demoplayer"></div>
<script>
var bitmovinConfig = {
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'
},
dnaConfig: {},
live:{
lowLatency:{
targetLatency: 30
}
},
// To set latency for Bitmovin v7
streamroot: {
v7LiveDelay: 20
}
};
window.addEventListener("load", function() {
player = new bitmovin.player.Player(
document.getElementById("bitmovin-player"),
bitmovinConfig
);
player
.load({
//Only one playlist URL must be set at a time.
hls: "YOUR_PLAYLIST_URL"
//dash: 'YOUR_PLAYLIST_URL',
//smooth: 'YOUR_PLAYLIST_URL'
})
.then(function() {
player.play();
});
});
</script>
With NPM
Include the following in your bundle.
import { Player } from 'bitmovin-player';
import { bitmovinDnaExtend } from '@streamroot/bitmovin-dna-plugin';
// Extend player class with DNA
var DNABitmovinPlayer = bitmovinDnaExtend(Player, 'YOUR_STREAMROOT_KEY');
var bitmovinConfig = {
key: 'YOUR_BITMOVIN_KEY',
dnaConfig: {},
live:{
lowLatency:{
targetLatency: 30
}
},
// To set latency for Bitmovin v7
streamroot: {
v7LiveDelay: 20
}
};
// Instanciate player
var player = new DNABitmovinPlayer(videoElement, bitmovinConfig);
// Load stream
player.load({
//Only one playlist URL must be set at a time.
hls: "YOUR_PLAYLIST_URL"
//dash: 'YOUR_PLAYLIST_URL',
//smooth: 'YOUR_PLAYLIST_URL'
});
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 Mesh Delivery 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'}
]
}
};
Mandatory and optional parameters
The following parameters are either mandatory or recommended.
| Parameter name | Mandatory | Description |
|---|---|---|
| dnaConfig | No | The object in which you can pass Streamroot options (property, contentIdGenerator, id, etc.). |
| targetLatency | No | The Bitmovin option to set a custom live delay (from Bitmovin 8.3) |
| 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. |
| YOUR_BITMOVIN_KEY | Yes | The Bitmovin Player license keys. |
| YOUR_PLAYLIST_URL | Yes | Your HLS, DASH or Smooth playlist. |
Step 3: Visualize Streamroot
|
To verify that Streamroot was correctly configured, install our Mesh Delivery Graphs.
|