How can I host and embed a video in an MVC application on Azure?

Question

I have created a basic application and uploaded to Azure. I want to embed videos, so that a user can make a selection from a list and see a video for each one; like choosing a

Answer 1

Have your model return paths like "~/Videos/myvideo.mp4" and then in the view, use @Url.Content(Model.VideoUrl).

As far as if the videos got deployed, first check your solution and check that the Compile property on each video is set to "Content". This will ensure they get deployed with the package. To verify, you should be able to browse to http://mywebsite.azurewebsites.net/Videos/myvideo.mp4. Also, if this is a Cloud Service, you can enable remote access and RDP into the instance to verify the files got deployed. They'll be on E: or F: under \sitesroot\0\videos.

Answer 2

You might be better off putting the video in Azure Blob Storage. One of the problems you're going to have is that every time someone streams your video, it'll count against your Azure Website's outgoing traffic, which is limited to 165MB a day.

If you store the video in Azure Blob Storage, it'll be faster and scale better because you can take advantage of the Azure CDN, without incurring all the traffic to your site. Note that you still have to pay Azure Blob Storage costs, but it's probably the much cheaper route.

It also means you don't have to keep huge media files in your project, which I can't imagine is great for source control or deployments.

There's tutorials on how to do smooth streaming with Silverlight and how to get HTML5 video to work. One important note, make sure you set the Content Type when you store the files, otherwise they will just download and not stream.

Example using HTML5 VideoJS (which should also work with your flash player above):

1. Create a blob storage account in the Azure Portal
2. Upload your video. Either through code, or using Azure Storage Explorer. Make sure you set the Content Type of the file "video/mp4"
3. Add the VideoJS css and script files, and create a <video> element pointing to your Blob storage file

Code:

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
<video class="video-js vjs-default-skin" controls
       preload="auto" width="640" height="480"
       data-setup="{}">
    <source src="http://storageaccount.blob.core.windows.net/yourvideo.mp4" type='video/mp4'>
</video>

One of the other advantages to using Blob Storage is the use of Shared Access Signatures. These let you keep blobs private, and then generate signed URL's that are only valid for a specified time period. This way, users of your application can view the videos, and if they copy the URL to try and redistribute, it'll expire and be useless. This does not stop them from downloading and distributing, and isn't a form of DRM though.