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
Akamai bundle can be downloaded here. Only akamai
, amp
and resources
folders are required and must be in the parent folder of your page.
Include these sources and code in the HTML <head>:
HLS
<!-- AMP build -->
<script src="/path/to/amp.min.js"></script>
<script>
var streamrootDna = {
streamrootKey: 'YOUR_STREAMROOT_KEY',
dnaConfig: {}
};
var hlsjsConfig = {};
window.addEventListener("load", function() {
var config = {
media: {
source: [{
src: 'YOUR_PLAYLIST_URL',
type: 'application/x-mpegURL'
}]
},
hls: {
resources: [
{
type: "text/javascript",
src: "//cdnjs.cloudflare.com/ajax/libs/hls.js/0.12.2/hls.min.js",
},
// Streamroot build
{
type: 'text/javascript',
src: '//cdn.streamroot.io/akamaimp-hls-dna-plugin/1/stable/akamaimp-hls-dna-plugin.js'
}
]
}
};
amp = akamai.amp.AMP.create("akamai-media-player", config);
})
</script>
MPEG-DASH
<!-- AMP build -->
<script src="/path/to/amp.min.js"></script>
<script>
var streamrootDna = {
streamrootKey: 'YOUR_STREAMROOT_KEY',
dnaConfig: {}
};
window.addEventListener("load", function() {
var config = {
media: {
source: [{
src: 'YOUR_PLAYLIST_URL',
type: 'application/dash+xml'
}]
},
dash: {
resources: [
{
type: "text/javascript",
src: "//cdn.dashjs.org/v2.9.3/dash.all.min.js",
},
// Streamroot build
{
type: 'text/javascript',
src: '//cdn.streamroot.io/akamaimp-dash-dna-plugin/1/stable/akamaimp-dash-dna-plugin.js'
}
]
}
};
amp = akamai.amp.AMP.create("akamai-media-player", config);
})
</script>
Step 2: Set up AMP and Streamroot
Include the following code in the HTML <body>:
HLS & MPEG-DASH
<div id="akamai-media-player" style="height:480px; width:640px"></div>
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.