4

Azure Media Services

 3 years ago
source link: http://davidgiard.com/2021/01/20/AddingAnAdaptiveAzureMediaServicesVideoToAWebPage.aspx
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Adding an Adaptive Azure Media Services Video to a Web Page - The Wit and Ramblings of David Giard Demanding rigidly defined areas of doubt and uncertainty

 Wednesday, January 20, 2021

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:

<?xml version="1.0" encoding="UTF-8"?> 
< 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" /> 
        <c t="0" d="60160000" /> 
        <c d="50560000" /> 
    </StreamIndex> 
    < 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" /> 
        <c t="0" d="60000000" /> 
        <c d="50333333" /> 
    </StreamIndex> 
< /SmoothStreamingMedia>

Notice there are two <StreamIndex> tags: One for the audio and one for the video. The StreamIndex audio tag has only one <QualityLevel> child tag, indicating that there is only one audio option. The StreamIndex video tag has four <QualityLevel> 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 <video> tag, as shown in Listing 2.

Listing 2:

                    <video 
                           id="vid1" 
                           class="azuremediaplayer amp-default-skin" 
                           autoplay 
                            controls 
                           width="848" 
                            height="480" 
                           data-setup='{"nativeControlsForTouch": false}'> 
                         <source 
                                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" /> 
                     </video>

A full web page is shown in Listing 3:

Listing 3:

<html>
    <head>
        <link href="https://amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet" />
        <script src="https://amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>
    </head>
    <body>
        <video id="vid1" class="azuremediaplayer amp-default-skin" autoplay controls width="848" height="480" data-setup='{"nativeControlsForTouch": false}'>
            <source 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" />
        </video>
    </body>
</html>

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.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK