Articles in this section

See more

Akamai Adaptive Media Player

Supported Versions

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 this 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.8.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.6.8/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 ...).
hlsjsConfig No The object in which you can change hls.js options. More information can be found hereunder.
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 is correctly configurated, please install our DNA Graphs.

 

Recommended hls.js options

hls.js as 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 performances with live contents, we recommend setting the following values:

var hlsjsConfig = {
   "maxBufferSize": 0,
   "maxBufferLength": 30,
   "liveSyncDuration": 30
}

Otherwise, liveSyncDuration is not needed for VoD streams.

Related articles