Partner TV goes Silverlight

image

I promised some changes to Partner TV, the first of which (if you don't count a bit more text explaining the videos) I published last night which is a Silverlight player.  This new enhancement brings cross-browser, cross-platform capability to Partner TV making it more inline with other video sharing websites.  This is just phase one of the masterplan but it's all slotting in place nicely so watch this space for some interesting developments over the coming months :-)

Getting the Silverlight player on the blog needed a little bit of creative thinking on my part, because our blogging platform is a bit limited with regards customisation and my videos are quite large. My solution, which I consider a bit of a workaround because of the blogging platform uses the following:

  1. Expression Media Encoder
  2. Silverlight Streaming for hosting the Silverlight App
  3. Media Streaming powered by Windows Server
  4. Windows Live Writer

Let me explain why I decided upon this concoction of products:

Using Expression Media Encoder

I consider the Expression Media Encoder the runt of the Expression family because it doesn't get the attention it deserves, is often misunderstood but is bloody useful.  You use it to process media files ready for the web (or whatever platform) and get them in a format which is appropriate for your audience.  You can also do bits of final cut editing like including a title video sequence or trimming the footage. 

The other important aspect of Media Encoder is the output format.  If you want to, you can simply output to WMV, but you also have the ability to output a Silverlight app, with all the relevant files required (javascript files, xml files etc.). 

It's also worth mentioning that you can set a preview frame so that before your video starts you can present an image to the user whilst things are being downloaded in the background (good for low bandwidth users).

image image

Throughout each video I ask a few questions and we get onto different topics - and it's at these points I place markers to denote where questions start so that using the video player UI the user can skip to different questions - very much like skipping scenes in a movie.

Silverlight Streaming for hosting the Silverlight App

This is where the first bit of tweaking was required.  When Expression Media Encoder comes out of preview and is actually finished the upload capability to Silverlight Streaming will be seamless and I won't have to do this part.

First thing to do was create an XML manifest file that describes to the Silverlight app which Javascript files are needed to run the video.  I created the manifest file in the same directory that Expression Media Encoder created for me when building the silverlight app for me.

image 

The XML consisted of the following:

<SilverlightApp>
    <loadFunction>StartWithParent</loadFunction>
    <jsOrder>
        <js>MicrosoftAjax.js</js>   
        <js>BasePlayer.js</js>
        <js>player.js</js>
        <js>StartPlayer.js</js>
    </jsOrder>
</SilverlightApp>

Next I needed to make a sneaky little change to one of the javascript files.  Remember that I'm hosting the actual video on another server? Well at the moment everything is set for the video to be hosted by Silverlight streaming, which is not what I want.  I opened up startplayer.js and then changed the file location to my streaming server but this could have been just another web server for example: https://download.microsoft.com/documents/uk/partner/partnertv/PTV-Silverlight.wmv.  There's one more setting which is useful to know (hat-tip to Simon Guest for this one) which is the autoplay property which I wanted to set to false (I don't wall all the vids playing automatically as soon as someone loads the blog!!).  I set this to false, saved the file then moved on to the next step.

I created a zip file (I used WinRAR, but Winzip is also fine) and zipped up all the files.  I was careful - and this is important - to zip the files up without retaining their path information.  This is essential because Silverlight doesn't want to know where on your "c:\blah\blah" the files are it wants them in the root!

Uploading to Silverlight Streaming is a doddle, simply create an account and follow the steps.  You'll be prompted along the way to upload the zip file you created and they hey presto you've got a silverlight app.

Now is the part where I needed to get my blog post to show the silverlight app.  Now because Community Server - our blogging platform - is locked down and non-configurable we have to use an IFRAME html element to render on the blog.  This is a new feature of Silverlight Streaming that I found out via Tim Sneath's blog and then Catherine Heller

Side Note - Tim also makes a great point that this opens up the door for Silverlight apps into Facebook - cool :-)

Using Media Streaming powered by Windows Server

Partner TV videos are very kindly hosted by Microsoft.com/uk which means I've got a nice and stable streaming server with plenty of bandwidth and little chance of dropped connections.  I could have chosen to use Silverlight Streaming but there is a limitation on the size of video that you can upload (currently 22mb) and most of my vids are bigger so this doesn't work.  Now this does present a problem in itself, because I'm hosting the app itself on Silverlight Streaming and the video on Microsoft.com which isn't the default behaviour for a Silverlight Streaming app and requires that I do a bit of XML shenanigans to get it working.

Windows Live Writer

The defacto standard in writing blog posts, Windows Live Writer is simply on of the best products we have create. Fast, small, nimble - I love it.  It is very good at what it does.  Posting the Silverlight video was a doddle and I simply pasted in the IFRAME into the HTML editor and I was away!

You can see the final result here - let me know what you think...

The Future?

I've got some other ideas this thing, including:

  • Branded Partner TV player
  • Links to the right hand side describing the chapter markers
  • Share button which gives you a link to copy into your own blog or email
  • etc

If you've got any ideas then leave me a comment and I'll take a look at your suggestion.

Technorati Tags: Silverlight, Partner TV