Share and Enjoy !

Switching out the Windows Media Player control used previously with Silverlight has many advantages. For one, using Silverlight adds in greater video capabilities such as support for H.264 encoded media so that our Video Review Page can now support WMV, MP3, MP4, and WMA (see supported formats for more details); but more importantly, we’ve now bridged into SharePoint the realm of client side capabilities provided by custom app dev in Silverlight. Another important advantage is that we have now provided in support for our Mac users.

Below walks through a simple POC; next steps can include deep customizations to the Silverlight control and also packaging and deployment of the solution.

If you are new to Silverlight, the Get Started page at http://silverlight.net is a great place to begin. The site will guide you through overview, installation, and some great tutorials.

You will need to have installed the following in order to follow along:

To begin, we need to create the Silverlight video player binary (xap).

Fire up Visual Studio and create a new Silverlight project…

Visual Studio will create the Silverlight project for you as well as create an asp.net project which will host your Silverlight control for testing.

Once the project has been created, you will need to add a reference to the MediaPlayer assembly provided by Expression Encoder. The assembly can be found at C:\Program Files\Microsoft Expression\Encoder 3\BlendMediaPlayer\MediaPlayer.dll.

Next, open the MainPage.xaml and add a namespace reference for the Expression MediaPlayer assembly and add an instance of the Media Player to the page.

Now, open the code behind for App.xaml. We need to add code to the application startup handler to store the “InitParams” for use later. The InitParams are used to send parameters into our Silverlight application from the object tag on the SharePoint page (shown later).

Next, we need to open the code for Main.xaml and consume the parameters which were stored at application startup. Notice we are using “mediaUrl”. We will see that parameter name included in the object tag further below.

Rebuild your project. Assuming all is well, open the test htm file which has been created for you and add in the “initParams” parameter to the object tag. Include a link to your favorite video file. One note, the file must be retrieved via http or a streaming server. You cannot use a file share or local path.

You should now be able to right-click on the html file and choose View in Browser to test your creation.

Assuming all is well, we are ready to update our item edit form to include the new object tag. Here is where you may want to review my previous post Video Review via the DataFormWebPart.

Open EditFormWithVideo.aspx and replace the existing object tag code with the object code from the html test page in your Silverlight project.

You will need to make the following changes:

  • Remove the onError parameter (this is POC fun, we are not expecting any errors
    • Kidding aside, you can copy over the error handling script as well and then leave the onError tag as is
  • Add a forward-slash to the front of ClientBin so that the xap will be loaded from a web application relative path
  • Replace the path to your video file with the URL from the list item (see syntax in the snap below

The final step is to deploy the xap file over to SharePoint.

To do this, navigate on the file system to the folder used by the SharePoint web application (e.g. C:\inetpub\wwwroot\wss\VirtualDirectories\80) and create a ClientBin folder. Copy the xap file created by the Visual Studio project, found in a folder called ClientBin beneath the test web application, over to the ClientBin folder you have just created. Last, you will need to modify the Execute Permissions for the ClientBin folder to Scripts Only.

You should now be ready to roll! Your Video Review Page now supports more video formats and can be more deeply customized thanks to Silverlight (and the workhorse, DataFormWebPart).

Cheers!

Share and Enjoy !

Related Content: