Практическое руководство. Настройка объекта MediaWebPart с помощью ECMAScript

Статья
09/18/2014

Дата последнего изменения: 19 апреля 2010 г.

Применимо к: SharePoint Server 2010

Управление цифровыми активами содержит объект мультимедийного проигрывателя, который можно настроить с помощью клиентской объектной модели ECMAScript (JavaScript, JScript). Мультимедийный проигрыватель Microsoft Silverlight 2.0 по умолчанию можно автоматизировать, написав специализированный код, взаимодействующий с объектной моделью ECMAScript (JavaScript, JScript), поддерживаемой Silverlight.

Следующий код создает интерфейс мультимедийного проигрывателя с возможностью добавления скриптов, который автоматически получает и устанавливает ряд свойств, которые пользователи смогут изменять из пользовательского интерфейса, в том числе

Название файла мультимедиа.
Режим отображения.
Включены или отключены ли параметр автоматическое воспроизведение и параметр повтор.
Расположение темы.
Изображения для предварительного просмотра.
Какой звуковой файл или видеофайл выбран.

Аналогичный файл можно создать в 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-адрес файла изображения, который должен показываться в мультимедийном проигрывателе при предварительном просмотре видео.
В поле Задать название мультимедиа введите понятное имя для видеофайла.
В поле Задать источник шаблона введите URL-адрес расположения библиотеки шаблонов, содержащей XAML-файл, который нужно использовать для мультимедийного проигрывателя.
Если файл должен воспроизводиться автоматически, установите флажок Задать автоматическое воспроизведение.
Выберите режим воспроизведения в списке Задать режим воспроизведения.
- Если выбрано значение Перекрытие, система разворачивает окно мультимедийного проигрывателя и отображает его поверх всех остальных открытых окон.
- Если выбрано значение Встроенное, система загружает мультимедийный проигрыватель внутрь текущей ASPX-страницы.
- Если выбрано значение Полный экран, система загружает мультимедийный проигрыватель в полноэкранном режиме.

См. также

Практическое руководство. Настройка объекта MediaWebPart с помощью ECMAScript

Пример тестирования мультимедийного проигрывателя

Настройка объекта мультимедийного проигрывателя

См. также

Ссылка

Концепции

Другие ресурсы

Дополнительные ресурсы