Adding Azure Media Services Video to a Web Page

Using AMS video and Azure Media Player on your project

Image Credit: Microsoft Learn

Please check out my previous blog on how to get started with Azure Media Services if you did have your video asset URL generated from Azure Media Services.

Azure Media Player is a video player for webs and apps. Azure Media Player easily integrates into web and app solutions, supports most popular devices, and uses familiar JavaScript API development.

In order to stream azure stored video assets, we will use azure media player and configure it using the two steps below.

Step 1: Include the JavaScript and CSS files in the head of your page.

Step 2: Add html5 video tag to your page.

Step 1: Include the JavaScript and CSS files in the head of your page.

Use the CDN version to include the files. First add the CSS link.

<link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" 
rel="stylesheet"> 

Then, add the JavaScript script CDN.

<script src= "//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>   

Step 2: Add an HTML5 video tag to your page

With Azure Media Player, you can use an HTML5 video tag to embed a video. Azure Media Player will then read the tag and make it work in all browsers, not just ones that support HTML5 video. Beyond the basic markup, Azure Media Player needs a few extra pieces.

1. The attribute on the tells Azure Media Player to automatically set up the video when the page is ready and read any (in JSON format) from the attribute.
2. The id attribute: Should be used and unique for every video on the same page.
3. The class attribute contains two classes:

• Azure Media Player applies styles that are required for Azure Media Player UI functionality

• amp-default-skin applies the default skin to the HTML5 controls

4. This includes two required attributes

•src attribute can include a *.ism/manifest file from Azure Media Services is added, Azure Media Player automatically adds the URLs for DASH, SMOOTH, and HLS to the player

• type attribute is the required MIME type of the stream. The MIME type associated with “.ism/manifest” is “application/vnd.ms-sstr+xml”

Finding the URL from Azure

5. The optional attribute on the tells Azure Media Player if there are any unique delivery policies for the stream from Azure Media Services, including, but not limited to, encryption type (AES or PlayReady, Widevine, or FairPlay) and token.

Include/exclude attributes, settings, sources, and tracks exactly as you would for HTML5 video.

<video id="vid1" class="azuremediaplayer amp-default-skin" autoplay controls  
width="640" height="400" poster="poster.jpg" data-setup='{"techOrder":  
["azureHtml5JS", "flashSS", "html5FairPlayHLS","silverlightSS", "html5"],  
"nativeControlsForTouch": false}'> 
  <source src="http://amssamples.streaming.mediaservices.windows.net/91492735- 
  c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest"  
  type="application/vnd.ms-sstr+xml" /> 
  <p class="amp-no-js"></p> 
</video>  

Here as you can see, we have used the generated URL of our asset that was processed on Microsoft Azure. This is the last step we follow to be able to use azure media player on our project.

Azure Media Player playing the video from Azure.

🎉Congrats! 🎉 for making it till the very end. I hope you followed along and you were able to add Azure Media Service video and Azure Media Player on your project. It’s nice guiding you till this point🙌! I will see you in a while. Until then, stay tuned.