Archives

Archives / 2008 / August
  • Sharepoint | Silverlight video player web part

    Tags: .NET 3.5, ASP.net, SharePoint, Silverlight

    Silverlight makes working with videos pretty straight forward, Microsoft makes Silverlight pretty straight forward with ASP.net and sharepoint is written in ASP.net, 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!

    image

    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
                InitializeComponent();
    
                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)
                    PlayPause_Show.Begin();
            }
    
            private void UserControl_MouseLeave(object sender, MouseEventArgs e)
            {
                PlayPause_Hide.Begin();
            }

    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="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
                </a>
            </object>
            <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
        </div>

    -----------------------------------------

    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!!

    more...