Using Azure Media Services for on-demand video playback with a pre-roll advertisement

AMS (Azure Media Services) is a cloud based platform that enables on-demand and live streaming video solution for consumer and enterprise solutions. In this blog post we will upload a sample video in AMS Assets library and add a pre-roll advertisement using the sample advertisements.

AMS uses blob storage to store video content. The video file can be uploaded to the Azure portal from Assets library. Prior to this we should have an AMS setup on cloud. To setup Azure Media Services account on Azure, please refer following link: https://docs.microsoft.com/en-us/azure/media-services/previous/media-services-portal-create-account

Once the account is setup, go to the Azure Media Service resource and click on Assets. Assets is connected with the blob storage and whatever file is uploaded is stored in the respective blob storage associated with your AMS account.

Click on Upload and upload any video file.

image

Once the file is uploaded you can encode into different formats and publish.

During publishing, depending on the file encoding, you get an option to select the locator. There are two types of locators namely Progressive and Streaming. Progressive locator is just like downloading a video over HTTP where streaming locator is better for streaming video over different protocols. It provides a better client playback experience. With streaming locator there are different bitrates that you can choose from and the client can choose the one which is most appropriate as per their bandwidth. The lowest bitrate is 300 Kbps and the content is the video is downloaded in a chunk of size 300 KB per second.

Once the asset is published the streaming endpoint will be generated that can be use to test in AMP (Azure Media Player). Open the AMP from this link below:

http://ampdemo.azureedge.net/azuremediaplayer.html

Paste the streaming endpoint and hit Update Player to play your stream.

AMS player can be embedded onto a webpage in different ways. We can use the “Get Player Code” option and place the scripts and HTML as shown below.

Add scripts in the head section of your page

headsection

Add HTML 5 video control as shown below in the body

Finally add following script to initialize the Azure media player and set the player options. the src is the source of your streaming endpoint that you have provisioned on AMS

bodysection

In order to add advertisements we can modify the same script as shown above and use ampAds to define advertisements. AMP uses VAST ads to embed into pre-roll, mid-roll or post-roll options. VAST stands for Video Ad Serving Template. It is a popular industry standard to make video ad with pre-roll or post-roll ads. It is also very common across different services. To create VAST ads we can use platforms like OpenX or AdButler. I will not go into the details as this is off the topic for this post. However, we can use the sample VAST advertisements to test our stream. Let’s modify the script and add the ampAds into the AMP template.

Here is the updated body that plays the sample VAST ad before the video begins.

body

Hope this helps!

Leave a comment