How to use Azure as a CDN for an embedded video in an MVC website

One of the things I did to improve the performance of my http://howcanidecide.com website, was to move the demo video on the home page to Azure.

Why host large files on Azure?

Moving the video to Azure did a couple things to improve performance.

First, most browsers only open a limited number of connections to a website. If you have dozens of CSS, JavaScript, and images files that need to download for a page to be complete, the browser will only get a few at a time. By having the video on a separate domain, the user’s browser will start downloading it earlier.

Second, Azure has BLOB storage for large binary files (video, audio, PDF files, etc.) you can use as a CDN (Content Delivery Network). You can host the files in several regions, and your users will get them from whatever region is closest to them.

How to host large files on Azure’s BLOB storage

Microsoft has a good tutorial here (http://www.windowsazure.com/en-us/develop/net/how-to-guides/blob-storage/) on how to use Azure’s BLOB storage, but it is missing a couple of things.

That page only shows you how to upload images to the BLOB storage within your application. It doesn’t show you how to modify any of the HTTP headers, like Cache-Control, which you’d really want to do for many files you’re hosting on a CDN.

Fortunately, I found two good (and free) tools to upload and manage files in your Azure storage.

The first is Azure Storage Explorer, available on CodePlex. The second is CloudBerry Explorer, from CloudBerry Lab.

While I like the look of Azure Storage Explorer, I ended up using CloudBerry Explorer. They can both upload file fine, but CloudBerry Explorer let me set the HTTP headers easily.

Once you’ve uploaded your files, you can set the Cache-Control on your files by right-clicking on the file, and selecting “Set HTTP Headers”. A popup will appear with a list of the current HTTP header values. You can add a new one (I created “Cache-Control” with a value of “public, max-age=2592000”).

You’ll also want to set the “Content-Type” value to the correct MIME type. If you don’t do this for videos, the browser won’t attempt to display the video player. The same with images, PDF files, etc. Without the correct content type, your user’s browser won’t know if it can handle it any special way.

Embedding the Azure-hosted video in my MVC 4 view

Once the file was on the Azure servers, it was simple to add it into my MVC view – once I found http://www.videojs.com/.

The people from this site have a CSS file and a JavaScript file you can include to make embedding videos very easy. You can download the file yourself, or just reference them on their CDN.

To embed a video, your view needs to include a link to their CSS and JavaScript files (here, I’m showing it using their CDN).

Then, wherever you want to embed your video, include a section of HTML like this:

You can set the “width” and “height” attributes to whatever is appropriate for your video. The “poster” attribute is the name of the image file you want to display before the user clicks on the button to play the video. In this case, I’m hosting the image locally, since it’s not that big, and I already have my site behind CloudFlare’s CDN. Then, you just need the URL to the video in your Azure storage. It will look like what I have here, except with your values in place of “YourAzureAccount”, “YourContainer”, and “YourVideo”.

Summary

It’s not much work to host a video on Azure and gain the advantages of having it in their CDN (faster load time for your users, and lower bandwidth usage on your app server).

You can try out Azure for three months here. If it isn’t the appropriate choice for you, look at what Amazon has to offer here.