Adding thumbnails to your Video-on-Demand service

Okay, I’ve spent another hour fixing up my last post about building your own VOD service in 4-5 hours using Azure Media Services and Azure Media Player. I were not quite happy with the Q&D playlist I created and I couldn’t let go of the thought how complicated it would be to have Azure Media Services generating thumbnails from the video during the encoding process. It turned out to be pretty simple and I fixed that in a little less than an hour.

Demo VOD Service can be found here http://redbaronamp.azurewebsites.net/

Thumbnails

The web page for my demo VOD service now contain thumbnails on the right, showing what videos are available to view. Creating thumbnails from a video file can easily be done with ffmpeg or other software and I first thought of doing that and storing the JPEGs in blob storage. I turned out that there is a built in support for generating thumbnails from video fils built in to Azure Media Services.

screenshot-2

Thumbnail generation

In the upload-encode-publish C# console program I wrote, I could add the few lines below to generate the JPEG thumbnail

thumbnail-code

The highlighted lines reads an xml config file that specifies how the JPEG should be generated and what the file name of it should be. Then a task is created where the Azure Media Processor is asked to use the xml config on the uploaded and encoded video file and generate a JPEG thumbnail from it.

The xml config file is quite simple and says that I want a Type=Jpeg output with the size of 20% of the actual video taken 5% into the video. If I wanted multiple thumbnails I could have changed Stop not be be the same as where it starts. The Size attribute can also hold a list of sizes so that you get multiple thumbnail sizes of each position it samples. In my case, I’m happy with just one thumbnail jpeg file.

thumbnail-config

Where is the JPEG thumbnail stored and how do I locate it?

Assets are stored in a relationship in Azure Media Services. When you encode the uploaded video into multiple bit rate videos, you actually create multiple copies of the source video and all these assets are linked in a parent-child relationship to the source video (asset). It’s the same when you generate thumbnail(s) from the source video and the JPEG files (assets) also have a parent-child relationship to the source video. So finding the associated thumbnail of a multi bit rate video stream is as simple as looking at its parent asset (the source video) and navigating to other child-assets containing JPEGs.

ParentAsset-chain

Since they are “assets” in the Azure Media Service sense, they get a locator (ie a base url path) when they are published, just like the multi bit rate videos, so getting a publically reachable url to the JPEG is as easy as asking the asset for it’s locator.

What did I do during the extra hour I spent?

I did three things: First I read the MSDN documentation and figured out how easy it was. Second, I added the generate thumbnail functionality to my little C# console program that handles upload-encode-publish. Here I had to make it work on assets (videos) already uploaded. Third and lastly, I added the tiny logic of looking up the JPEG in the web page code so I could get the image url:s for the thumbnails.

What is left if I spend even more time on the VOD service?

Next step would be to start using a database to catalog the videos and start adding metadata about them, such as number of times viewed, information about the context of the video and perhaps even support for comments. To make it more professional, I would probably revert to using SAS signatures so that the player don’t access the video asset directly. That would give me a way to protect the content.

References

MSDN documentation for creating thumbnails – https://msdn.microsoft.com/en-us/library/azure/dn673581.aspx

Source code

Updated version of the source code –  http://data.redbaronofazure.com/public/MediaServices.zip