SharePoint 2010 Rich Media – Skinning the Media Player and using it as a Page Field on a Publishing Page

Guest Author: Oscar Medina
SharePointAce Consulting Group, LLC

I have been playing with SharePoint 2010 for a while now and have found the enhanced platform quite exciting. One of the areas that I have recently focused on exploring; is the Rich Media capabilities now offered out of the box.

The new platform makes it very easy for anyone to share videos, pictures, music and more. Microsoft certainly has paid close attention to what is happening in the enterprise 2.0 environments and it is no surprise why. According to Gartner, more than 25% of the content that workers see in a day will be dominated by pictures, video or audio.

-Gartner, Inc. “Gartner Predicts that by 2013, More than 25 percent of the Content that Workers See in a Day will be Dominated by Pictures, Video or Audio”
December 10, 2008

The Media Field Control

Although there are several enhancements that allow for sharing rich media on SharePoint 2010, I will focus on the Media Field Control, which is also used on the Media WebPart that allows for sharing media in an ad hoc manner.

Out of the Box Capabilities

• Plays videos from within SharePoint or remote locations
• It is built on Silverlight 3.0 or higher
• You can skin it to change the appearance using Expression Blend 3, since the skin is a XAML file
• It is extensible via the JavaScript Object Model, you can play, pause, change properties etc

Business Scenario – Creating a custom Publishing Page Layout and using the Media Field Control

So, if we have the Media WebPart, why use the Media Field Control? Great question! Here is one scenario, let’s say you are looking to create a Publishing Page Layout for a Press Release on your SharePoint Site. This Publishing Page Layout needs to support the ability for users to insert a video in some cases to make for a rich user experience.

This article will not go into details on creating a Publishing Page Layout and it assumes you have created one. Now let’s get started and embed the Media Field Control on our Publishing Page Layout.

Embedding the Media Field Control on a Publishing Page Layout

1. Open SharePoint Designer 2010
2. Open your Site
3. On the left navigation, click on Page Layouts and double click on your custom page layout
4. On the top left, click on Edit Page in Advanced Mode. This will allow for you to insert the Media Field Control and view the code.


FIGURE 1 – Page Layouts left navigation, custom Page Layout page


In my case, I created aContent Type called SharePointAce Welcome Page,I then edited the Content Type and added a Column of type Media Field. Having that column within my custom Content Type allowed for the SharePoint Designer 2010 to show that column as a Content Field (see figure 2 below)



FIGURE 2– Shows the Page Field of type Media Field


NOTE: The Media Field Control resides within the Microsoft.SharePoint.Publishing.WebControls namespace, so you must ensure the following tag exists on top of your page.

<%@ Register Tagprefix="PublishingWebControls"  Namespace="Microsoft.SharePoint.Publishing.WebControls"  Assembly="Microsoft.SharePoint.Publishing, Version=14.0.0.0,  Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 

5. Once you have the HTML layout you desire, simply place the code belowwhere you desire. Alternatively, you can drag the Media Field Page Field and configure it as you like. Most of the properties can be overridden via the browser screen. It is worth noting, that the PresentationLocked property if set to True, does not allow the user to customizethe style, width, and height of the Media Control.

<PublishingWebControls:MediaFieldControl
   FieldName="Media_x0020_Field"
   runat="server"
   id="MediaFieldControl1"
   DisplayMode="Overlay"
   ErrorMessage="cannot display media field"
   Loop="True"
   PresentationLocked="False"
   TemplateSource=""
   MediaSource="http://localhost:6100/Movies/FighterPilot.wmv" InDesign="True">
  </PublishingWebControls:MediaFieldControl> 

6. Next, open the browser and create a new Page from your custom Publishing Page Layout and add content
7. While in edit mode, click once on the Media Field Control. This will display additional options on the Ribbon.


FIGURE 3– Media Options Ribbon Menu

8. On the Change option, select where your video is located and set it. You can select from your local computer, a web address or from SharePoint itself
9. The Change Image option can be handy when you would like to show a preview image of your video.
10. Next you can give your video a Title and specify if it should automatically start when the page loads, and if you would like for the video to loop until the user stops it.
11. On the Styles option you can specify the appearance or skin to apply to the Media Field Control. The default Style is called AlternateMediaPlayer.xaml The Styles available are located within your Site Collection at the following location: /Style Library/Media Player. You can create your own style or “Skin” to apply to the Media Field Control (See Skinning the Media Field Control later on this article)

    In addition, you can change the Horizontal Size and Vertical Size as well as specify if you would like to lock the Aspect Ratio. This is due to the fact that I myself decided to set the property PresentationLocked to False within my Page Layout.

12. Once you have specified all properties including the media source, put the page in Browse mode. If you indicated to start the video automatically, you should see it play immediately.



FIGURE 4– A Publishing Page with the Media Field Control (default Style)

Skinning the Media Field Control

So, now that we’ve gone through the process of creating a custom Publishing Page Layout with the Media Field Control embedded, you are probably wondering if it is possible to change the appearance of the Media Field Control. It is absolutely possible to control the appearance, and I will show you how.

As I explained earlier, the Media Field Control uses a Skin or Style to render it’s appearance. This Style file can be found within the root Site Collection location (/Style Library/Media Player), under this folder you will find the default Style file which is actually a XAML file. If you have used Microsoft Expression Blend, you would know that it produces XAML and it allows you to edit that in a visual way.

So let’s get started!

1. It is considered Best Practice to always make copies of any out of the box SharePoint files you intend to customize and this case is no exception. So, copy the AlternateMediaPlayer.xaml file to your local machine.
2. Next, open Microsoft Expression Blend (I am using Blend 3)
3. Select File > New Project and use the appropriate project for your scenario
4. Right click on your project and select Add Existing Item, select the XAML file you saved on your computer. I added my file called SharePointAceMediaPlayer.xaml


FIGURE 5– Adding the XAML file by right clicking project, then select Add Existing Item

TIP:When you open the XAML file, you will immediately get an error message that says “The name “SkinableMediaPlayer” does not exist in the namespace “clr-namespace:Microsoft.SharePoint.MediaPlayer;assembly=MediaPlayer” and therefore you cannot see the Design View. To resolve this, you can temporarily while editing remove the following TargetType=”mp:SkinableMediaPlayer” and you should now be able to view the file in design view. You can learn more about mapping namespaces to custom CLR objects at MSDN Great way to potentially use your own Controls within your SharePoint Silverlight Applications!

<ControlTemplate xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:s="clr-namespace:System;assembly=mscorlib"
   xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
   xmlns:mp="clr-namespace:Microsoft.SharePoint.MediaPlayer;assembly=MediaPlayer"
   TargetType="mp:SkinableMediaPlayer">

5. Now that we are able to see the design view, we are going to implement a light branding on the Style to show a company logo at the top.
6. On the Objects and Timeline click on the TitleOverlay item and expand it. Drag the logo right underneath and modify the exact location of your logo. Your screen should look something similar to figure 6 below.


FIGURE 6– Shows the newly added logo in the correct location

7. Click on Code View, and find the Image tag, then change the Source property to a URL to that points to an image on your SharePoint site or elsewhere. I changed it to a URL on my Site Collection. You must specifyan absoluteURL.

   TIP: Ensure that all the customization artifacts are uploaded folderat (/Style Library/Media Player) location. Also, ensure that the PresentationLocked property on your custom Publishing Page Layout is set to False so that users can change the Media Field Control Style via the browser

8. Create a Publishing Page with your custom Publishing Page Layout (or use the one previously created)
9. Place the page in Edit mode, click once on the Media Field Control
10. Select Media Options on the Ribbon and configure the media source as needed
11. Next, under Styles, you should see your custom Style (the filename) on the dropdown, select it and save the page


FIGURE 7– Styles dropdown shows my custom Style (SharePointAceMediaPlayer.xaml)

12. As soon as you apply your custom Style, the Media Field Control will reflect it immediately.


FIGURE 8– Shows the Media Field Control with my custom Style/Skin

Conclusion

There is far more you can do with the Media Field Control, but this should give you a glimpse of just a couple of cool things you can do to enhance the user experience.

Guest Author: Oscar Medina
SharePointAce Consulting Group, LLC

Oscar Medina is a SharePoint Solutions Architect and Managing Partner at SharePointAce Consulting Group, LLC.  He has over 13 years of software development experience. Previously Oscar was a Consultant at Microsoft Consulting Services (MCS) North West Region with a focus on the SharePoint Products and Technologies Platform.