通过

演练：添加 MediaWebPart 和视频网站功能

  • 项目

上次修改时间： 2010年4月19日

适用范围： SharePoint Server 2010

本文内容
媒体播放器
嵌入文本
书签
媒体属性和评级控件
注释和记事板 Web 部件
相关视频

本主题是一系列演练（共五部分）的第二部分，这些演练将教您如何创建和自定义音频共享网站。

先决条件

完成演练：创建视频网站主题。

媒体播放器

在将显示媒体播放器的页上创建引用，将对媒体播放器对象模型的引用添加到该页以在指定的 <div> 标记中创建媒体播放器，然后在希望显示媒体播放器的页中添加内联 ECMAScript（JavaScript、JScript）代码。

将媒体播放器添加到"显示项目表单"页

  1. 启动 Microsoft SharePoint Designer 2010，然后在"拆分"视图中打开在演练：创建视频网站中创建的"显示项目表单"。

  2. 在希望显示 MediaWebPart 对象的页上创建 <div> 引用。

    提示提示

    例如，若要创建 ID 为 MediaPlayerHost 的 <div> 标记，请将 <div id="MediaPlayerHost"></div> 添加到页。

  3. 在页上添加对 mediaplayer.jsJavaScript 对象模型的引用，以导入与媒体播放器一起使用的功能。例如，<script type="text/javascript" src="/_layouts/mediaplayer.js"/>。

  4. 将内联 JavaScript 代码添加到要显示 MediaWebPart 对象的页。

    //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". 
    );

嵌入文本

此时已创建媒体播放器对象，您可以使用 JavaScript 对象模型访问它。通过获取 EmbedText 属性的值来执行此操作，该属性可用于将媒体播放器对象插入目标页或文档中。可通过多种方式在页面上显示媒体播放器；Input 文本框便是选择之一。

createMediaPlayer 方法的调用方可向其传递一个函数指针，该方法将在创建完媒体播放器后调用此函数指针。这在您希望页面上运行的代码使用媒体播放器时很有用。通过使用此方法，可确保在调用代码之前完全加载媒体播放器。

  1. 通过使用在创建媒体播放器时指定的 MediaPlayerHost ID 参数的函数，将媒体播放器作为一个 JavaScript 对象获取。

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

  2. 在页面上设置 EmbedText 属性，然后在创建媒体播放器对象时调用该属性。

    function getEmbedText(example)
{
     var player = getMediaPlayer();
     return player.EmbedText;
}

  3. 调用 createMediaPlayer 以包含在加载媒体播放器时要调用的函数名称。将函数设置为使用 getEmbedText 函数以在页面上显示嵌入文本。

书签

对于运行时间较长、离散部分较多、复杂性较高或带有元数据的视频，包含书签会很有用。在单击书签时，媒体播放器会跳转到页面视频中的定义时间，这与在 DVD 的章节间移动类似。可以使用 Bookmarks 字段（已包含在演练：创建视频网站主题中所述的 DataFormWebPart 对象实现中）将书签添加到页面。在本演练中，请使用带采用以下格式的数据值的 Bookmarks 字段。

备注

请注意大括号。

备注

以下代码是多文本字段中的文本，而非 JavaScript。

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

例如，若要在将书签时间分别设置为 10 秒和 20 秒。

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

在定义当单击书签时要调用的函数后，添加页面上运行的 JavaScript 代码以提取 Bookmarks 字段的值，然后使用该代码呈现调用 JavaScript 函数的链接。

将书签添加到"显示项目表单"

  1. 在 SharePoint Designer 2010 中打开页面。

  2. 将其 id 属性设置为 bookmarkList 的 <ul> 标记添加到页面中要显示书签的位置：<ul id="bookmarkList">。

  3. 向页面添加一个 JavaScript 函数，用于在媒体播放器中查找指定位置。

    提示提示

    稍后将此函数用于单个书签链接。

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

  4. 将 JavaScript 代码添加到呈现书签链接文本的页面。

    //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>';
}

媒体属性和评级控件

若要将媒体属性部分添加到页面，请使用演练：创建视频网站主题中介绍的过程添加另一个 DataFormWebPart，但不隐藏它。将 Web 部件置于页面上的所需位置，并显示希望用户看到的字段。

您可能希望隐藏最初添加到页面的 DataFormWebPart 对象。在演练：创建视频网站主题中，可以隐藏 DataFormWebPart 控件而不是删除该控件，以便能提取该控件并将其移动到页面上更显著的位置（例如视频的正下方）。

添加评级控件

  1. 将 <div> 元素添加到评级控件在页面上的显示位置。使用可识别的 ID，如 ratingsDiv。

  2. 添加 JavaScript 代码以提取控件，并将其置于开始和结束 <div> 标记之间。

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

注释和记事板 Web 部件

可以通过向页面添加记事板 Web 部件，使用户能够留下对视频的注释。从"插入"菜单选择"Web 部件"：记事板 Web 部件应显示在 Web 部件列表中。如果记事板 Web 部件未在该列表中，则将其导入"Web 部件库"。

导入记事板 Web 部件

  1. 启动 Windows 资源管理器，然后导航到工作组网站或提供了"记事板 Web 部件"的其他网站。

  2. 导航到"网站设置"。

  3. 在"库"部分，单击"Web 部件"。

  4. 使用 Windows 资源管理器从"库"菜单选择"打开"，然后将"socialComment.dwp Web 部件"复制到计算机上。

  5. 重复步骤 2 和步骤 3。

  6. 将"socialComment.dwp Web 部件"上载到"Web 部件库"。

添加记事板 Web 部件

  • 从"插入"菜单选择"Web 部件"，然后将"记事板 Web 部件"添加到希望用户添加注释的页面。

备注

若要使用"记事板 Web 部件"，请启用"User Profile Service 应用程序"，并使其在服务器上可用。该网站的所有用户必须具有"UseSocialFeatures"配置文件权限。

相关视频

可以将页面配置为显示一组根据为当前视频提供的托管关键字选择的视频。

  1. 将 JavaScript 代码添加到页面，以在页面 URL 中强制加入视频的关键字属性。此代码将检查当前 URL 中的 RelatedKeywords 参数。如果未找到该参数，则它将使用 DataFormWebPart 对象中的 Keywords() 属性的值并重新加载页面。

    //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);
}

  2. 在 SharePoint Designer 2010 中，从"插入"菜单选择"Web 部件"，以将 ContentByQueryWebPart 对象的实例添加到页面并包含 queryString 查询。Web 部件将使用 RelatedKeywords 参数的值。

  3. 将 Query 配置为使用 URL 中的 queryStringparameters。内容查询 Web 部件的其中一项新功能是，根据 URL 中找到的查询字符串参数动态接受 query 参数。由于使用 JavaScript 设置的 URL 的 RelatedKeywords 属性包含筛选所依据的托管关键字，因此可以使用此功能来管理相关视频。

  4. 将"显示以下列表中的项目"值设置为 /Videos。

  5. 将"其他筛选器"部分中的"企业关键字"设置为 [PageQueryString:RelatedKeywords]。

后续步骤

演练：自定义视频上载体验

请参阅

任务

如何：使用 ECMAScript 配置 MediaWebPart 对象

概念

管理数字资产

演练：创建和自定义视频共享网站

数字资产管理编程模型