Пошаговое руководство. Настройка отправки видео

  • Статья

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

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

В этой статье
Страница отправки и веб-часть "Мультимедиа"
Скрытый элемент управления Silverlight
Тестовая страница MediaTest.aspx
Тег <object> и extractionControl
Кнопка "Задать эскиз"
Поля "URL-адрес изображения для просмотра", "Ширина кадра" и "Высота кадра"

Этот раздел является третьим в серии пошаговых руководств, обучающих созданию и настройке сайта для совместного использования видео.

Теперь, когда создана форма просмотра, где пользователи могут просматривать видео, можно приступить к настройке механизма отправки видео. В этом пошаговом руководстве показано, как реализовать элементы управления для автоматического извлечения эскиза из видеофайлов. Такая реализация более эффективна, чем реализация в Microsoft SharePoint Server 2010 по умолчанию, в которой пользователи должны вручную указывать URL-адрес эскиза для видео.

В данном руководстве рассматриваются три задачи:

  1. Создание страницы Форма для изменения элемента и добавление на нее объекта MediaWebPart. Настраиваемая форма играет роль страницы отправки и отображается, когда пользователь выбирает для видео команду Свойства представления.

  2. Добавление на страницу скрытого элемента управления Microsoft Silverlight. Скрытое приложение Microsoft Silverlight преобразует эскиз из объекта MediaWebPart в поддерживаемый формат изображения.

  3. Добавление кнопки Задать эскиз с помощью ECMAScript (JavaScript, JScript). Когда пользователь нажимает кнопку Задать эскиз, объектная модель JavaScript для объекта MediaWebPart захватывает соответствующий кадр, вызывает размещенное на странице приложение Silverlight для сохранения эскиза в библиотеку Эскизы, автоматически задает для видео URL-адрес изображения эскиза и скрывает поле PreviewImageUrl.

Необходимые компоненты

Предупреждающая заметкаВнимание!

Для использования этого руководства необходимо знать технологию Silverlight. SDK Microsoft SharePoint 2010 включает пример кода для решения Silverlight, которое выполняет описанные здесь функции. Пример кода приведен исключительно в целях демонстрации возможностей и не должен использоваться непосредственно в производственных приложениях.

Пройдите раздел Пошаговое руководство. Создание видеосайта.

Страница отправки и веб-часть "Мультимедиа"

Как показано в разделе Пошаговое руководство. Создание видеосайта, создайте в библиотеке Видео с помощью Microsoft SharePoint Designer 2010Формы для изменения элемента и добавьте на нее объект MediaWebPart.

Создание формы для изменения элемента с помощью SharePoint Designer

  1. Запустите Microsoft SharePoint Designer 2010 и перейдите на сайт SharePoint.

  2. В области Навигация слева нажмите кнопку Списки и библиотеки, а затем выберите библиотеку Видео.

  3. Нажмите кнопку Создать, чтобы открыть диалоговое окно Создание формы списка.

  4. В диалоговом окне Создание формы списка задайте параметры, как показано в таблице 1.

    Таблица 1. Параметры диалогового окна "Создание формы списка"

    Параметр

    Значение

    Тип формы

    Форма для изменения элемента

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

    Да

    Тип контента

    Видео

  5. В разделе Формы щелкните правой кнопкой мыши созданную форму, а затем выберите команду Изменить файл в расширенном режиме.

Откроется новая форма просмотра, которую можно настроить. Это форма по умолчанию, которая отображается, когда пользователь выбирает для видео команду Свойства представления. Для недавно загруженных видеофайлов поля Title и PreviewImageURL, скорее всего, будут пустыми.

Важное примечаниеВажно!

Дополнительные сведения о получении URL-адреса видео и создании объекта MediaWebPart для страницы отправки видео см. в разделе Веб-часть "Форма скрытых данных" статьи Пошаговое руководство. Создание видеосайта. Чтобы добавить на форму правки мультимедиа-проигрыватель, повторите действия из процедуры «Добавление веб-части "Мультимедиа"».

Скрытый элемент управления 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.)
         */
СоветСовет

Полный пример кода Silverlight для извлечения изображения эскиза находится в папке C:\Program Files\Microsoft SDKs\SharePoint 2010\Microsoft SDKs\SharePoint 2010\Samples загруженного пакета SDK SharePoint 2010.

Основная логика настраиваемого элемента управления реализована в файле MainPage.xaml.cs. Код преобразует изображение эскиза, предоставленное объектом MediaWebPart, в формат JPG. Для отправки JPG-файла в указанное расположение используется объектная модель SharePoint на стороне клиента.

Проект Visual Studio 2010 создает один файл ключа, ExtractThumbnail.xap, содержащий исполняемый файл. Чтобы развернуть XAP-файл, отправьте его в Библиотеку стилей сайта.

Отправка XAP-файла в библиотеку стилей

  1. Перейдите на сайт SharePoint и откройте любую страницу.

  2. Нажмите кнопку Весь контент сайта, а затем выберите пункт Библиотека стилей.

  3. На вкладке Документы нажмите кнопку Отправка, чтобы отправить XAP-файл.

  4. Опубликуйте XAP-файл и задайте для него основной номер версии, чтобы все пользователи могли получить к нему доступ.

Тестовая страница MediaTest.aspx

Проект Visual Studio 2010 включает тестовую страницу MediaTest.aspx, с помощью которой можно выполнять самотестирование приложения на одной странице. После отправки созданного проектом XAP-файла (на URL-адрес, указанный на странице MediaTest.aspx) загрузите страницу в любую библиотеку документов SharePoint и откройте эту страницу.

Тег <object> и extractionControl

Чтобы приложение Silverlight стало доступно на странице отправки, добавьте с помощью SharePoint Designer 2010 тег <object>, который загружает приложение и включает его в инструкцию <div> с известным идентификатором, например extractionControl. Замените URL-адрес для параметра source на URL-адрес, указывающий на ранее отправленный XAP-файл.

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

Программный доступ к элементу управления "Извлечение" Silverlight осуществляет аналогично доступу к объекту MediaWebPart, как показано в разделе Пошаговое руководство. Создание видеосайта — доступ к элементу управления осуществляется со страницы отправки. Вставьте на страницу функцию JavaScript, чтобы получить доступ к элементу управления "Извлечение" Silverlight как к объекту JavaScript.

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

Параметр

Метод извлечения и вычисления

Эскиз

Извлекается из объекта MediaWebPart с помощью метода CaptureCurrentFrame в JavaScript.

Высота и ширина эскиза

Вычисление правильной высоты и ширины выполняется в два этапа. Размер объекта MediaWebPart не всегда равен размеру возвращаемого эскиза, поскольку пропорции прямоугольника эскиза могут отличаться от пропорций видео.

Для вычисления высоты и ширины сначала необходимо вычислить естественные пропорции видео, отображаемого в объекте MediaWebPart с помощью свойств NaturalVideoWidth и NaturalVideoHeight изображения эскиза. Затем на основе естественных пропорций необходимо вычислить размер возвращенного изображения эскиза. В зависимости от пропорций размер будет равен полной ширине проигрывателя, умноженной на более короткую высоту, либо полной высоте проигрывателя, умноженной на более короткую ширину.

Имя файла изображения эскиза

В качестве этого значения можно указать произвольную текстовую строку. Например, можно взять значение Title, которое использовалось в объекте MediaWebPart. Также можно взять случайную строку, созданную JavaScript.

URL-адрес сервера

Этому параметру в коде жестко присвоено имя текущего сервера (в примерах кода представлено заполнителем <сервер>).

Относительный к серверу URL-адрес библиотеки документов для хранения эскизов

Этот параметр жестко задан в URL-адресе /Thumbnails, основанном на указанном ранее имени библиотеки эскизов.

После отправки эскиза элементом управления Silverlight в коде JavaScript используется набор данных для значений свойств, указанных в таблице 3.

Таблица 3. Данные значений свойств

Имя поля

Определение

URL-адрес изображения для просмотра

URL-адрес основан на имени файла, возвращаемого из элемента управления Silverlight.

Ширина кадра

Ширина видео, вычисленная ранее.

Высота кадра

Высота видео, вычисленная ранее.

Для заполнения полей в таблице 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;
}
} 
}

Поля "URL-адрес изображения для просмотра", "Ширина кадра" и "Высота кадра"

Скройте в графическом интерфейсе поля URL-адрес изображения для просмотра, Ширина кадра и Высота кадра, чтобы пользователи не пытались вручную ввести или изменить значения этих полей. Чтобы скрыть поля, воспользуйтесь конструктором в Microsoft SharePoint Designer 2010 для поиска соответствующих элементов <tr> для каждой строки таблицы, содержащей эти поля, и присвоения атрибуту style значения style=display:none. Этот параметр скрывает поля от пользователя, оставляя их на странице, где их значения можно задать с помощью объектной модели ecmascriptshort.

Следующие действия

Пошаговое руководство: создание настраиваемой домашней страницы и XSL-преобразования веб-части запроса контента

См. также

Задачи

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

Концепции

Пошаговые руководства. Создание и настройка сайта совместного доступа к видео

Модель программирования управления цифровыми активами