Walkthrough for SharePoint Server 2010 (ECM): Creating a Video Site

Applies to: SharePoint Server 2010

In this article
Content Structure
Custom Video Display Form
Hidden Data Form Web Part
Column Availability and the Hidden Data Form Web Part

To create a social media sharing site and associated experiences such as video upload, thumbnail image extraction, a home page that is optimized for video display and video content management, and aggregation tools such as channels for large video libraries, you must first create a basic site for video. Creating a basic video site includes five basic steps:

1. Set up a content structure that supports the video content type.

2. Create a customized form for displaying videos.

3. Create a hidden DataFormWebPart and use it to get media parameters.

4. Create the media player.

5. Use the ECMAScript (JavaScript, JScript) object model to access the MediaWebPart object.

Additionally, you can add features to the basic site that support common tasks associated with video content, including rating videos, commenting, browsing related videos, viewing the media properties associated with the current video, and more.

Prerequisites

Microsoft Visual Studio 2010 and expertise with the following SharePoint-related technologies are required to complete the walkthrough:

• Microsoft SharePoint Designer 2010

• Basic HTML

• Basic JavaScript programming

• Microsoft Silverlight development

• Basic XML and XSL

Content Structure

To prepare to create the video site, first use SharePoint Designer 2010 or the Microsoft SharePoint Server 2010 browser user interface (UI) to set up a content structure. The content structure defines what features are available at the site level and at the site-collection level, the content types that must be enabled, and the columns that you need to add to support video content.

Provision the site collection using the publishing portal site template.

Set up two Asset Type libraries: a Videos library and a Thumbnails library. Include the video content type in the Videos library and remove all of the other content types. Include the image content type in the Thumbnails library and remove all of the other content types. Throughout the series of walkthroughs the Videos library stores video files, and the Thumbnails library stores thumbnail images uploaded to the site.

The basic video site enables standard video functionality, and also supports setting related media properties that are supported by the video content type. You can add ratings, enterprise keywords, bookmarks, support for channel pages, and other properties to the video content type. From the Site Column Gallery, add the columns listed in Table 1 to the Video content type.

Table 1. Site columns to add to the Site Column Gallery

Table 2. Video Content Type Columns

Custom Video Display Form

The first piece of the video sharing site is a customized page used to display videos. Most items on the page, such as Ratings and Bookmarks, are properties that you defined when creating columns for the video content type. You will add the media player in an upcoming step. The page includes the following elements:

1. Media Player

2. Ratings

3. Bookmarks

4. Related Videos

5. Media Properties

6. Media Player text

7. Comments

Creating a New Display Form in SharePoint Designer

1. Start SharePoint Designer 2010, and then open your SharePoint site.

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

3. In the Forms section, click New.

4. In the Create New List Form dialog box, specify the Type of form and whether to Set as default form for the selected type:

   • Type of form: Display Item Form

   • Set as default form for the selected type=Yes

   • Content Type: Video

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

   A new Display Item Form now exists that can be customized. It is the default form that appears when a user clicks the View Properties command for a video.

Hidden Data Form Web Part

Create a hidden DataFormWebPart and use it to get media parameters. Much of the functionality included on the Display Item Form, such as the Media Player and Bookmarks, is provided by JavaScript. The JavaScript object model uses input parameter values that are stored in the columns of the video that is being displayed. To customize the Display Item Form, first add a DataFormWebPart to the page. Once hidden, the Data Form Web Part includes all of the data that is required to enable required JavaScript functions.

Table 3. DataFormWebPart parameters

To add the Data Form Web Part and configure columns and filters

1. Select Display Item Form on the Insert Ribbon, and then select the Videos library from the drop-down menu.

2. Click Add/Remove Columnson the Data View Tools—Options contextual ribbon, and add the fields listed in Table 3 to the Displayed Columns group.

3. Right-click the <img> tag that is currently displayed for the PreviewImageUrl column, and use the Format Item As command to change formatting to Text.

4. Right-click the hyperlink that is displayed for the URL Path column, and then change the Format Item As command to Text.

5. On the Options contextual ribbon, click the Parameters button, and then add a New Parameter called ID in the Data View Parameters section with the following parameters:

   1. Parameter Source: Query String

   2. Query String Variable: ID

   3. Default Value: 1

6. On the Options contextual ribbon, click Filter, and then add the filter criterion: <Field Name:ID>Equals[ID]

The last two steps ensure that the DataFormWebPart always shows metadata vallues for the item that the user is currently viewing.

Column Availability and the Hidden Data Form Web Part

The values in the DataFormWebPart object are not addressable for JavaScript by default. You need to set up each value that is displayed in the DataFormWebPart to be addressable by JavaScript. Setting these values follows a general pattern. To perform this step, you must be able to see the HTML for each page. Therefore, switch to Split view in SharePoint Designer 2010 before you get started.

After you have made DataFormWebPart values addressable by JavaScript, hide the Web part so that it does not appear on the Display Item Form page when the page is viewed. After anchor tags are in place with well-known names for each parameter, you can access any of the values with a single line of JavaScript code.

To make columns available for use by using ECMAScript

1. Start SharePoint Designer 2010, and then switch to Split viewto see the HTML for each page.

2. View the Data Form Web Part.

3. In the code view, find the <xsl:value-of> statement that is used to generate the correct value

   Tip

   For example, the Title field code is <xsl:value-of select="@Title"/>.

4. Enclose the <xsl:value-of> statement with an <a> element, and specify a name attribute for the <a> element (the following code contains an example value): <a name="TitleFieldValue"> <xsl:value-of select="@Title" /></a>.

To hide the Data Form Web Part

1. Find the <WebPartPages:DataFormWebPart> element in the HTML for the Display Item Form page.

2. Surround it with a <div> element with the style="display:none;" attribute.

3. Access any DataFormWebPart object values by using the following line of JavaScript:(document.getElementsByName(‘Title’))[0].innerText;

   Note

   Use the Suggested AnchorName listed in Table 3 instead of Title in the code snippet.

To summarize, in this topic you configured SharePoint Server 2010 as a Publishing site with ratings enabled, created two asset type libraries (to store video files and thumbnail image files), specified the video content type and defined media properties available to it, created a Display Item Form to show the media parameters and Media Player, added a DataFormWebPart object that uses input parameter values that are stored in the columns of the video that is being displayed, made the values of the DataFormWebPart object accessible to the JavaScript object model, and hidden the DataFormWebPart object so that it is not visible to users who view the Display Item Form, which serves as the basic display for your video site.

In the next walkthrough, learn how to add the MediaWebPart object to the Display Item Form that is used to display videos, display media properties on the form, and how to populate other media parameters of the video content type, such as ratings, related videos, and comments, with data.

Next Steps

Walkthrough for SharePoint Server 2010 (ECM): Adding the MediaWebPart and Video Site Features to a Video Sharing Site

See Also

Concepts

Managing Rich Media Assets in SharePoint Server 2010 (ECM)

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

Rich Media Programming Model in SharePoint Server 2010 (ECM)