Пошаговое руководство. Добавление веб-части MediaWebPart и функций видеосайта

Статья
09/18/2014

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

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

В этой статье
Универсальный проигрыватель
Внедренный текст
Закладки
Свойства мультимедиа и элемент управления оценок
Комментарии и веб-часть «Панель заметок»
Связанные видеоклипы

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

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

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

Универсальный проигрыватель

Создайте ссылку на страницу, на которой будет располагаться универсальный проигрыватель, добавьте на эту страницу ссылку на объектную модель универсального проигрывателя в указанном теге <div> для создания проигрывателя, и затем добавьте внутренний код ECMAScript (JavaScript, JScript) на странице, где будет отображаться проигрыватель.

Чтобы добавить универсальный проигрыватель на страницу формы просмотра элемента

Запустите Microsoft SharePoint Designer 2010 и откройте форму просмотра элемента, созданную в разделе Пошаговое руководство. Создание видеосайта в Комбинированном режиме.

Создайте ссылку <div> на странице, на которой должен быть показан объект MediaWebPart.

Совет
Например, чтобы создать тег <div> с идентификатором (ID) MediaPlayerHost, добавьте <div id="MediaPlayerHost"></div> на страницу.

Добавьте на страницу ссылку на объектную модель JavaScriptmediaplayer.js, чтобы импортировать функции для работы с универсальным проигрывателем. Например: <script type="text/javascript" src="/_layouts/mediaplayer.js"/>.

Добавьте внутренний код 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 в него можно передать указатель функции, который будет вызван после завершения создания проигрывателя. Это удобно, если требуется, чтобы проигрыватель использовался выполняемым на странице кодом. При таком подходе гарантируется полная загрузка проигрывателя перед вызовом кода.

Получите универсальный проигрыватель в виде объекта JavaScript, используя функцию, основанную на параметре MediaPlayerHost ID, который был задан при создании проигрывателя.
```
Function getMediaPlayer()
   {
   var p=document.getElementById("MediaPlayerHost")
   var obj=p.getElementsByTagName("object");
   return obj[0].Content.MediaPlayer;
   }
```
Установите свойство EmbedText на странице и задайте его автоматический вызов при создании объекта универсального проигрывателя.
```
function getEmbedText(example)
{
     var player = getMediaPlayer();
     return player.EmbedText;
}
```
Вызовите 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.

Чтобы добавить закладки в форму просмотра элемента

Откройте страницу в SharePoint Designer 2010.
Добавьте на страницу тег <ul> с атрибутом id, имеющим значение bookmarkList, в то место, где должна быть показана закладка: <ul id="bookmarkList">.
Добавьте на страницу функцию JavaScript, выполняющую поиск указываемых позиций в универсальном проигрывателе.

Совет

Используйте эту функцию впоследствии в ссылках отдельных закладок.
```
function seekPlayer(posInSeconds)
{
var p = getMediaPlayer(); 
// The PositionMilliseconds parameter is a media player ECMAScript function found in mediaplayer.js.
   p.PositionMilliseconds = posInSeconds * 1000;
}
```

Совет
Используйте эту функцию впоследствии в ссылках отдельных закладок.

Добавьте на страницу код 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 с помощью процедуры, описанной в разделе Пошаговое руководство. Создание видеосайта, но не скрывайте ее. Поместите веб-часть в нужное место на странице и сделайте видимыми поля, которые должны быть доступны пользователям.

Может возникнуть необходимость скрыть объект DataFormWebPart, первоначально добавленный на страницу. В разделе Пошаговое руководство. Создание видеосайта элемент управления DataFormWebPart не был удален, а был скрыт, чтобы его можно было извлечь и переместить на более видное место на странице (например, непосредственно под видео).

Чтобы добавить элемент управления оценок

Добавьте элемент <div> в то место на странице, где должен располагаться элемент управления оценок. Используйте легко распознаваемый идентификатор, такой как ratingsDiv.

Добавьте код JavaScript для извлечения элемента управления и поместите его между открывающим и закрывающим тегами <div>.

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

Комментарии и веб-часть «Панель заметок»

На странице можно разместить веб-часть «Панель заметок», где пользователи смогут оставлять свои комментарии по поводу видео. Выберите в меню Вставка пункт Веб-часть: Веб-часть «Панель заметок» должна находиться вверху списка веб-частей. Если ее нет в списке, импортируйте ее в свою Коллекцию веб-частей.

Чтобы импортировать веб-часть «Панель заметок»

Откройте проводник Windows и перейдите к сайту группы или другому сайту, где доступна веб-часть Панель заметок.
Перейдите на страницу Параметры сайта.
В разделе Коллекции щелкните Веб-части.
Выберите Открыть в меню Библиотека с помощью проводника и скопируйте веб-часть socialComment.dwp на свой компьютер.
Повторите шаги 2 и 3.
Загрузите веб-часть socialComment.dwp в Коллекцию веб-частей.

Чтобы добавить веб-часть «Панель заметок»

Выберите в меню Вставка пункт Веб-часть и добавьте веб-часть Панель заметок в то место на странице, где пользователи должны будут при желании писать свои комментарии.

Примечание
Чтобы использовать веб-часть Панель заметок, включите Приложение-службу профилей пользователей и сделайте ее доступной на сервере. Все пользователи данного сайта должны иметь разрешение профиля UseSocialFeatures.

Связанные видеоклипы

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

Добавьте на страницу код JavaScript для принудительной вставки свойства ключевых слов видео в URL-адрес страницы. Этот код проверяет наличие параметра RelatedKeywords в текущем URL-адресе. Если параметр не найден, используется значение свойства Keywords() из объекта DataFormWebPart, и страница перезагружается.

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

В SharePoint Designer 2010 выберите в меню Вставка пункт Веб-часть, чтобы добавить на страницу экземпляр объекта ContentByQueryWebPart и включить запрос queryString. Веб-часть использует значение параметра RelatedKeywords.
Настройте Запрос для использования атрибута queryStringparameters из URL-адреса. Одной из новых возможностей веб-части «Контент по запросу» является динамическое принятие параметров query на основе параметров строки запроса, содержащихся в URL-адресе. Эту возможность можно использовать для управления связанными видео, поскольку свойство RelatedKeywords URL-адреса, устанавливаемое с помощью JavaScript, содержит управляемые ключевые слова для фильтрации.
В поле Показать элементы из следующего списка задайте /Видео.
В поле Корпоративные ключевые слова в разделе Дополнительные фильтры задайте [PageQueryString:RelatedKeywords].