如何：使用 ECMAScript 配置 MediaWebPart 对象

项目
06/15/2015

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

适用范围： SharePoint Server 2010

数字资产管理 (DAM) 包括一个可通过使用 ECMAScript（JavaScript、JScript）客户端对象模型进行配置的多媒体播放器对象。您可通过编写与 Silverlight 支持的 ECMAScript（JavaScript、JScript）对象模型进行交互操作的自定义代码，实现默认的 Microsoft Silverlight 2.0 媒体播放器自动化。

以下代码创建一个可脚本化的媒体播放器接口，此接口自动获取并设置很多用户可通过 UI 进行修改的属性，其中包括：

媒体文件的标题。
显示模式。
打开还是关闭"自动播放"设置和"循环设置"。
主题的位置。
预览图像。
选择哪个音频文件或视频文件。

您可在 Microsoft SharePoint Designer 2010 或 Microsoft Visual Studio 2010 中创建一个相似的文件。

本主题包括示例 .aspx 页的代码，而此页包括 Silverlight 控件以及测试 ECMAScript（JavaScript、JScript）对象模型提供给媒体播放器的可配置选项所需的 ECMAScript（JavaScript、JScript）对象模型实现。

多媒体播放器测试示例

以下示例演示了一个 .aspx 页，可使用此页来测试 ECMAScript（JavaScript、JScript）对象模型提供给多媒体播放器的功能和属性。为了充分利用此示例，请确保您可访问承载一个或多个视频文件以及预览图像文件的服务器。此示例将播放您指定的视频文件，并加载您提供的预览图像。在 mediaplayer.js 文件中查找这些类型。

表 1 列出了示例演示的可配置的 ECMAScript（JavaScript、JScript）对象模型属性。

表 1. ECMAScript 属性

属性	说明
string MediaTitle {get;set}	获取和设置目标媒体文件的标题。
string DisplayMode { get; set; }	获取和设置显示模式：嵌入、覆盖或全屏幕。
bool AutoPlay { get; set; }	获取和设置是否自动播放目标媒体文件。
bool Loop { get; set; }	获取和设置是否重复播放目标媒体文件。
string TemplateSource { get; set; }	获取和设置 XAML 模板的源，可将此模板作为主题应用到媒体播放器。
string PreviewImageSource { get; set; }	获取和设置预览图像源文件所在位置的 URL。
string MediaSource { get; set; }	获取和设置媒体源文件所在位置的 URL。
string EmbedText { get; }	获取在加载媒体文件时嵌入到视频中的文本。
void Play();	播放媒体文件。
void Pause();	暂停媒体文件。
void Stop();	停止媒体文件。
string Duration { get; }	获取媒体文件的持续时间（以秒计算）。
long DurationMilliseconds { get; }	获取媒体文件的持续时间（以毫秒计算）。
string Position { get; set; }	获取和设置在媒体文件的持续时间中的位置（以秒计算）。
long PositionMilliseconds { get; set; }	获取和设置在媒体文件的持续时间中的位置（以毫秒计算）。

配置多媒体播放器对象

从"设置播放模式"列表框中选择播放模式。
打开 Microsoft SharePoint Designer 2010。在"文件"菜单上，单击"新建"以创建页。

将以下代码复制到新页中。

<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">

<head>
    <title>SilverLight Media Player Sample Page</title>
    <script type="text/javascript" src="/_layouts/mediaplayer.js"></script>

    <script type="text/javascript">

//Gets the media player.
      function getMediaPlayer()
      {
        var p = document.getElementById("MediaPlayerHost")
        var obj = p.getElementsByTagName("object");
        return obj[0].Content.MediaPlayer;
      }

      //Initialize the media player object and set values for its properties. Customize MediaUrlField and PreviewURLField values for your local environment.
      function init()
      {
        var serverStr = window.location.href;
        serverStr = serverStr.substr(7);
        serverStr = serverStr.substr(0, serverStr.indexOf("/"));

        document.getElementById("MediaURLField").value = "http://" + serverStr + "/documents/test.wmv";
        document.getElementById("PreviewURLField").value = "http://" + serverStr + "/documents/test.jpg";
        document.getElementById("TitleField").value = "API Test Page";
        document.getElementById("TemplateURLField").value = "http://" + serverStr + "/Style%20Library/XAML/AlternateMediaPlayer.xaml";
      }

      //Set properties of the media player, including media URL, preview image URL, template URL, title, autoplay, whether to repeat, and default display mode. 
      function SetMediaSource()
      {
        var elm = document.getElementById("MediaURLField");
        var p = getMediaPlayer();
        p.MediaSource = elm.value;
      }
      function SetPreviewImageSource()
      {
        var elm = document.getElementById("PreviewURLField");
        var p = getMediaPlayer();
        p.PreviewImageSource = elm.value;
      }
      function SetMediaTitle()
      {
        var elm = document.getElementById("TitleField");
        var p = getMediaPlayer();
        p.MediaTitle = elm.value;
      }
      function SetTemplateSource()
      {
        var elm = document.getElementById("TemplateURLField");
        var p = getMediaPlayer();
        p.TemplateSource = elm.value;
      }
      function SetAutoPlay()
      {
        var elm = document.getElementById("autoPlayCB");
        var p = getMediaPlayer();
        p.AutoPlay = elm.checked;
      }
      function SetLoop()
      {
        var elm = document.getElementById("loopCB");
        var p = getMediaPlayer();
        p.Loop = elm.checked;
      }
      function SetDisplayMode()
      {
        var elm = document.getElementById("DisplayModeSelect");
        var p = getMediaPlayer();
        p.DisplayMode = elm.value;
      }

      //Sets back the time of the media being played by 5000 milliseconds (5 seconds).
      function BackFive()
      {
        var p = getMediaPlayer();
        var pos = p.PositionMilliseconds;
        pos -= 5000; /*5 seconds*/
        p.PositionMilliseconds = pos;
        ShowPosition();
        ShowPositionMilliseconds();
      }
      //Plays media set in the MediaURLField.
      function Play()
      {
        var p = getMediaPlayer();
        p.Play();
      }
      //Pauses media.
      function Pause()
      {
        var p = getMediaPlayer();
        p.Pause();
      }
      //Stops media.
      function Stop()
      {
        var p = getMediaPlayer();
        p.Stop();
      }
      //Sets forward the time of the media being played by 5000 milliseconds (5 seconds).
      function ForwardFive()
      {
        var p = getMediaPlayer();
        var pos = p.PositionMilliseconds;
        pos += 5000; /*5 seconds*/
        p.PositionMilliseconds = pos;
        ShowPosition();
        ShowPositionMilliseconds();
      }
      //Sets back the time of the media being played by 5000 milliseconds (5 seconds).
      function ShowEmbedText()
      {
        var p = getMediaPlayer();
        var elm = document.getElementById("EmbedHost");
        if(elm.innerText != undefined)
        {
          elm.innerText = p.EmbedText;
        }
        else
        {
          elm.textContent = p.EmbedText;
        }
      }
      //Shows the total duration (in minute:second format) of the selected media.
      function ShowDuration()
      {
        var p = getMediaPlayer();
        var elm = document.getElementById("DurationHost");
        if(elm.innerText != undefined)
        {
          elm.innerText = p.Duration;
        }
        else
        {
          elm.textContent = p.Duration;
        }
      }
      //Shows the total duration (in milliseconds) of the selected media.
      function ShowDurationMilliseconds()
      {
        var p = getMediaPlayer();
        var elm = document.getElementById("DurationMillisecondsHost");
        if(elm.innerText != undefined)
        {
          elm.innerText = p.DurationMilliseconds;
        }
        else
        {
          elm.textContent = p.DurationMilliseconds;
        }
      }
      //By default, gets the position in minutes and seconds of the selected media based on internal text; otherwise, gets the position in minutes and seconds of the selected media based on metadata.
      function ShowPosition()
      {
        var p = getMediaPlayer();
        var elm = document.getElementById("PositionHost");
        if(elm.innerText != undefined)
        {
          elm.innerText = p.Position;
        }
        else
        {
          elm.textContent = p.Position;
        }
      }
      // By default, gets the position in milliseconds of the selected media based on internal text; otherwise, gets the position in milliseconds of the selected media based on metadata.
      function ShowPositionMilliseconds()
      {
        var p = getMediaPlayer();
        var elm = document.getElementById("PositionMillisecondsHost");
        if(elm.innerText != undefined)
        {
          elm.innerText = p.PositionMilliseconds;
        }
        else
        {
          elm.textContent = p.PositionMilliseconds;
        }
      }
    </script>
    <style>
    .propertyVal
    {
      background-color: cornsilk;
      font-weight: bolder;
    }
    </style>
  <head>
<!--[if gte mso 9]><![endif]-->
</head>
<body style="{font: 10pt, sans-serif;}">
    <div>
      <div>
      //Sets test controls with user-specified values.
      <form>
        <input type="text" id="MediaURLField"> <a href="javascript:SetMediaSource();">Set Media Source</a><br>
        <input type="text" id="PreviewURLField"> <a href="javascript:SetPreviewImageSource();">Set Preview Image Source</a><br>
        <input type="text" id="TitleField"> <a href="javascript:SetMediaTitle();">Set Media Title</a><br>
        <input type="text" id="TemplateURLField"> <a href="javascript:SetTemplateSource();">Set Template Source</a><br>
        <input type="checkbox" id="autoPlayCB"> <a href="javascript:SetAutoPlay();">Set Auto Play</a><br>
        <input type="checkbox" id="loopCB"> <a href="javascript:SetLoop();">Set Loop</a><br>
        <select id="DisplayModeSelect">
          <option>Overlay</option>
          <option selected="true">Inline</option>
          <option>Fullscreen</option>
        </select><a href="javascript:SetDisplayMode();">Set Display Mode</a><br><br>
        <a href="javascript:Play();">Play</a>
        <a href="javascript:Pause();">Pause</a>
        <a href="javascript:Stop();">Stop</a>
        <a href="javascript:BackFive();">Back 5</a>
        <a href="javascript:ForwardFive();">Forward 5</a><br><br>
        <a href="javascript:ShowEmbedText();">Show EmbedText</a> Embed Text:<span id="EmbedHost" class="propertyVal"></span><br>
        <a href="javascript:ShowDuration();">Show Duration</a> Duration:<span id="DurationHost" class="propertyVal"></span><br>
        <a href="javascript:ShowPosition();">Show Position</a> Position:<span id="PositionHost" class="propertyVal"></span><br>
        <a href="javascript:ShowDurationMilliseconds();">Show DurationMilliseconds</a> DurationMilliseconds:<span id="DurationMillisecondsHost" class="propertyVal"></span><br>
        <a href="javascript:ShowPositionMilliseconds();">Show PositionMilliseconds</a> PositionMilliseconds:<span id="PositionMillisecondsHost" class="propertyVal"></span><br>
      </form>
      </div>
      <div id="MediaPlayerHost">
        <script>
        {
          init();
          var MediaURL = document.getElementById("MediaURLField").value; 
          var PreviewURL = document.getElementById("PreviewURLField").value; 
          var MediaTitle = document.getElementById("TitleField").value; 
          var AutoPlay = document.getElementById("autoPlayCB").checked; 
          var Loop = document.getElementById("loopCB").checked;
        mediaPlayer.createMediaPlayer(
          document.getElementById('MediaPlayerHost'),
          'MediaPlayerHost',
          '500px', '333px',
          {
            displayMode:'Inline',
            mediaTitle:MediaTitle,
            mediaSource:MediaURL,
            previewImageSource:PreviewURL,
            autoPlay:AutoPlay,
            loop:Loop,
            mediaFileExtensions:'wmv;wma;avi;mpg;mp3;',
            silverlightMediaExtensions:'wmv;wma;mp3;'
          });
        }
        </script>
      </div>
    </div>
  </body>
</html>

将该文件保存为 .aspx 文件。
在 SharePoint Designer 2010 中打开该文件。
在"设置媒体文件"字段中，键入您想要媒体播放器播放的视频文件的 URL。

备注

媒体播放器可播放音频文件和视频文件。例如，此过程将使用一个视频文件。
在"设置预览页面源"字段中，键入您想要在预览视频时让媒体播放器显示的图像文件的 URL。
在"设置媒体标题"字段中，为视频文件键入一个友好名称。
在"设置模板源"字段中，键入包含您想要应用于媒体播放器的 XAML 文件的模板库的位置 URL。
如果您想要自动播放文件，则选中"设置自动播放"复选框。
从"设置播放模式"列表框选择一个播放模式：
- 如果您选择"覆盖"，则系统会将媒体播放器最大化，并将其显示在已经打开的所有其他窗口的前面。
- 如果您选择"嵌入"，则系统将在当前的 .aspx 页上通过嵌入方式加载媒体播放器。
- 如果您选择"全屏幕"，则系统将以全屏幕模式加载媒体播放器。

请参阅

通过

如何：使用 ECMAScript 配置 MediaWebPart 对象

多媒体播放器测试示例

配置多媒体播放器对象

请参阅

引用

概念

其他资源

其他资源