This article details how to use CDN Mesh Delivery with Akamai Adaptive Media Player.
We have built an optimized plugin for Akamai Adaptive Media Player from v4.100.7.
Not into tutorials? |
Step 1: Install AMP and Streamroot builds
Include these sources and code in the HTML <head>:
HLS
<!-- AMP build -->
<script src="https://amp.akamaized.net/hosted/1.1/player.esi?apikey=MY_API_KEY&version=x.x.x"></script>
<!-- Streamroot plugin -->
<script src="//cdn.streamroot.io/akamaimp-hls-dna-plugin/1/stable/akamaimp-hls-dna-plugin.js"></script>
MPEG-DASH
<!-- AMP build -->
<script src="https://amp.akamaized.net/hosted/1.1/player.esi?apikey=MY_API_KEY&version=x.x.x"></script>
<!-- Streamroot plugin -->
<script src="//cdn.streamroot.io/akamaimp-dash-dna-plugin/1/stable/akamaimp-dash-dna-plugin.js"></script>
Step 2: Set up AMP and Streamroot
Include the following code in the HTML <body>:
HLS & MPEG-DASH
<div id="amp"></div>
<script>
// Streamroot-injected informations
var streamrootDna = {
streamrootKey: 'YOUR_STREAMROOT_KEY',
dnaConfig: {}
};
var hlsjsConfig = {}
var config = {
media: {
src: 'YOUR_PLAYLIST_URL',
type: 'application/x-mpegURL' //HLS
type: 'application/dash+xml' //MPEG-DASH
}
};
amp = akamai.amp.AMP.create("amp", config);
</script>
| Parameter name | Mandatory | Description |
|---|---|---|
| dnaConfig | No |
The object in which you can pass Streamroot options (property, contentIdGenerator, id, etc.). |
| hlsjsConfig | No | The object in which you can change hls.js options. More information can be found here. |
| 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_PLAYLIST_URL | Yes | Your HLS playlist. |
Step 3: Visualize Streamroot
| In order to verify if Streamroot was correctly configured, please install our Mesh Delivery Graphs. |
Recommended hls.js options
hls.js has a wide variety of configuration parameters that can be instantiated in hlsjsConfig object for fine-tuning. You can learn more about them in their API Documentation.
To get the best performance with live content, we recommend setting the following values:
var hlsjsConfig = {
"maxBufferSize": 0,
"maxBufferLength": 30,
"liveSyncDuration": 30,
"liveMaxLatencyDuration": Infinity
}Otherwise, liveSyncDuration and liveMaxLatencyDuration are not needed for VoD streams.
Recommended dash.js options
To get the best performance with live content, we recommend setting the following value in the player options:
// 30s latency
player.setLiveDelay(30);
// Or 15 fragments, in the case fragment duration is 2s
player.setLiveDelayFragmentCount(15);player.updateSettings({
"streaming": {
// 30s latency
"liveDelay": 30s,
// Or 15 fragments, in the case fragment duration is 2s
"liveDelayFragmentCount": 15,
}
}
The CDN Mesh Delivery module currently has compatibility issues when BOLA is activated on live streams. However, VoD is fine. We highly recommend you to deactivate BOLA for live streaming (including DVR streams).
For versions 2.6.0 and later, by default dash.js dynamically switches between throughput based rules and BOLA. Use this to disable BOLA (see dash.js documentation).
mediaPlayer.setABRStrategy("abrThroughput")player.updateSettings({
"streaming": {
"abr": {
"ABRStrategy": "abrThroughput",
}
}
}If you are going to discard or not use the MediaEngine instance anymore, please make sure to clean the CDN Mesh Delivery wrapper manually, using : DashJsDnaWrapper.destroy().
For example:
// Reset the player before discarding it
player.reset();
// Destroy the wrapper
wrapper.destroy();
// It is not recommended to use your player after this.