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. |