Well this blog post serves a few purposes, first it gets me back in to the blogging (don’t worry Nick your post is up next with all the Google AdSense low-down), secondly it serves as an example I offered to do for work and thirdly I get to play with Silverlight + Blend + VS 2010) which is fun :-)

So what are we going to be covering here then? Well the goal was to incorporate the following:

  • playing/controlling video through Silverlight in different formats
  • overlaying text and animated images on the video
  • extracting a list of videos via the WebClient class from the Mix10 site (hope you don’t mind guys, it’s a little more promotion for Mix10 and all the lovely Microsoft Goodies)
  • Parsing the response from the WebClient using Linq to XML
  • Profiling the frame rate for the Silverlight video display
  • embedding the Silverlight content in the blog post.

So with a bit of luck all of this is working.

Ok so lets clear one thing up from the get go shall we. The only part of this page that is Silverlight is that lovely iFrame below containing the Video Player and the list of videos.

As I mentioned the list is sourced from the Mix10 videos which you can find here. The purpose of this blog is not to showcase the videos as such but if you haven’t watched any of them then I would highly recommend doing so.

Playing Video

The first point that we are covering here is the ability to play the videos from Mix10 which are available in WMV, WMV-High and MP4 format. Select your format, select a video and press play and adjust the volume to your liking. All pretty straightforward stuff and easy to implement with a few lines of code.

<MediaElementx:Name="VideoPlayer"Margin="8,-2,8,53"RenderTransformOrigin="0.5,0.5"AutoPlay="False"/>

Overlaying text on the video has been done simply with a TextBlock in this instance. You are free to do what you want with the TextBlock and change the Opacity for instance to get a better effect. The BondiGeek image is just a plain old image with an animation applied to it and looped. If it gets too annoying then click the ‘Hide the Geek’ checkbox on the bottom left.

fps

However, that image (apart from a bit of shameless self promotion) is also there for a reason. If you are reading this blog post in Internet Explorer or Firefox then you should see in the status bar something like this:

Frames Per Second

If you don’t see it in IE then give Firefox a crack. This is a debugging option you can add to the Silverlight plugin with the following snippet.

<paramname="enableFramerateCounter"value="True"/>

This tells us the framerate that is being achieved. The Silverlight plugin supports a target framerate of 60fps which hopefully it can achieve but it depends on your hardware. In my instance if I ‘Hide the Geek’ the fps drops to 30 for WMV format and 15fps for MP4. Show the Geek again and the framerate shoots back up to 60fps so we are achieving the target.

WebClient and Sessions

So the list of sessions available is being extracted via the Silverlight object by doing a call to the Mix10 video page and extracting the list of videos from the table element that contains them. To do this we are using the WebClient to download the page as a string and then using Linq to XML to parse the page and convert the rows in to a class we can bind to the ListBox.

privatevoid LoadVideos() { WebClient web = new WebClient(); web.DownloadProgressChanged += new DownloadProgressChangedEventHandler(webDownloadProgressChanged); web.DownloadStringCompleted += new DownloadStringCompletedEventHandler(webDownloadStringCompleted); web.DownloadStringAsync(new Uri("http://live.visitmix.com/Videos")); }

and the extraction of the videos:

void web_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e) { if (e.Error == null) { string videos = e.Result.ToString().Substring(e.Result.IndexOf("

)); videos = videos.Substring(0, videos.IndexOf("
") + 8); XDocument doc = XDocument.Parse(videos); var sessions = from row in doc.Descendants("tbody").Descendants("tr") select row; foreach (XElement item in sessions) { videoCollection.Add(new Video(item)); } SessionList.ItemsSource = videoCollection; SessionList.SelectedIndex = 0; SetVideo(); } ProgressBar.Visibility = System.Windows.Visibility.Collapsed; DownloadingMessage.Visibility = System.Windows.Visibility.Collapsed; }

So there you have it. All pretty simple really. You can download the complete source code for this project below.

BondiGeek

Source Code [Download](http://www.bondigeek.com/blog/wp-content/uploads/2010/05/MediaPlayer5.zip)