Adding an Adaptive Azure Media Services Video to a Web Page

In a previous article, I showed you how to use Azure Media Services to generate a Streaming Locator so that others can view and/or download your video.

In this article, I will show you how to create a web page that allows users to select the format and resolution in which they want to view your video.

Navigate to the Azure Portal and to your Azure Media Services account, as shown in Fig. 1

Fig. 1

Then, select "Assets" from the left menu to open the "Assets" blade, as shown in Fig. 2.

Fig. 2

Select the Output Asset created by encoding your input video Asset to display the Asset details page, as shown in Fig. 3.

Fig. 3

Verify that the Streaming Locator exists and is running. Start it, if necessary.

Click the "View locator" link to display the "Streaming URLs" dialog, as shown in Fig. 4.

Fig. 4

Scroll down to the "SmoothStreaming" section shown in Fig. 5.

Fig. 5

The SmoothStreaming URL points to a file named "manifest", which is an XML document with information on available encoded videos in this asset. A sample of such a document is in Listing 1.

Listing 1:

 
< SmoothStreamingMedia MajorVersion="2" MinorVersion="2" Duration="110720000" TimeScale="10000000"> 
    < StreamIndex Chunks="2" Type="audio" Url="QualityLevels({bitrate})/Fragments(aac_und_2_127999_2_1={start time})" QualityLevels="1" Language="und" Name="aac_und_2_127999_2_1"> 
        < QualityLevel AudioTag="255" Index="0" BitsPerSample="16" Bitrate="127999" FourCC="AACL" CodecPrivateData="1190" Channels="2" PacketSize="4" SamplingRate="48000" /> 
         t="0" d="60160000" /> 
         d="50560000" /> 
     
    < StreamIndex Chunks="2" Type="video" Url="QualityLevels({bitrate})/Fragments(video={start time})" QualityLevels="4"> 
        < QualityLevel Index="0" Bitrate="2478258" FourCC="H264" MaxWidth="1024" MaxHeight="576" CodecPrivateData="000000016764001FACD94040049B0110000003001000000303C0F18319600000000168EBECB22C" /> 
        < QualityLevel Index="1" Bitrate="1154277" FourCC="H264" MaxWidth="640" MaxHeight="360" CodecPrivateData="000000016764001EACD940A02FF970110000030001000003003C0F162D960000000168EBECB22C" /> 
        < QualityLevel Index="2" Bitrate="731219" FourCC="H264" MaxWidth="480" MaxHeight="270" CodecPrivateData="0000000167640015ACD941E08FEB0110000003001000000303C0F162D9600000000168EBECB22C" /> 
        < QualityLevel Index="3" Bitrate="387314" FourCC="H264" MaxWidth="320" MaxHeight="180" CodecPrivateData="000000016764000DACD941419F9F0110000003001000000303C0F14299600000000168EBECB22C" /> 
         t="0" d="60000000" /> 
         d="50333333" /> 
     
< /SmoothStreamingMedia>

Notice there are two tags: One for the audio and one for the video. The StreamIndex audio tag has only one child tag, indicating that there is only one audio option. The StreamIndex video tag has four child tags, indicating that there are four video options - each wiht a different size and bitrate.

We can add the SmoothStreaming manifest URL to an HTML

Listing 2:

                     
                           id="vid1" 
                           class="azuremediaplayer amp-default-skin" 
                           autoplay 
                            controls 
                           width="848" 
                            height="480" 
                           data-setup='{"nativeControlsForTouch": false}'> 
                          
                                src="https://dgtestams-usea.streaming.media.azure.net/77ec142c-e655-41a2-8ddb-a3e46168751a/WIN_20201215_14_28_08_Pro.ism/manifest" 
                                 type="application/vnd.ms-sstr+xml" />

A full web page is shown in Listing 3:

Listing 3:


    
         href="https://amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet" />
        
    
    
         id="vid1" class="azuremediaplayer amp-default-skin" autoplay controls width="848" height="480" data-setup='{"nativeControlsForTouch": false}'>
             src="https://dgtestams-usea.streaming.media.azure.net/77ec142c-e655-41a2-8ddb-a3e46168751a/WIN_20201215_14_28_08_Pro.ism/manifest" type="application/vnd.ms-sstr+xml" />

Fig. 6 shows the output of Listing 3 when viewed in a browser.

Fig. 6

As you can see, clicking the "Quality" icon at the bottom right of the player allows the viewer to select the quality of the video. This is helpful if the user is on a lower bandwidth.

Note that you are charged extra when the Streaming Locator is running, so it is important to stop the Locator if you do not need it.

In this article, you learned how to use the SmoothStreaming URL to add your video to a web page.