Silverlight Media Player

• Download source files - 815.89 KB

Introduction

You must have come across a couple of Silverlight media players on the internet. Here are some cool features that I have given in mine:

• Full screen mode
• Vertical sliding menu in normal mode
• Horizontal sliding menu in full screen mode
• Standard control panel
• Drag n Drop play from menu in normal mode

Moreover, I have used basic Silverlight features like animation using storyboards, Silverlight user controls, media element, control transforms, gradient brushes and LINQ for data access. So it's a good example for Silverlight beginners to start with.

NOTE: I have not included the video files with the demo application attached with the article because of large file sizes. But you can use any Silverlight compatible media format files that are given on the MSDN site: Supported Media Formats, Protocols, and Log Fields In case a media file does not have a compatible file format, you would get a JavaScript error in the explorer status bar saying: Sys.InvalidOperationException: MediaError error #3001 in control 'Xaml':AG_E_INVALID_FILE_FORMAT (do not start pulling your hair, try different files :)) You can add your video files in the ClientBin folder of the web application MediaPlayerLive in the attached demo application. And for this demo to work, you would need to have Silverlight 2.0 and Windows media player 10 or above installed your machine. Another common error related to mediaelement control is: Sys.InvalidOperationException: MediaError error #4001 in control 'Xaml':AG_E_NETWORK_ERROR This simply means the control cannot find the source specified.

Inside Look

I have used a simple data.xml file for storing the list of video files.

<videos>
  <video id="0" vid="demo.wmv" img="v1.jpg" >
  <video id="1" vid="demo2.wmv" img="v2.jpg" >
  .
  .
<videos >

The class DataAccess.cs does the fetching operation of data from this file. LINQ queries are used to show specific paged data in the sliding menu.

XDocument xDoc = XDocument.Load("Data.xml");
          var xVids = from v in xDoc.Descendants("Video") where 
          v.Attribute("img").Value.Length>0 && v.Attribute("vid").Value.Length>0
          select new
          {
              img = v.Attribute("img").Value,
              vid = v.Attribute("vid").Value,
              id = v.Attribute("id").Value
          };

I have seen quite a few sliding image gallery controls on the internet, but all were JavaScript based. I've never been a fan of JavaScript myself, so I thought I would write my own user control for those C# lovers. I hope you find it useful considering that I have given an idea of how to make it parameterized for different sizes and count of images shown. I always try to keep some things incomplete in my article for the readers to try out themselves.

This example should be a good sandbox to build your custom features around this standard media player. I would also be posting updates to this player soon.

History

• 4^th April, 2009: Initial version