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

Article
07/24/2014

Applies to: SharePoint Server 2010

In this article
Media Player
Embed Text
Bookmarks
Media Properties and Ratings Control
Comments and the Noteboard Web Part
Related Videos

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

Prerequisites

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

Media Player

Create a reference on the page where the media player will appear, add a reference to the media player object model to the page to create the media player in the specified <div> tag, and then add inline ECMAScript (JavaScript, JScript) code in the page where you want the media player to appear.

To add a media player to the Display Item Form page

Start Microsoft SharePoint Designer 2010, and then open the Display Item Form that you created in Walkthrough for SharePoint Server 2010 (ECM): Creating a Video Site in Split view.
Create a <div> reference on the page where you want the MediaWebPart object to appear.

Tip

For example, to create a <div> tag with an ID of MediaPlayerHost, add <div id="MediaPlayerHost"></div> to the page.
Add a reference to the mediaplayer.jsJavaScript object model on the page to import the functions to work with the media player. For example, <script type="text/javascript" src="/_layouts/mediaplayer.js"/>.

Add inline JavaScript code to the page where you want the MediaWebPart object to appear.

//Get relevant parameters from the Data Form Web Part. 
var mediaTitleValue = (document.getElementsByName('TitleFieldValue'))[0].innerText;
var mediaUrlValue = (document.getElementsByName('UrlFieldValue'))[0].innerText;
var previewImageUrlValue = (document.getElementsByName('PreviewImageUrlFieldValue'))[0].innerText; 

//Create the media player.
mediaPlayer.createMediaPlayer(
document.getElementById('MediaPlayerHost'), //The <div> tag into which to insert the Silverlight object.
'MediaPlayerHost', // The ID attribute to assign to the "Object" element that will be inserted on the page and used to access the media player later.
'600px', // The width of the media player.
'450px', // The height of the media player.
    { // Parameters passed to the media player.
             displayMode:'Inline', //Display mode for the media player. For this scenario, we want "inline".
             mediaTitle:mediaTitleValue, //Title to set for the media player. Note reference to the mediaTitleValue variable created above.
             mediaSource:mediaUrlValue, //URL of the video. Note reference to the mediaUrlValue variable created above.
             previewImageSource:previewImageUrlValue, //URL for the preview image. Note reference to the previewImageUrlValue variable created above.
             autoPlay:true, //Whether the media player should start playing as soon as it is created.
             loop:false,  //Whether the video should "loop" when it reaches the end.
             mediaFileExtensions:'wmv;wma;avi;mpg;mp3;', //File extensions that the media player supports. Set these as they are shown here. 
             silverlightMediaExtensions:'wmv;wma;mp3;' //Set these as shown here. 
    },
    '', //Set to ''.
    false,  //Set to "false".
    '' //The function to call when the player is finished loading. '' means "do not call any function". 
    );

Embed Text

Now that the media player object is created, you can access it with the JavaScript object model. Do so by getting the value of the EmbedText property, which you can use to insert the media player object into a target page or document. There are several ways that you can display the media player on the page; an Input text box is one option.

Callers of the createMediaPlayer method can pass to it a function pointer that it will call after it is finished creating the media player. This is useful if you want code that runs on the page to use the media player. Using this approach, you can rely on the media player to be fully loaded before your code is called.

Get the media player as a JavaScript object by using a function that is based on the MediaPlayerHost ID parameter that you specified when you created the media player.

Function getMediaPlayer()
   {
   var p=document.getElementById("MediaPlayerHost")
   var obj=p.getElementsByTagName("object");
   return obj[0].Content.MediaPlayer;
   }

Set the EmbedText property on the page, and call it automatically when the media player object is created.
```
function getEmbedText(example)
{
     var player = getMediaPlayer();
     return player.EmbedText;
}
```
Call createMediaPlayerto include a function name to be called when the media player is loaded. Set up the function to use the getEmbedText function to display embed text on the page.

Bookmarks

For videos with longer running times, many discrete sections, high complexity, or metadata, it is useful to include bookmarks. When a bookmark is clicked, the media player jumps to a defined time in the video on the page, similar to moving between chapters of a DVD. You an use the Bookmarks field (already included in the DataFormWebPart object implementation described in the Walkthrough for SharePoint Server 2010 (ECM): Creating a Video Site topic) to add bookmarks to the page. For the purposes of this walkthrough, use a Bookmarks field with data values in the following format.

Note

Note the curly braces.

Note

The following code is text in a multiple text field, not JavaScript.

{Bookmark1Time},{Bookmark1Title};
{Bookmark2Time},{Bookmark2Title};

For example, if you want to set the bookmark times at 10 seconds and 20 seconds respectively.

0:10,This bookmark will seek to ten seconds in the video;
0:20, This bookmark will seek to 20 seconds in the video.

After you define the function to call when a bookmark link is clicked, add JavaScript code that runs on the page to extract the value of the Bookmarks field, and use it to render links that call the JavaScript function.

To add bookmarks to the Display Item Form

Open the page in SharePoint Designer 2010.
Add to the page a <ul> tag with an id attribute set to bookmarkList, in the location where you want the bookmark to appear: <ul id="bookmarkList">.

Add a JavaScript function to the page that seeks the media player to specified positions.

Tip

Use this function later for individual bookmark links.

function seekPlayer(posInSeconds)
{
var p = getMediaPlayer(); 
// The PositionMilliseconds parameter is a media player ECMAScript function found in mediaplayer.js.
   p.PositionMilliseconds = posInSeconds * 1000;
}

Add JavaScript code to the page that renders link text for bookmarks.

//Get the bookmarks from the BookmarksFieldValue anchor tag. 
var bookmarks = (document.getElementsByName('BookmarksFieldValue'))[0].innerText;

//Strip out any <br> tags.
bookmarks = bookmarks.replace(/<br>/gi,"");

//While loop: Loops through bookmarks and processes as long as there are more bookmarks. 
//Temporary variables for the next position and title.
var nextPositionSeconds;
var nextTitle;
var bookmarksList = document.getElementById('bookmarksList');

//As long as there are more semi-colons, there are more bookmarks to process.
while(bookmarks.indexOf(";") != -1)
{

//Start building the position. Grab the substrings for the first minutes and seconds, and convert to seconds.
nextPositionSeconds = ( parseInt(bookmarks.substr(0,bookmarks.indexOf(':'))) * 60) + parseInt(bookmarks.substr(bookmarks.indexOf(':') + 1,bookmarks.indexOf(',')));

//Now trim the bookmarks string to remove the position.
bookmarks = bookmarks.substr(bookmarks.indexOf(',') + 1);

//Get the next title.
var nextTitle = bookmarks.substr(0,bookmarks.indexOf(';')); 

//Trim the bookmarks string to remove the title to prepare the code to loop again.
bookmarks = bookmarks.substr(bookmarks.indexOf(';') + 1);

//Add a link to the bookmarks list that seeks the player to the correct place.
bookmarksList.innerHTML = bookmarksList.innerHTML + '<li><a href=\"\" onclick=\"javascript:seekPlayer('+nextPositionSeconds+'); return false\">'+nextTitle+'</a></li>';
}

Media Properties and Ratings Control

To add the media properties section to the page, add another DataFormWebPart by using the procedure presented in the Walkthrough for SharePoint Server 2010 (ECM): Creating a Video Site topic, but do not hide it. Place the Web Part where you want it on the page, and show the fields that you want users to see.

You may want to hide the DataFormWebPart object that you originally added to the page. In the Walkthrough for SharePoint Server 2010 (ECM): Creating a Video Site topic, you hid the DataFormWebPart control instead of deleting it, so that you can extract it and move it to somewhere more prominent (such as directly under the video) on the page.

To add the ratings control

Add a <div> element to the place on the page where you want the ratings control to appear. Use a recognizable ID, such as ratingsDiv.

Add JavaScript code to extract the control and place it between the opening and closing <div> tags.

var ratingsControl = document.getElementById(‘SPFieldAverageRating’).innerHTML;
var ratingsDiv = document.getElementById(‘ratingsDiv’);
ratingsDiv.innerHTML+=ratingsControl;
ratingsDiv.innerHTML+=ratingsControl;

Comments and the Noteboard Web Part

You can add the Noteboard Web Part to your page to add the capability for users to leave a comment about a video. From the Insert menu, choose Web Part: The Noteboard Web Part should appear in the list of Web Parts. If the Noteboard Web Part is not in the list, import it into your Web Part Gallery.

To import the Noteboard Web Part

Start Windows Explorer, and then navigate to a team site or other site where the Noteboard Web Part is available.
Navigate to Site Settings.
In the Galleries section, click Web Parts.
Choose Open from the Library menu with Windows Explorer, and then copy the socialComment.dwp Web Part to your computer.
Repeat step 2 and step 3.
Upload the socialComment.dwp Web Part to the Web Part Gallery.

To add the Noteboard Web Part

From the Insert menu, choose Web Part, and then add the Noteboard Web Part to your page where you want the user to be able to add a comment.

Note

To use the Noteboard Web Part, enable the User Profile Service Application and make it available on the server. All users of the site must have the UseSocialFeatures profile permission.

You can configure the page to display a set of videos that are selected based on the managed keywords provided for the current video.

Add JavaScript code to the page to force the keywords property of the video into the page’s URL. The code checks for a RelatedKeywords parameter in the current URL. If the parameter is not found, it uses the value of the Keywords() property from the DataFormWebPart object and reloads the page.

//Check whether the RelatedKeywords parameter is found in the URL;if necessary, reload the page with the query string. 
var relatedKeywordsParam = "RelatedKeywords";
var urlParams = window.location.search;

//Runs if the URL parameters do not include RelatedKeywords parameters.
if(urlParams.indexOf(relatedKeywordsParam) == -1) 
{
var keywordsValue = (document.getElementsByName('KeywordsFieldValue'))[0].innerText;
var newUrl = window.location.toString(); 
newUrl+= '&'+relatedKeywordsParam+'=' + keywordsValue;
window.location.replace(newUrl);
}

In SharePoint Designer 2010, from the Insert menu, choose Web Part to add an instance of the ContentByQueryWebPart object to the page and to include a queryString query. The Web Part uses the value of the RelatedKeywords parameter.
Configure Query to use queryStringparameters from the URL. One of the new capabilities of the Content By Query Web Part is that it can dynamically accept query parameters based on query string parameters found in a URL. You can use this capability to manage related videos because the RelatedKeywords property of the URL, which you are setting with JavaScript, contains managed keywords to filter on.
Set the Show items from the following list value to /Videos.
Set Enterprise Keywords in the Additional Filters section to [PageQueryString:RelatedKeywords].

Next Steps

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

Share via

Prerequisites

Media Player

To add a media player to the Display Item Form page

Embed Text

Bookmarks

To add bookmarks to the Display Item Form

Media Properties and Ratings Control

To add the ratings control

Comments and the Noteboard Web Part

To import the Noteboard Web Part

To add the Noteboard Web Part

Next Steps

See Also

Tasks

Concepts

Additional resources