Walkthrough for SharePoint Server 2010 (ECM): Creating a Video Site
Published: May 2010
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:
Set up a content structure that supports the video content type.
Create a customized form for displaying videos.
Create a hidden DataFormWebPart and use it to get media parameters.
Create the media player.
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.
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.
When updating content types, use the Site Content Types Gallery to make changes. Making changes in the Site Content Types Gallery facilitates adding future libraries with consistent content types. Avoid updating content types in individual content libraries.
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.
Add a video to the Videos library in order to create an <img> tag that is available to click when you add the Data Form Web Part later and configure columns and filters.
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.
Column Type and Relevant Settings
Multiple lines of text. Type==(“Plain Text”; Allow Unlimited Length in Document Libraries==”Yes”)
Lookup (Get information from: “Pages” library, “Title” column, “Allow Multiple Values”==No)
For users to rate content on the display form
For related videos on the display form
Column Type and Relevant Settings
Bookmarks. This field will contain the data required to display bookmarks in longer videos.
Lookup (Source: “Pages” library, “Title” column, “Allow Multiple Values”==No)
Channel pages. This field is used to indicate in which channel a video should appear.
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:
Media Player text
Creating a New Display Form in SharePoint Designer
Start SharePoint Designer 2010, and then open your SharePoint site.
In the left navigation pane, click Lists and Libraries, and then select the Videos library.
In the Forms section, click New.
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
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.
XSL Name in the Data Form Web Part
Suggested Anchor Name
To add the Data Form Web Part and configure columns and filters
Select Display Item Form on the Insert Ribbon, and then select the Videos library from the drop-down menu.
Click Add/Remove Columnson the Data View Tools—Options contextual ribbon, and add the fields listed in Table 3 to the Displayed Columns group.
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.
Right-click the hyperlink that is displayed for the URL Path column, and then change the Format Item As command to Text.
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:
Parameter Source: Query String
Query String Variable: ID
Default Value: 1
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.
To make columns available for use by using ECMAScript
Start SharePoint Designer 2010, and then switch to Split viewto see the HTML for each page.
View the Data Form Web Part.
In the code view, find the <xsl:value-of> statement that is used to generate the correct value
For example, the Title field code is <xsl:value-of select=”@Title”/>.
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
Find the <WebPartPages:DataFormWebPart> element in the HTML for the Display Item Form page.
Surround it with a <div> element with the style="display:none;" attribute.
Use the Suggested AnchorName listed in Table 3 instead of Title in the code snippet.
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.