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

Articolo
07/24/2014

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:

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

Warning

This walkthrough requires knowledge about Silverlight. The Microsoft SharePoint 2010 Software Development Kit (SDK) includes a code sample for a Silverlight solution that performs the functions described here. Example code found inline is included for demonstration purposes only and should not be used directly in production code.

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

Start Microsoft SharePoint Designer 2010, and then navigate to your SharePoint site.
In the left Navigation pane, click Lists and Libraries, and then select the Videos library.
Click New to open the Create New List Form dialog box.
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
In the Forms section, right-click the newly created form, and then select Edit File In Advanced Mode.

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

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.

Important

In the Walkthrough for SharePoint Server 2010 (ECM): Creating a Video Site topic, see the Hidden Data Form Web Part section to learn more about getting the URL path to the video and creating the MediaWebPart object for the upload video page. Repeat the steps from Adding a Media Web Part procedure to add a media player to the Edit form.

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.)
         */

Tip

Find the complete Silverlight thumbnail image extractor code sample in the C:\Program Files\Microsoft SDKs\SharePoint 2010\Microsoft SDKs\SharePoint 2010\Samples folder of the downloaded SharePoint 2010 SDK.

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

Navigate to your SharePoint site, and then open any page.
Click All Site Content, and then click Style Library.
On the Documents tab, click Upload Document to upload the .xap file.
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

Parameter	Extraction and Calculation Method
Thumbnail	Extracted from the MediaWebPart object by using the CaptureCurrentFrame method in JavaScript.
Thumbnail height and width	Calculating the correct height and width is a two-step process. The MediaWebPart object size does not always equal the size of the thumbail image that is returned, because its rectangle may have a different aspect ratio than the video. Calculate the correct height and width by first computing the natural aspect ratio of the video displayed in the MediaWebPart object by using the NaturalVideoWidth property and NaturalVideoHeight properties of the thumbail image. Next, based on the natural aspect ratio, calculate the size of the thumbail image that is returned. Depending on the aspect ratio, the size will be the full width of the player and a shorter height, or the full height of the player and a shorter width.
File name to use for the thumbnail image	You can set this value to any text string. For example, consider setting it to the Title value used in the MediaWebPart object. Or, consider setting it to a random string that is computed by JavaScript.
URL of the server	This parameter is hard-coded to the current server name (represented by <server> in code examples).
Server-relative URL of the document library to store the thumbnails	This parameter is hard-coded to the /Thumbnails URL that is based on the name of the thumbnails library that you specified earlier.

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

Field Name	Definition
Preview Image URL	The URL based on the file name that is returned from the Silverlight control.
Frame Width	Width of the video, as calculated earlier.
Frame Height	Height of the video, as calculated earlier.

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

Condividi tramite