Web Players

See more

Azure Media Player

This article describes in detail how to integrate Streamroot DNA™ into your Azure Media Player.

We have built an optimized wrapper for Azure Media Player from v2.1.4.

 

Not into tutorials?

     

 

Step 1: Install Azure Media Player and Streamroot build

Include these sources in the HTML <head>:

<!--Azure Media Player build -->
<link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>

<!-- Streamroot wrapper -->
<script src="//cdn.streamroot.io/azuremp-dna-wrapper/1/stable/azuremp-dna-wrapper.js"></script>

 

Step 2: Set up Azure Media Player and Streamroot

In the HTML <body> or with npm

<div id="video-div">
    <video id="demoplayer" class="azuremediaplayer amp-default-skin" />
</div>
<script>
    var player = amp('demoplayer', {});
    var dnaConfig = {};
    var wrapper = new AzureMPDnaWrapper(player, 'YOUR_STREAMROOT_KEY', dnaConfig);
    window.player = player;
    player.src([{
        src: 'YOUR_PLAYLIST_URL',
        type: 'application/vnd.ms-sstr+xml',
    }]);
</script>

 

Parameter name Mandatory Description
dnaConfig No

The object in which you can pass Streamroot options (property, contentIdGenerator, id, etc..).
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 Azure Media Player playlist.

 

Step 3: Visualize Streamroot

In order to verify if Streamroot was correctly configured, please install our DNA Graphs.

Related articles