Click here to Skip to main content
Click here to Skip to main content
Go to top

Silverlight Media Player

, 6 Apr 2009
Rate this:
Please Sign up or sign in to vote.
Has some cool features like sliding menus with animation and Drag N Drop from menu

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 Smile | :) )

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.

MediaPlayer2.jpg

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

  • 4th April, 2009: Initial version

License

This article, along with any associated source code and files, is licensed under A Public Domain dedication

Share

About the Author

sunit_82
Software Developer (Senior) Geometric
India India
B.E. in Information Technology
MCTS(.NET 2.0 )

Comments and Discussions

 
QuestionDataAccess.cs to adapt the class to receive data from a Database PinmemberLuizItatiba3-Jun-09 8:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140916.1 | Last Updated 6 Apr 2009
Article Copyright 2009 by sunit_82
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid