Videos should be streamed and not held (part 2)

I couldn’t resist the temptation to try to take my Windows DVD Maker output (a video DVD with a custom menus) and turn it into a streaming Silverlight site.  I figure this would be of interest to anyone who wants to share their home videos on the internet and include a custom DVD-esque presentation format.

Alas, I didn’t have time to create the “general solution” – but I think I’ve figured out what the general solution would look like.

The end result that I wanted was a custom Silverlight 2 application that integrates

• a video streamed behind an interactive menu, and
• a streaming player for the main ‘movies’, which would begin its life as an Expression Media Encoder player template

So the main menu looks like this:

'24 Minutes' Online DVD - Interactive Silverlight Site Menu

And when you’re watching the video, you can move the mouse to pop up a UI like this:

'24 Minutes' Online DVD - Silverlight Streaming Movie Player Overlay

When the video comes to a complete stop, it returns to the custom menu (top image above) with the streaming video background.

It was fun. It took some time. Here’s what I learned.

• Video Player template: If you decide you’re going to create a UI for streaming Silverlight video, and want any interactive controls above and beyond a pause button – even just a playback slider – I strongly encourage you to start from a template, such as the ones found in Expression Media Encoder. See this Expression Encoder blog post about the templates. This will save you a lot of time, and the templates themselves are quite nice.
• Re-encoding the DVD files: The files on a DVD with a .VOB extension can be opened and re-encoded by Expression Media Encoder.  This is important because the .VOB that contains your menu background also contains more than just the cycling “main menu” video, so you’ll need to trim it.  It also contains video clips for the “About” and “Select Scene” menus. I wish I understood this video format better.
• Menu text and custom fonts: The menu text in the .VOB looks crummy when it’s been encoded and re-encoded and then scaled up.  So, re-export the DVD from Windows DVD Maker without any menu text, and then overlay the text in Silverlight. Embed a custom font if necessary – Expression Blend 2 makes font embedding possible and not very difficult.

Upload videos and app to Silverlight Streaming, and you’re ready to scale your home videos up to the scale of the intarwebs!

Unfortunately, I do not have permission to host the “24 Minutes” video on this site, even though that would have been very easy to do. When I have a chance, I’ll host a similar project so I can show what the finished results look like in motion.