Walkthrough for SharePoint Server 2010 (ECM): Customizing the Video Upload Experience for a Video Sharing Site

Applies to: SharePoint Server 2010

In this article
Upload Page and Media Web Part
Hidden Silverlight Control
MediaTest.aspx Test Page
<object> Tag and extractionControl
Set Thumbnail Button
PreviewImageURL, Frame Width, and Frame Height Fields

This topic is part three of a five part series of walkthroughs that teach you how to create and customize a video sharing site.

Now that you have created a display form that enables users to view videos, you are ready to customize the experience for uploading a video. This walkthrough demonstrates how to implement controls that are used to automatically extract a thumbnail image for videos. This is a more efficient implementation of upload than that provided by default in Microsoft SharePoint Server 2010, which requires users to manually provide the URL to the thumbnail image of a video.

This walkthrough covers three tasks:

1. Create an Edit Item Form page and add a MediaWebPart object to it. The customizable form is the upload page and is the same form that users see when they click View Properties on a video.

2. Add a hidden Microsoft Silverlight control to the page. Adding a hidden Microsoft Silverlight application converts the thumbnail image from the MediaWebPart object to an appropriate image format.

3. Use ECMAScript (JavaScript, JScript) to add a Set Thumbnail button. When a user clicks Set Thumbnail, the JavaScript object model for the MediaWebPart object captures the appropriate frame, calls the Silverlight application on the page to store the thumbnail image in the Thumbnails library, sets the URL for the thumbnail image automatically for the video, and hides the PreviewImageUrl field from view on the form.

Prerequisites

Complete the Walkthrough for SharePoint Server 2010 (ECM): Creating a Video Site topic.

Upload Page and Media Web Part

As described in Walkthrough for SharePoint Server 2010 (ECM): Creating a Video Site, use Microsoft SharePoint Designer 2010 to create a Edit Item Form in the Videos library and add the MediaWebPart object to it.

To create an Edit form by using SharePoint Designer

1. Start Microsoft SharePoint Designer 2010, and then navigate to your SharePoint site.

2. In the left Navigation pane, click Lists and Libraries, and then select the Videos library.

3. Click New to open the Create New List Form dialog box.

4. In the Create New List Form dialog box, specify settings as shown in Table 1.

   Table 1. Create New List Form dialog box settings

   Setting	Value
   Type of form	Edit Item Form
   Set as default form for the selected type	Yes
   Content Type to use	Video

5. In the Forms section, right-click the newly created form, and then select Edit File In Advanced Mode.

A new display form appears that you can customize. It is the default form that users see when they click View Properties for a video. The Title field and the PreviewImageURL field are likely to be blank for newly uploaded videos.

Hidden Silverlight Control

The custom Silverlight control manages the extraction and upload of thumbnail image files from the current frame of the MediaWebPart object. At a high level, the code exposes a single JavaScript method that gets and sets parameters that are used during conversion and upload, and returns the file name of each uploaded thumbnail image. The code adds random padding characters to the file name to improve the chances of a successful image extraction.

/* convertAndUploadThumbnail: Parameters:
         *  - sImageAsEncodedBitmap: The bitmap generated by the media player.
         *  - nWidth: The width of the thumbnail image.
         *  - nHeight: The height of the thumbnail image.
         *  - sFileNameToUse: The name of the file to use (without the file extension) 
         *  - sWebUrl: The URL of the Web to which the thumnbnail image should be uploaded.
         *  - sServerRelativeListUrl: The server-relative URL of the list where the thumbnail should be uploaded.
         *  Returns: 
         *  The file name of the uploaded thumbnail, constructed by adding a random character to
         *  sFileNameToUse and appending the file extension.
         *  (This is not the full URL; this is only the name of the leaf.)
         */

The core logic of the custom control resides in the MainPage.xaml.cs file. The code converts the thumbnail image provided by the MediaWebPart object to the .jpg file format. It uses the SharePoint Client-Side Object Model to upload the .jpg file to the specified location.

The key file generated by the Visual Studio 2010 project is a single file, ExtractThumbnail.xap, which contains the executable. To deploy the .xap file, upload it to your site’s Style Library.

To upload the XAP file to the Style Library

1. Navigate to your SharePoint site, and then open any page.

2. Click All Site Content, and then click Style Library.

3. On the Documents tab, click Upload Document to upload the .xap file.

4. Publish the .xap file, and approve it as a major version so that all users can access it.

MediaTest.aspx Test Page

The Visual Studio 2010 project includes the MediaTest.aspx test page, which you can use to test the application by itself on one page. After you upload the .xap file that is generated by the project (to the URL that is specified on the MediaTest.aspx page), upload the page to any SharePoint document library, and then browse to it.

<object> Tag and extractionControl

To make the Silverlight application available on the upload page, use SharePoint Designer 2010 to add an <object> tag that loads the application and wraps it in a <div> statement with a well-known ID, such as extractionControl. Replace the URL value for the source parameter with the URL that points to the .xap file that you previously uploaded.

<div id="extractionControl">
//The user sets the width and height. For debugging purposes, the control displays text stating whether
//the upload succeeded or failed. To suppress debugging messages, set the width and height to very small 
// values.
// <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="30px" id="ExtractControlSilverlight">
  <param name="source" value="http://<server>/Style%20Library/ExtractThumbnail.xap"/>
  <param name="onError" value="onSilverlightError" />
  <param name="background" value="white" />
  <param name="minRuntimeVersion" value="3.0.40624.0" />
  <param name="autoUpgrade" value="true" /> 
// Markup is emitted if the user does not have Silverlight installed. The HTML renders an image link 
// suggesting that they download Silverlight.
  <a href="https://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration:none">
   <img src="https://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
  </a>
    </object>
</div>

Gaining programmatic access to the Silverlight Extraction control resembles gaining access to the MediaWebPart object, as described in Walkthrough for SharePoint Server 2010 (ECM): Creating a Video Site—you obtain the ability to access it from the upload page. Insert a JavaScript function on your page to get the Silverlight Extraction control as a JavaScript object.

function getExtractorControl() 
{
var control = document.getElementById("extractionControl").childNodes[0];
return control.Content.MainPage;
}

Set Thumbnail Button

Add the button element to the page by adding JavaScript code, preferably near media player code: <input onclick="captureThumbnailAndSetMetadata();" type="button" value="Set Thumbnail"/>

The JavaScript button behind this button extracts parameters for use by the Silverlight control.

Table 2. ECMAScript button parameters

After the Silverlight control has uploaded the thumbnail control, the JavaScript code uses data set to the property values specified in Table 3.

Table 3. Property value data

To populate the fields in Table 3 with values returned by code, the JavaScript function programmatically loops through all of the input fields that are contained in the form and fills in the correct value when it finds the appropriate field.

function captureThumbnailAndSetMetadata()
{
//Get the media player and extraction control.
var mediaPlayerObj = getMediaPlayer();
var slExtractorControl = getExtractorControl();

//Get the natural height and width of the video from the object model for the media player.
var nHeight = mediaPlayerObj.NaturalVideoHeight;
var nWidth = mediaPlayerObj.NaturalVideoWidth;

//Calculate the actual height and width of the thumbnail image based on the natural versus current aspect ratio.
var naturalAspectRatio = nWidth/nHeight;

var originalHeight = 225;  //This value must match the height of the media player on the page.
var originalWidth = 300; //This value must match the width of the media player on the page.
var originalAspectRatio = originalWidth/originalHeight;

var thumbnailWidth;
var thumbnailHeight;

if (originalAspectRatio > naturalAspectRatio)
{
thumbnailHeight = originalHeight;
thumbnailWidth = originalHeight * naturalAspectRatio;
}
else
{
thumbnailWidth = originalWidth;
thumbnailHeight = thumbnailWidth/naturalAspectRatio-1; 
}
//Finished computing the thumbnail height and width.

//Get the current frame from the media player.
var sThumbnail = mediaPlayerObj.CaptureCurrentFrame();

//Get the file name to start with from the media player.
var sFileName = (document.getElementsByName('mediaTitle'))[0].innerText;

//Calls the Extractor Control, which returns the file name of the actual thumbnail.
//Replace <server> with the name of your server and update folder parameters as needed.
var sThumbnailFileName = slExtractorControl.convertAndUploadThumbnail(sThumbnail, thumbnailWidth, thumbnailHeight, sFileName, "http://<server>/", "/Video Thumbnails");
//Begin setting the relevant metadata.
var sThumbnailUrl = "http://<server>/Video Thumbnails/"+sThumbnailFileName;

//Get the input fields in a single array to set the URL.
var sInputFields = document.getElementsByTagName('input');

//Loop through all the input fields and look for the fields we want to set.
var i;
for (i=0; i<(sInputFields.length);i++)
{
//Indicates that the preview image URL is found.
if (sInputFields[i].title == 'Preview Image URL')
{
sInputFields[i].value=sThumbnailUrl; 
}

//Indicates that the frame width is found.
if (sInputFields[i].title == 'Frame Width')
{
sInputFields[i].value=thumbnailWidth;
}

// Indicates that the frame height is found.
if (sInputFields[i].title == 'Frame Height')
{
sInputFields[i].value=thumbnailHeight;
}
} 
}

PreviewImageURL, Frame Width, and Frame Height Fields

Hide the PreviewImageUrl, Frame Width, and Frame Height fields from the UI so that users do not try to manually enter or change their values. To hide the fields, use the Design View in Microsoft SharePoint Designer 2010 to find the relevant <tr> elements for each of the table rows that contain those fields, and set their style attribute: style=display:none. This setting prevents fields from being displayed to the user, but leaves the fields on the page where they can be set by using the ecmascriptshort object model.

Next Steps

Walkthrough for SharePoint Server 2010 (ECM): Creating a Customized Home Page and Content By Query Web Part XSL for a Video Sharing Site

See Also

Tasks

How to: Configure the MediaWebPart Object Using JavaScript (ECM)

Concepts

Walkthroughs for SharePoint Server 2010 (ECM): Creating and Customizing a Video Sharing Site

Rich Media Programming Model in SharePoint Server 2010 (ECM)