Битрикс.NET 3.0.12: Медиагалерея

Недавно в публичный доступ было выложено очередное обновление продукта "1С-Битрикс: Управление сайтом ASP.NET". В этом посте пойдет речь о новом API для вывода медиа-данных и о соответствующих компонентах.
[spoiler]
Серия компонентов мультимедиа - включает в себя JavaScript API для включения меда-проигрывателя в страницы, компонент bitrix:media.player в главном модуле и набор компонентов bitrix:media.gallery (bitrix:media.gallery, bitrix:media.gallery.element.detail, bitrix:media.gallery.element.list) в модуле "Инфоблоки".

Основной акцент при разработке API был сделан на повторное использование кода, независимость от серверной составляющей и абстракцию от типа проигрываемых медиа-файлов. Поэтому весь код внедрения медиаплеера в HTML страницу написан на JavaScript и может быть использован независимо от компонентов. Медиа-проигрыватель абстрагирован от формата проигрываемого файла: в зависимости от расширения файла-источника генерируется либо Flash, либо Silverlight проигрыватель. Проигрыватель способен воспроизводить файлы FLV, WMV, MP3, WMA, JPG, MP4 с кодеком H.264 и др.

Публичный JavaScript API представлен 2-мя классами Bitrix.MediaPlayer и Bitrix.MediaPlayerData:

• Bitrix.MediaPlayerData унифицирует некоторые настройки для различных типов проигрываемых файлов и предоставляет возможность задать индивидуальные настройки для конкретного типа проигрывателя.
• Bitrix.MediaPlayer является фасадом к механизмам генерации плеера, его настройки и управления.

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

#009900;"><#000000; font-weight: bold;">html>
#009900;"><#000000; font-weight: bold;">head>
	#009900;"><#000000; font-weight: bold;">title>Player Demo#009900;"><#66cc66;">/#000000; font-weight: bold;">title>
#009900;"><#66cc66;">/#000000; font-weight: bold;">head>
#009900;"><#000000; font-weight: bold;">body>
	#009900;"><#000000; font-weight: bold;">script #000066;">src#66cc66;">=#ff0000;">"/bitrix/js/Main/utils_net.js" #000066;">type#66cc66;">=#ff0000;">"text/javascript"><#66cc66;">/#000000; font-weight: bold;">script>
	#009900;"><#000000; font-weight: bold;">script #000066;">src#66cc66;">=#ff0000;">"/bitrix/controls/main/media.player/wmv/silverlight.js" #000066;">type#66cc66;">=#ff0000;">"text/javascript"><#66cc66;">/#000000; font-weight: bold;">script>
	#009900;"><#000000; font-weight: bold;">script #000066;">src#66cc66;">=#ff0000;">"/bitrix/controls/main/media.player/wmv/wmvplayer.js" #000066;">type#66cc66;">=#ff0000;">"text/javascript"><#66cc66;">/#000000; font-weight: bold;">script>
	#009900;"><#000000; font-weight: bold;">script #000066;">src#66cc66;">=#ff0000;">"/bitrix/controls/main/media.player/js/player.js" #000066;">type#66cc66;">=#ff0000;">"text/javascript"><#66cc66;">/#000000; font-weight: bold;">script>
 
	#009900;"><#000000; font-weight: bold;">div>
		#009900;"><#000000; font-weight: bold;">div #000066;">id#66cc66;">=#ff0000;">"player_container" ><#66cc66;">/#000000; font-weight: bold;">div>
	#009900;"><#66cc66;">/#000000; font-weight: bold;">div>
 
	#009900;"><#000000; font-weight: bold;">script #000066;">type#66cc66;">=#ff0000;">"text/javascript">
	var data = Bitrix.MediaPlayerData.create({
		path: "/video.flv"
	});
 
	var player = Bitrix.MediaPlayer.create(
		'player1', 
		'player_container', 
		data
	); 
 
	player.activate();
 
	// Или одной строкой: 
	// Bitrix.MediaPlayer.create('player1','player_container',
	//     Bitrix.MediaPlayerData.create({sourcefilepath: "/video.flv"})).activate();
	#009900;"><#66cc66;">/#000000; font-weight: bold;">script>
#009900;"><#66cc66;">/#000000; font-weight: bold;">body>
#009900;"><#66cc66;">/#000000; font-weight: bold;">html>

Плеер имеет множество настроек, которые не зависят от конкретного типа проигрывателя, например:

#003366; font-weight: bold;">var data #339933;">= Bitrix.#660066;">MediaPlayerData.#660066;">create#009900;">(#009900;">{
	file#339933;">:#3366CC;">"/video.flv"#339933;">, #006600; font-style: italic;">// Ссылка на источник медиа данных (локальный файл, ссылка на YouTube)
	type#339933;">:#3366CC;">"Auto"#339933;">, #006600; font-style: italic;">// Тип плеера: Auto, FLV, WMV
	link#339933;">:#3366CC;">"/video_download.avi"#339933;">, #006600; font-style: italic;">// Ссылка на загрузку медиа-файла
	linktarget#339933;">:#3366CC;">"_self"#339933;">, #006600; font-style: italic;">// Как открывать ссылку для загрузки медиа-файла
	preview#339933;">:#3366CC;">"/preview.jpg"#339933;">, #006600; font-style: italic;">// Сcылка на изображение предпросмотра
 
	logoimagefilepath#339933;">:#3366CC;">"/watermark.png"#339933;">, #006600; font-style: italic;">// Ссылка на изображение для водяного знака
	abouttext#339933;">:#3366CC;">"1С-Битрикс: Медиа-плеер"#339933;">, #006600; font-style: italic;">// About-текст
	aboutlink#339933;">:#3366CC;">"http://www.1c-bitrix.ru?r1=mplayer&r2=video" #006600; font-style: italic;">// About-ссылка
 
	stretching#339933;">:#3366CC;">"Proportionally"#339933;">, #006600; font-style: italic;">// Режим растягивания изображения: None, Proportionally, Disproportionally, Fill
	bufferlength#339933;">: #CC0000;">10#339933;">, #006600; font-style: italic;">// Размер буфера
 
	controlscolor#339933;">:#3366CC;">"000000"#339933;">, #006600; font-style: italic;">// Цвет элементов панели управления плеера
	controlsovercolor#339933;">:#3366CC;">"000000"#339933;">, #006600; font-style: italic;">// Цвет подсветки выделенных элементов панели управления плеера
	controlpanelbackgroundcolor#339933;">:#3366CC;">"FFFFFF"#339933;">, #006600; font-style: italic;">// Цвет панели управления
	screencolor#339933;">:#3366CC;">"000000"#339933;">, #006600; font-style: italic;">// Цвет фона экрана плеера
 
	width#339933;">: #CC0000;">425#339933;">, #006600; font-style: italic;">// Ширина плеера
	height#339933;">: #CC0000;">344#339933;">, #006600; font-style: italic;">// Высота плеера
 
	repeat#339933;">: #003366; font-weight: bold;">false#339933;">, #006600; font-style: italic;">// Повторять видео по окончании проигрывания
	autostart#339933;">: #003366; font-weight: bold;">false#339933;">, #006600; font-style: italic;">// Запускать видео при создании плеера
	fullscreen#339933;">: #003366; font-weight: bold;">true#339933;">, #006600; font-style: italic;">// Разрешить полноэкранный просмотр
 
	volume#339933;">: #CC0000;">90 #006600; font-style: italic;">// Начальный уровень громкости в процентах
#009900;">}#009900;">);

Кроме того, Flash и Silverlight проигрыватели имеют специфические параметры, начинающиеся соответственно с flv и wmv.

На базе этого API создан компонент bitrix:media.player, который позволяет настроить как общие, так и специфические для разных типов проигрывателей свойства. С помощью этого компонента удобно размещать видео-ролики на статических информационных страницах:



При помощи компонентов серии bitrix:media.gallery, которые также используют этот API можно организовать видеогалерею на базе инфоблоков:



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

Устанавливайте последнее обновление или скачивайте последний дистрибутив. Пробуйте и высказывайте Ваши замечания!