Windows Azure offers an easy and modern way to work with media files. With Azure Media Services you can upload video files, encode them and offer them for streaming clients. A great way to use multimedia content in your webs and apps!

For example Azure Media Services have been used in the Olympic Games 2012 in London for delivering more than 2,300 hours of live and HD content to more than 20 countries for multiple Olympics broadcasters, see Windows Azure Media Services Case Study.

In this article I will show you how easy Azure media services can be used, not too much in detail but showing the process and how to use the streaming content in your web apps.

Create your media service

In Windows Azure portal create a new media service in Media Services/Create. In App Services choose a name, region and if your want to use a new or existing storage account for storing the BLOBs.

image

Supported formats

A video file consits of a container (which wraps the audio and video codecs, but doesn’t contain the raw data itself), a video codec and the audio codec . When using good codecs, you get smaller resulting video files without any quality loss.

Today mainly these formats are used in Internet, see MP4 Video Encoding:

Which format works where?

  • MP4 works on devices, on browsers in Flash and on half the browsers in HTML5.

  • WebM only works on half the browsers in HTML5.

  • FLV only works on browsers in Flash.

In many cases the HTML5 video is first choice, supported by most modern browsers, like Internet Explorer 9+, Firefox, Opera, Chrome, and Safari.

Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg.
IE supports MP4 only, Chrome and Firefox (up from v21) both support MP4, WebM and Ogg.
Safari supports MP4 only and Opera only WebM and Ogg, see HTML5 Video

In Azure find the Supported Codecs and File Types for Windows Azure Media Encoder. For exporting you can choose between wmv, wma, mp4 and the smooth streaming file formats ismv and isma.

Uploading

The upload of your video files can be done in the Azure portal. Go to “content”, click “upload” and here we go!

image

In Uploading Media you find an overview of relevant concepts and different ways to upload your content.

Tip: Uploading only works for small video files…

Uploading large video files

If you want to upload a video file larger than 200MB the Azure portal denies the upload process, see:

image

The solution: you can only upload file size less than 200MB through Azure portal. If you want to upload a file bigger than 200 MB, you have to use the Media Services API, see here.

Well, my demo video file “Deep-Dive-WAAD.mp4” is 263MB…
I guess, Microsoft wants to avoid problems with timeouts in the portal website.

Use the API with an app

Ok, let´s create a small app for uploading my large video file. First I create a new WPF project in Visual Studio 2013. Now we need to install the Windows Azure Media Services .NET SDK, see  Windows Azure Media Services .NET SDK 3.0.0.

Run the following command in the Package Manager Console:

PM> Install-Package windowsazure.mediaservices

After we have all the necessary components in our project, we need some code from the Azure portal. We get the sample code directly from the start page of our media service.

image1

So simply copy and paste the generated code – including my media services key – to my project, f.e. in a button click event. So my slightly adapted code looks like this:

image2

When we run the application and start the upload the Azure portal already has the file in it´s content.

image

The upload on my WiFi takes some time, something like 30 minutes.
Time to switch to cable…anyway, WiFi should be good enough, it´s sunday.

Improving the uploading app

The sample code of course doesn´t have any error handling built in – that would be on your side, at least a try-catch block and a retry-logic or similiar.

Also I would like to add a simple UI so that the desktop app can be used for any Media Service and any video. So let´s improve the app somehow. This shall be the frontend:

image

The application uses an HTML5 <video> tag to handle media streaming. Of course you can use this HTML-snippet in your own apps.

When playing the video and checking with the HTTP debugging proxy Fiddler you can see the tunnel to the Azure storage. When clicking f.e. in a later positions in the video you see the range adapting.

image

Video Players

For building apps with a robust video player, Microsoft recommends the Microsoft Media Platform Player Framework from https://playerframework.codeplex.com/.

image84

The Player Framework can be used for Windows 8, HTML5, Silverlight, Windows Phone and other application platforms. You can define playlists and use many more features like localization and so on.

After installing Microsoft.PlayerFramework.vsix you have a bunch of Plugins on your computer, usually located in C:\Program Files (x86)\Microsoft SDKs\Windows\v8.0\ExtensionSDKs\Microsoft.PlayerFramework\1.8.2.2 .

For samples download Microsoft.PlayerFramework.Samples.zip.

image

The basic usage of HTML5 Player Framework can look like this:

So have a look and use it for your own apps with streaming media content and play around.

Creating a basic Windows 8 app with streaming video

For Windows 8 apps you need the Smooth Streaming Client SDK for Windows 8.1. This enables developers to build Windows 8.1 Store applications that consume On-Demand and Live Smooth Streaming content with PlayReady protection.

Find a sample here: PlayReady sample for Windows 8.1 Store apps.

Azure Media Services conclusion

With Azure Media Services it´s simple to upload audio and video files into a Windows Azure storage and to start encoding tasks as well as using the streamed multimedia content.

If you plan to use streaming in your own apps Windows Azure Media Services are right here for you!