This article describes in detail how to integrate CDN Mesh Delivery 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 Mesh Delivery Graphs. |