通过

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

  • 项目

上次修改时间： 2015年3月9日

适用范围： SharePoint Server 2010

本文内容
上载页面和媒体 Web 部件
隐藏的 Silverlight 控件
MediaTest.aspx 测试页
<object> 标记和 extractionControl
设置缩略图按钮
PreviewImageURL、框架宽度和框架高度字段

本主题是指导您创建和自定义视频共享网站的系列演练的第三部分（共五部分）。

在创建允许用户查看视频的显示表单后，便可开始自定义视频上载体验。本演练演示如何实现用于自动提取视频的缩略图图像的控件。与 Microsoft SharePoint Server 2010 中默认提供的上载实现相比，这是一种更高效的上载实现，前者要求用户手动提供指向视频缩略图图像的 URL。

本演练包括三项任务：

  1. 创建"编辑项目表单"页并向其中添加 MediaWebPart 对象。自定义表单是上载页面，与用户在视频上单击"查看属性"时所看到的表单相同。

  2. 向页面中添加隐藏的 Microsoft Silverlight 控件。添加隐藏的 Microsoft Silverlight 应用程序可将 MediaWebPart 对象中的缩略图图像转换为相应的图像格式。

  3. 使用 ECMAScript（JavaScript、JScript）添加"设置缩略图"按钮。当用户单击"设置缩略图"时，MediaWebPart 对象的 JavaScript 对象模型会捕获相应的框架，对该页面调用 Silverlight 应用程序以将缩略图存储在"缩略图"库中，为视频自动设置缩略图图像的 URL，以及在表单视图中隐藏"PreviewImageUrl"字段。

先决条件

警告注释警告

本演练要求了解 Silverlight。Microsoft SharePoint 2010 软件开发工具包 (SDK) 包括 Silverlight 解决方案的代码示例，可执行此处所述的功能。包含内嵌代码示例只是为了演示，不能将其直接用于生产代码。

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

上载页面和媒体 Web 部件

如演练：创建视频网站中所述，使用 Microsoft SharePoint Designer 2010 在"视频"库中创建"编辑表单项目"，并向其中添加 MediaWebPart 对象。

使用 SharePoint Designer 创建"编辑"表单

  1. 启动 Microsoft SharePoint Designer 2010，然后导航到 SharePoint 网站。

  2. 在左侧的"导航"窗格中，单击"列表和库"，然后选择"视频"库。

  3. 单击"新建"打开"新建列表表单"对话框。

  4. 在"新建列表表单"对话框中，指定表 1 中所示的设置。

    表 1."新建列表表单"对话框设置

    设置

    值

    表单类型

    编辑项目表单

    设置为所选类型的默认表单

    是

    要使用的内容类型

    视频

  5. 在"表单"部分，右键单击新创建的表单，然后选择"在高级模式下编辑文件"。

随即显示可以自定义的新显示表单。它是用户在单击视频的"查看属性"时所看到的默认表单。新上载的视频的"标题"字段和"PreviewImageURL"字段可能为空。

重要注释重要说明

在演练：创建视频网站主题中，查看"隐藏的数据表单 Web 部件"部分，以了解有关获取视频的 URL 路径和为上载视频页创建 MediaWebPart 对象的详细信息。重复"添加媒体 Web 部件"过程中的步骤，向"编辑"表单中添加媒体播放器。

隐藏的 Silverlight 控件

自定义 Silverlight 控件可管理 MediaWebPart 对象的当前框架中的缩略图图像文件的提取和上载过程。代码会进一步公开一个 JavaScript 方法，以获取并设置转换和上载期间使用的参数，并返回每个上载的缩略图图像的文件名。代码会将随机填充字符添加到该文件名中，以提高成功提取图像的机会。

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

在下载的 SharePoint 2010 SDK 的 C:\Program Files\Microsoft SDKs\SharePoint 2010\Microsoft SDKs\SharePoint 2010\Samples 文件夹中查找完整的 Silverlight 缩略图图像提取程序代码示例。

自定义控件的核心逻辑位于"MainPage.xaml.cs"文件中。该代码将 MediaWebPart 对象提供的缩略图图像转换为 .jpg 文件格式。它使用 SharePoint 客户端对象模型将该 .jpg 文件上载到指定位置。

Visual Studio 2010 项目生成的密钥文件是一个包含可执行文件的"ExtractThumbnail.xap"文件。若要部署该 .xap 文件，请将其上载到您的网站的"样式库"中。

将 XAP 文件上载到样式库

  1. 导航到 SharePoint 网站，然后打开任一页面。

  2. 单击"所有网站内容"，然后单击"样式库"。

  3. 在"文档"选项卡上，单击"上载文档"以上载该 .xap 文件。

  4. 发布该 .xap 文件，并将其批准为主要版本，以便所有用户都可以访问它。

MediaTest.aspx 测试页

Visual Studio 2010 项目包含"MediaTest.aspx"测试页，可用来单独测试某页面上的应用程序。将项目生成的 .xap 文件上载到"MediaTest.aspx"页上指定的 URL 后，可将该页面上载到任何 SharePoint 文档库，然后通过浏览找到它。

<object> 标记和 extractionControl

若要使 Silverlight 应用程序可在上载页面上使用，请使用 SharePoint Designer 2010 添加"<object>"标记，以加载该应用程序并将其包装在具有已知 ID（如 extractionControl）的"<div>"语句中。将 source 参数的 URL 值替换为指向前面上载的 .xap 文件的 URL。

<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&clcid=0x804" style="text-decoration:none">
   <img src="https://go.microsoft.com/fwlink/?linkid=108181&clcid=0x804" alt="Get Microsoft Silverlight" style="border-style:none"/>
  </a>
    </object>
</div>

获取对"Silverlight 提取"控件的编程访问权限与获取对 MediaWebPart 对象的访问权限的方式相似，如演练：创建视频网站中所述。您能够从上载页面访问该控件。在页面上插入 JavaScript 函数可以 JavaScript 对象的形式获得"Silverlight 提取"控件。

function getExtractorControl() 
{
var control = document.getElementById("extractionControl").childNodes[0];
return control.Content.MainPage;
}

设置缩略图按钮

可通过添加 JavaScript 代码（最好在媒体播放器代码附近）向页面中添加按钮元素：<input onclick="captureThumbnailAndSetMetadata();" type="button" value="Set Thumbnail"/>

此按钮后面的 JavaScript 按钮可提取供 Silverlight 控件使用的参数。

表 2. ECMAScript 按钮参数

参数

提取和计算方法

缩略图

使用 JavaScript 中的 CaptureCurrentFrame 方法从 MediaWebPart 对象提取。

缩略图高度和宽度

计算正确的高度和宽度分两步进行。MediaWebPart 对象大小并非总是等于返回的缩略图图像的大小，因为其矩形可能与视频具有不同的纵横比。

首先，使用缩略图图像的 NaturalVideoWidth 属性和 NaturalVideoHeight 属性，通过计算 MediaWebPart 对象中显示的视频的固有纵横比来计算正确的高度和宽度。接下来，根据该固有纵横比计算返回的缩略图图像的大小。根据纵横比的不同，对象大小为播放器的全宽 x 较小高度值，或者为播放器的全高 x 较小宽度值。

要用于缩略图图像的文件名

可以将此值设置为任何文本字符串。例如，可考虑将其设置为 MediaWebPart 对象中使用的"标题"值。或者，可考虑将其设置为由 JavaScript 计算的随机字符串。

服务器的 URL

此参数硬编码为当前服务器名称（在代码示例中以 <server> 表示）。

要存储缩略图的文档库的服务器相对 URL

此参数硬编码为"/Thumbnails"URL，该 URL 基于早先指定的缩略图库的名称。

在 Silverlight 控件上载缩略图控件后，JavaScript 代码会使用设置为表 3 中指定的属性值的数据。

表 3. 属性值数据

字段名称

定义

预览图像 URL

基于从 Silverlight 控件返回的文件名的 URL。

框架宽度

前面计算的视频宽度。

框架高度

前面计算的视频高度。

为使用代码返回的值填充表 3 中的字段，JavaScript 函数将以编程方式循环访问表单中包含的所有输入字段，并在其找到相应的字段时填写正确的值。

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、框架宽度和框架高度字段

从 UI 中隐藏"PreviewImageUrl"、"框架宽度"和"框架高度"字段，以便用户不会尝试手动输入或更改其值。若要隐藏这些字段，请使用 Microsoft SharePoint Designer 2010 中的"设计视图"查找包含这些字段的每个表行的相关"<tr>"元素，并设置其 style 属性：style=display:none。此设置不会将字段显示给用户，而是将这些字段保留在页面上可使用 ecmascriptshort 对象模型对其进行设置的位置。

后续步骤

演练：创建自定义的主页和内容查询 Web 部件 XSL

请参阅

任务

如何：使用 ECMAScript 配置 MediaWebPart 对象

概念

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

数字资产管理编程模型