Geeks With Blogs

Steve Clements .Net and then some....

Silverlight makes working with videos pretty straight forward, Microsoft makes Silverlight pretty straight forward with and sharepoint is written in, so match made in tech heaven!!

I wanted a video player web part for sharepoint, that had some simple functionality like play, pause and volume.  I started with expression encoder which output a nice media player interface...this is OK, but has a couple of restrictions; 1, its far to rich for what I wanted, animations all over the place and 2, its JavaScript with Silverlight 1.  So, using blend I opened one of the exported files to rip out a few features of the player.

Play / Pause button, volume control and some associated storyboards for some nice animations... visible = true; visible = false is so last year!!!

I copied the xaml into my own Silverlight 2 app, that already had the media player element.  A little positioning in blend and we're off.  Right that's far too much waffle lets get to it!


I wont paste the xaml here as it basically only a media element, the play/pause button and volume control copied from Expression Encoder. OK, well maybe a little...

<MediaElement HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="MediaMain" VerticalAlignment="Stretch" Source="" Stretch="Fill" AutoPlay="False"/>

What I did add was handlers for all of the events e.g. Play, pause, volume (actually all the code to do the slider) and hide/show events for the play button.  More on that in a mo.

Of course for this to be a web part, the movie file at least has to be a variable that's changeable in the properties of the web part.  To do this I am going to use Silverlight's InitParams property.  Its worth mentioning that the movies are nothing to do with me...they are going to live in a sharepoint library, they are encoded into wmv format using another app.

In the App.xaml file within your Silverlight project you will find an OnStartUp method, this is where I handle the InitParams.

        private void OnStartup(object sender, StartupEventArgs e) 
            this.VideoUrl = string.Empty;

            if (e.InitParams["videoUrl"] != null) {
                this.VideoUrl = e.InitParams["videoUrl"];
            if (e.InitParams["AutoPlay"] != null) {
                this.AutoPlay = Convert.ToBoolean(e.InitParams["AutoPlay"]);
            else {
                this.AutoPlay = false;
            if (e.InitParams["Loop"] != null) {
                this.Loop = Convert.ToBoolean(e.InitParams["Loop"]);
            else {
                this.Loop = false;

            // Load the main control here
            this.RootVisual = new Page();

As you can see I am expecting 3 params and set class level properties for later use. AutoPlay(play the video on page load) and Loop play(to obvious to describe!!), VideoUrl (the url of the video to show).

public string VideoUrl { get; private set; }
public bool AutoPlay { get; private set; }
public bool Loop { get; private set; }

In the Silverlight class (Page) constructor I get the values like this...

        App currApp;

        public Page()
            // Required to initialize variables

            currApp = Application.Current as App;

            VideoMain.Source = new Uri(currApp.VideoUrl);

            VideoMain.AutoPlay = currApp.AutoPlay;
            if (currApp.AutoPlay) {
                ControlsPlayPause.Opacity = 0;
                PlaySymbol.Opacity = 0;
                PauseSymbol.Opacity = 1;

Here you can see I get the current application, cast it as App (insert whatever the name of your own application class is...App is default) and access the properties.  I am setting the source of the video and deciding whether to play or not, setting the UI to suit.

I have a couple of handlers on the UserControl to show the play/pause button.  Basically when the mouse hovers over the control show the button (begin the StoryBoard that animates it in)

        private void UserControl_MouseEnter(object sender, MouseEventArgs e)
            if (ControlsPlayPause.Opacity < 1)

        private void UserControl_MouseLeave(object sender, MouseEventArgs e)

In the top one, I check for opacity, as you can see in the class constructor if the video is not set to AutoPlay I show the play button.

I don't use this, but for reference this is what the markup would look like to use this Silverlight app.

    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width="100%" height="100%">
            <param name="source" value="ClientBin/VideoViewer.xap"/>
            <param name="background" value="white" />
            <param name="initParams" value="videoUrl=http://mossinstance/site/library/movie.wmv,AutoPlay=true,Loop=false" />
            <a href="http://Silverlight.2.0.exe" style="text-decoration: none;">
                 <img src="" alt="Get Microsoft Silverlight" style="border-style: none"/>
        <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>


Now onto the web part.  I am going to have the Silverlight app on the Sharepoint server, there are obviously several ways, one that appeals to me most is have a sharepoint library for your Silverlight apps, or it could be as simply as creating a ClientBin folder at the route of the site.  Don't forget you need to set the MIME type up for Silverlight.

The web part itself is pretty simple, all I need is 3 properties, create the Silverlight control and set the InitParams.

I do have a custom "NotInstalled" template, but you don't need that.  I didn't want users to have to download the installer from the web, so I have put it on the network. You will also see I have set the source of the Silverlight control to a ClientBin folder at the root of the site.

Another point to note(!) I have put the dll System.Web.Silverlight in the GAC, there are arguments for and against, I prefer the GAC.

Now install your web part in whatever method you prefer...


Some pages/sites/articles that helped.

I have literally just found this on codeplex, it's a Silverlight 1.0 video player web part for Sharepoint.  Would have been no good for me as I have no interest in Silverlight 1.0, but you might!!


Posted on Tuesday, August 26, 2008 4:45 PM Silverlight , .NET 3.5 , , Sharepoint | Back to top

Comments on this post: Sharepoint | Silverlight video player web part

# re: Sharepoint | Silverlight video player web part
Requesting Gravatar...
Hi Steve,
Great work. Would it be possible to put source code of your example?

Left by Piyush Shah on Sep 08, 2008 10:09 PM

# re: Sharepoint | Silverlight video player web part
Requesting Gravatar...
Thx Piyush, want source did you want?
Left by Steve Clements on Sep 09, 2008 2:51 PM

# re: Sharepoint | Silverlight video player web part
Requesting Gravatar...
Steve I am working on a Silverlight Web part right now: I would love to see your source code for the web part. The tie in from SL to SharePoint!
Left by David Jacobus on Dec 29, 2008 7:42 PM

# re: Sharepoint | Silverlight video player web part
Requesting Gravatar...
step by step on how to use integrate silverlight into sharepoint.
Left by jessie on Sep 11, 2009 12:27 AM

# re: Sharepoint | Silverlight video player web part
Requesting Gravatar...
Great work

we have another media webpart @
Left by thesharepointmarket on Nov 09, 2010 4:43 PM

# re: Sharepoint | Silverlight video player web part
Requesting Gravatar...
Hi Steve, this is really sweet. Ive been looking for a silverlight player just like this, needed to be able to autoplay as well as pass multiple URls as Id like to build a video gallery page. Is there any chance I could get the .xap file from you? :P Pretty please...
Left by phil on Aug 03, 2011 8:58 AM

Your comment:
 (will show your gravatar)

Copyright © Steve Clements | Powered by: