Медиа проигрыватель

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

Описание player

Начиная с версии 17.0.2 модуля Управление структурой этот тип плеера рекомендуется заменить в настройках компонента на новый плеер videojs.

Поддерживает проигрывание плейлистов, имеет большое количество настроек внешнего вида плеера. Компонент является стандартным и входит в дистрибутив модуля.

В визуальном редакторе компонент расположен по пути: Контент > Медиа > Медиа проигрыватель.

Компонент относится к модулю Информационные блоки.

Внимание! Компонент поддерживает два режима настройки: простой и расширенный. Расширенный предоставляет более обширные средства настройки.

Упрощенный режим

Поле

Параметр

Описание

Основные настройки

Тип плеера

PLAYER_TYPE

Указывается тип плеера:

Определить автоматически - если необходимо проигрывать файлы разных форматов;
video.js - поддерживает форматы FLV7 video, FLV8 video и другие форматы; начиная с версии 17.0.2 модуля Управление структурой, этот тип плеера рекомендуется выбирать в качестве плеера по умолчанию в настройках компонента. До версии 17.0.2 использовался компонент Проигрыватель HTML5 / Flash
HTML5 / Flash плеер - поддерживает форматы FLV7 video, FLV8 video и другие форматы.;
WMV Плеер (sound) - поддерживает форматы wmv, wma. Для работы WMV плеера необходимо установить Microsoft Silverlight.

Путь к списку воспроизведения

PATH

Указывается путь к файлу для проигрывания или к списку воспроизведения. Следует задавать полный путь к файлу от корня сайта. Также можно указать ссылку на видео с сайта YouTube.

Способ указания размеров

SIZE_TYPE

Указываются либо Абсолютные размеры Станут доступны для заполнения следующие поля:

Ширина	WIDTH	Указывается ширина окна плеера в пикселях (px), вместе со списком воспроизведения, если проигрывается плей-лист.
Высота	HEIGHT	Указывается высота окна плеера в пикселях (px), вместе со списком воспроизведения, если проигрывается плей-лист.

плеера в пикселях (px), либо выбирается способ Вписать в контейнер (размеры плеера будут ограничиваться размерами контейнера).

Настройки воспроизведения

Автоматически начать проигрывать

AUTOSTART

[Y|N] При отмеченной опции проигрывание медиафайла(ов) будет начато сразу после загрузки страницы.

Настройки повторения

REPEAT

Указывается вариант повтора при проигрывании медиафайла(ов) или списка воспроизведения:

не повторять (none);
возпроизвести список один раз (list);
повторять файл/список постоянно (always);
повторять один файл в списке (single).

Уровень громкости в процентах от максимального

VOLUME

Указывается уровень громкости звука в процентах от максимального заданного в системе.

Дополнительные настройки

Начинать загрузку видео сразу

PRELOAD

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

Показывать панель управления

SHOW_CONTROLS

[Y|N] При отмеченной опции будет отображаться панель управления плеером.

Скрыть плейлист

PLAYLIST_HIDE

[Y|N] При отмеченной опции плеер будет скрыт.

Размер списка воспроизведения в пикселях

PLAYLIST_SIZE

Задается размер (высота или ширина) списка воспроизведения в пикселях (px) в зависимости от его расположения.

Количество строк в списке воспроизведения

PLAYLIST_NUMBER

Задается необходимое количество строк в списке воспроизведения.

Расширенный режим настройки компонента

ADVANCED_MODE_SETTINGS

[Y|N] При отмеченной опции открывается полный набор настроек компонента. Опция предназначена для опытных пользователей. Позволяет расширенно настроить компонент. Если отключить эту опцию, то редакторы сайта смогут размещать медиафайлы в упрощенном режиме, но установленные расширенные настройки будут действовать.

Расширенный режим

Поле

Параметр

Описание

Основные настройки

Тип плеера

PLAYER_TYPE

Указывается тип плеера:

Определить автоматически (auto) - если необходимо проигрывать файлы разных форматов;
video.js - поддерживает форматы FLV7 video, FLV8 video и другие форматы; начиная с версии 17.0.2 модуля Управление структурой, этот тип плеера рекомендуется выбирать в качестве плеера по умолчанию в настройках компонента. До версии 17.0.2 использовался компонент Проигрыватель HTML5 / Flash
HTML5 / Flash плеер (flv) - HTML5 / Flash плеер;
WMV Плеер (wmv) - WMV плеер. Для работы WMV плеера необходимо установить Microsoft Silverlight.

Использовать список воспроизведения

USE_PLAYLIST

[Y|N] При отмеченной опции будет использоваться список воспроизведения, при этом необходимо настроить параметры:

Путь к списку воспроизведения	PATH	Указывается путь к списку воспроизведения. Задается полный путь к файлу от корня сайта либо только имя файла, если он расположен в текущей директории. Также можно указать ссылку на видео с сайта YouTube.
Cписок воспроизведения	PLAYLIST_DIALOG	Параметр позволяет создать/отредактировать список воспроизведения.
Использовать список воспроизведения как альтернативные версии файла	USE_PLAYLIST_AS_SOURCES	При использовании этой опции html5-плеер пытается проиграть все ролики из списка по порядку и запускает первый, который ему удалось проиграть. (Стандартная логика множественных тегов <source> внутри <video>.)

Путь к списку воспроизведения (PATH), Список воспроизведения (PLAYLIST_DIALOG) и Использовать список воспроизведения как альтернативные версии файла (USE_PLAYLIST_AS_SOURCES)

Способ указания размеров

SIZE_TYPE

Указываются либо Абсолютные размеры Станут доступны для заполнения следующие поля:

Ширина	WIDTH	Указывается ширина окна плеера в пикселях (px), вместе со списком воспроизведения, если проигрывается плей-лист.
Высота	HEIGHT	Указывается высота окна плеера в пикселях (px), вместе со списком воспроизведения, если проигрывается плей-лист.

Внешний вид, общие настройки для автоматически определяемого типа плеера и плеера Video.js

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

PREVIEW

Указывается путь к изображению, которое будет отображаться внутри плеера до начала воспроизведения. Можно использовать следующие варианты:

Ссылка на файл из структуры;
Картинка из медиатеки;
Публичная ссылка на файл на диске;
Ссылка на картинку в облаке (абсолютный путь с http:// или https://);
Ссылка на картинку на другом сайте (абсолютный путь с http:// или https://).

Показывать панель управления

SHOW_CONTROLS

При отмеченной опции будет отображаться панель управления плеером.

Скрыть плейлист

PLAYLIST_HIDE

При отмеченной опции плейлист будет скрыт.

Размер списка воспроизведения в пикселях

PLAYLIST_SIZE

Задается размер (высота или ширина) списка воспроизведения в пикселях (px) в зависимости от его расположения.

Количество строк в списке воспроизведения

PLAYLIST_NUMBER

Задается необходимое количество строк в списке воспроизведения.

Путь к папке со скинами

SKIN_PATH

Указывается путь к папке со скинами Flash плеера. Пользовательские скины должны храниться в директории, не затрагиваемой системой обновлений. Можно использовать javascript-файлы в папке скина.

Скин

SKIN

Указывается скин Flash плеера. Стандартный скин Flash плеера доступен в любом случае.

Внешний вид, общие настройки для плеера HTML5 / Flash

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

PREVIEW

Ссылка на файл из структуры;
Картинка из медиатеки;
Публичная ссылка на файл на диске;
Ссылка на картинку в облаке (абсолютный путь с http:// или https://);
Ссылка на картинку на другом сайте (абсолютный путь с http:// или https://).

Путь к папке со скинами

SKIN_PATH

Скин

SKIN

Указывается скин Flash плеера. Стандартный скин Flash плеера доступен в любом случае.

Расположение панели управления

CONTROLBAR

Указывается расположение панели управления плеера:

внизу (bottom) - снизу окна просмотра;
поверх (over) - всплывает поверх окна просмотра;
не показывать (none) - панель управления будет скрыта.

Режим окна (WMode)

WMODE

Указывается режим окна Flash плеера:

Обычный (window) - медиафайл будет проигрываться на странице в собственном прямоугольном окне. Этот вариант дает наибольший выигрыш в скорости воспроизведения анимации;
Непрозрачный (opaque) - медиафайл будет помещен на задний план страницы;
Прозрачный (transparent) - фон страницы будет "проглядывать" через все прозрачные места медиафайла при проигрывании. Этот вариант может замедлить скорость воспроизведения анимации.

Расположение списка воспроизведения

PLAYLIST

Указывается расположение списка воспроизведения:

внизу - снизу окна просмотра;
справа - список воспроизведения будет показан в правой части окна плеера;
не показывать - панель управления будет скрыта.

Путь к изображению авторского знака

LOGO

Задается путь к рисунку, который будет использован как авторский знак в окне видео или аудио файла. Можно задать полный путь к файлу от корня сайта либо только имя файла, если он расположен в текущей директории.

Ссылка на изображении авторского знака

LOGO_LINK

Задается ссылка перехода при клике на изображении авторского знака.

Расположение авторского знака

LOGO_POSITION

Задается расположение авторского знака:

Не показывать (none);
Внизу слева (bottom-left);
Вверху слева (top-left);
Вверху справа (top-right);
Внизу справа (bottom-right).

Внешний вид, общие настройки для плеера WMV

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

PREVIEW

Ссылка на файл из структуры;
Картинка из медиатеки;
Публичная ссылка на файл на диске;
Ссылка на картинку в облаке (абсолютный путь с http:// или https://);
Ссылка на картинку на другом сайте (абсолютный путь с http:// или https://).

Режим окна

WMODE_WMV

Указывается режим окна Wmv-плеера:

Обычный (window) - окно плеера будет убрано за HTML элементы страницы;
Прозрачный (windowless) - окно плеера будет отображаться непосредственно в клиентской области обозревателя или внутри специально созданного окна.

Показывать панель управления

SHOW_CONTROLS

[Y|N] При отмеченной опции будет отображаться панель управления плеером.

Формат списка воспроизведения

PLAYLIST_TYPE

Указывается формат списка воспроизведения:

ASX
ATOM
RSS
XSPF

Ширина картинки в списке воспроизведения

PLAYLIST_PREVIEW_WIDTH

Задается ширина картинки в списке воспроизведения в пикселях (px).

Высота картинки в списке воспроизведения

PLAYLIST_PREVIEW_HEIGHT

Задается высота картинки в списке воспроизведения в пикселях (px).

Расположение списка воспроизведения

PLAYLIST

Задается расположение списка воспроизведения:

Внизу (bottom) - список воспроизведения будет расположен снизу;
Справа (right) - список воспроизведения будет расположен справа.

Размер списка воспроизведения в пикселях

PLAYLIST_SIZE

Задается размер (высота или ширина) списка воспроизведения в пикселях (px) в зависимости от его расположения.

Показывать текущее время воспроизведения и оставшееся время

SHOW_DIGITS

[Y|N] При отмеченной опции будет показано текущее и оставшееся время воспроизведения ролика.

Цвет фона панели управления

CONTROLS_BGCOLOR

Указывается код цвета для фона панели управления плеера.

Цвет элементов управления

CONTROLS_COLOR

Указывается код цвета для элементов управления плеера.

Цвет элементов управления при наведении указателя мыши

CONTROLS_OVER_COLOR

Указывается код цвета для элементов управления плеера при наведении указателя мыши.

Цвет экрана

SCREEN_COLOR

Указывается код цвета для экрана плеера.

Настройки воспроизведения для автоматически определяемого типа плеера и плеера Video.js

Автоматически начать проигрывать

AUTOSTART

[Y|N] При отмеченной опции проигрывание медиафайла(ов) будет начато сразу после загрузки страницы.

Автоматически начинать проигрывать при появлении плеера на экране

AUTOSTART_ON_SCROLL

При отмеченной опции проигрывание медиафайла(ов) будет начато только после попадания плеера в поле зрения пользователя. Видео запускается автоматически только один раз. При автоматическом запуске звук выключается, включается только при первом взаимодействии с плеером.

Уровень громкости в процентах от максимального

VOLUME

Указывается уровень громкости звука в процентах от максимального заданного в системе.

Отключать звук при старте

MUTE

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

Скорость воспроизведения

PLAYBACK_RATE

Указывается число от 1 до 3, которое будет множителем скорости воспроизведения видео. Не работает для flv-файлов.
При расширенном режиме настроек компонента.

Настройки воспроизведения для плеера HTML5 / Flash

Автоматически начать проигрывать

AUTOSTART

[Y|N] При отмеченной опции проигрывание медиафайла(ов) будет начато сразу после загрузки страницы.

Автоматически начинать проигрывать при появлении плеера на экране

AUTOSTART_ON_SCROLL

Уровень громкости в процентах от максимального

VOLUME

Указывается уровень громкости звука в процентах от максимального заданного в системе.

Отключать звук при старте

MUTE

Настройки повторения

REPEAT

Указывается вариант повтора при проигрывании медиафайла(ов) или списка воспроизведения:

не повторять (none);
возпроизвести список один раз (list);
повторять файл/список постоянно (always);
повторять один файл в списке (single).

Перемешать список воспроизведения

SHUFFLE

[Y|N] При отмеченной опции элементы списка воспроизведения будут проиграны в случайном порядке. Внешнее отображение списка изменено не будет.

Настройки воспроизведения для плеера WMV

Автоматически начать проигрывать

AUTOSTART

[Y|N] При отмеченной опции проигрывание медиафайла(ов) будет начато сразу после загрузки страницы.

Автоматически начинать проигрывать при появлении плеера на экране

AUTOSTART_ON_SCROLL

Уровень громкости в процентах от максимального

VOLUME

Указывается уровень громкости звука в процентах от максимального заданного в системе.

Настройки повторения

REPEAT

Указывается вариант повтора при проигрывании медиафайла(ов) или списка воспроизведения:

не повторять (none);
возпроизвести список один раз (list);
повторять файл/список постоянно (always);
повторять один файл в списке (single).

Дополнительные настройки для автоматически определяемого типа плеера и плеера Video.js

Mime-type файла

TYPE

В поле можно в явном виде указать mime-type, если ссылка на php-скрипт, например.

Начинать загрузку видео сразу

PRELOAD

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

Расширенный режим настройки компонента

ADVANCED_MODE_SETTINGS

Идентификатор плеера

PLAYER_ID

Указывается идентификатор для плеера для дальнейшего обращения к объекту плеера из JavaScript.

Дополнительные настройки для плеера HTML5 / Flash

Mime-type файла

TYPE

В поле можно в явном виде указать mime-type, если ссылка на php-скрипт, например.

Расширенный режим настройки компонента

ADVANCED_MODE_SETTINGS

Идентификатор плеера

PLAYER_ID

Указывается идентификатор для плеера для дальнейшего обращения к объекту плеера из JavaScript.

Список подключаемых плагинов

PLUGINS

Указываются подключаемые к flash-плееру плагины. При выборе данной опции становится активным дополнительное поле.

Параметры плагина [название плагина]

PLUGINS_[название плагина]

Указываются дополнительные параметры подключаемых к flash-плееру плагинов.

Поле доступно, если в Списке подключаемых плагинов указан какой-либо плагин.

Дополнительные переменные Flashvars

ADDITIONAL_FLASHVARS

Указываются дополнительные переменные для flash-плеера.

Начать проигрывать с элемента в списке

START_ITEM

Указывается номер элемента списка воспроизведения, с которого начать проигрывать. Элементы нумеруются с нуля.

Размер буфера в секундах

BUFFER_LENGTH

Указывается сколько секунд воспроизведения ролика сохранять в буфере обмена, прежде чем начать проигрывать. Рекомендуется для медленного трафика.

Разрешить проигрывание swf-файлов (не рекомендуется)

ALLOW_SWF

[Y|N] При отмеченной опции будет разрешено проигрывание файлов формата swf. Не рекомендуется использовать в силу высокой степени опасности XSS-атаки через подключаемый файл.

Дополнительные настройки для плеера WMV

Mime-type файла

TYPE

В поле можно в явном виде указать mime-type, если ссылка на php-скрипт, например.

Расширенный режим настройки компонента

ADVANCED_MODE_SETTINGS

Идентификатор плеера

PLAYER_ID

Указывается идентификатор для плеера для дальнейшего обращения к объекту плеера из JavaScript.

Размер буфера в секундах

BUFFER_LENGTH

Ссылка для скачивания ролика

DOWNLOAD_LINK

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

Открывать ссылку в

DOWNLOAD_LINK_TARGET

Указывается в каком окне браузера открывать ссылку для скачивания: в текущем (_self) или в новом (_blank).

Дополнительные переменные Silverlight

ADDITIONAL_WMVVARS

Указываются дополнительные переменные для WMV плеера.

Создание/редактирование
списка воспроизведения

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

Для создания списка воспроизведения необходимо указать в поле Путь к списку воспроизведения имя нового списка и нажать кнопку Изменить в поле Список воспроизведения. Откроется окно Создание списка воспроизведения:

Кнопка Добавить элемент служит для добавления элементов списка воспроизведения. По её нажатию нужно заполнить следующие поля:

Поле	Описание
Якорь	Инструмент для изменения положения пункта меню в общем порядке списка воспроизведения способом Drag & Drop.
Редактировать	Нажать для редактирования поля.
Название	Указывается название медиафайла, как оно будт отображаться в общем списке.
Автор	Указывается имя автора медиафайла.
Время	Указывается время проигрывания медиафайла в формате MM:SS.
Путь к файлу	Задается путь к медиафайлу.
Путь к рисунку	Указывается путь к рисунку для анонса.
Стрелки	Инструмент для пошагового изменения положения медиафайла в общем списке.
Удалить	Инструмент для удаления элемента списка воспроизведения.

Обязательным является заполнение полей Название и Путь к файлу.

Примечание: вывод в списке воспроизведения всей введенной в полях информации зависит от используемого скина плеера. Не все скины поддерживают вывод полного объема введенной информации.

После заполнения полей необходимо сохранить внесенные изменения.

Редактирование списка воспроизведения выполняется аналогичным образом.

Пример вызова

<?$APPLICATION->IncludeComponent("bitrix:player","",Array(
	"PLAYER_TYPE" => "auto",
	"USE_PLAYLIST" => "Y",
	"PATH" => "playlist.xml",
	"PLAYLIST_DIALOG" => "",
	"PROVIDER" => "video",
	"STREAMER" => "",
	"WIDTH" => "400",
	"HEIGHT" => "400",
	"PREVIEW" => "",
	"FILE_TITLE" => "Вступление",
	"FILE_DURATION" => "305",
	"FILE_AUTHOR" => "Иван Иванов",
	"FILE_DATE" => "01.08.2010",
	"FILE_DESCRIPTION" => "Презентация продукта",
	"SKIN_PATH" => "/bitrix/components/bitrix/player/mediaplayer/skins",
	"SKIN" => "bitrix.swf",
	"CONTROLBAR" => "bottom",
	"WMODE" => "transparent",
	"PLAYLIST" => "right",
	"PLAYLIST_SIZE" => "180",
	"LOGO" => "/logo.png",
	"LOGO_LINK" => "http://ваш_сайт.com/",
	"LOGO_POSITION" => "bottom-left",
	"PLUGINS" => array("tweetit-1", "fbit-1"),
	"PLUGINS_TWEETIT-1" => "tweetit.link=",
	"PLUGINS_FBIT-1" => "fbit.link=",
	"ADDITIONAL_FLASHVARS" => "",
	"WMODE_WMV" => "window",
	"SHOW_CONTROLS" => "Y",
	"PLAYLIST_TYPE" => "xspf",
	"PLAYLIST_PREVIEW_WIDTH" => "64",
	"PLAYLIST_PREVIEW_HEIGHT" => "48",
	"SHOW_DIGITS" => "Y",
	"CONTROLS_BGCOLOR" => "FFFFFF",
	"CONTROLS_COLOR" => "000000",
	"CONTROLS_OVER_COLOR" => "000000",
	"SCREEN_COLOR" => "000000",
	"AUTOSTART" => "Y",
	"REPEAT" => "list",
	"VOLUME" => "90",
	"MUTE" => "N",
	"HIGH_QUALITY" => "Y",
	"SHUFFLE" => "N",
	"START_ITEM" => "1",
	"ADVANCED_MODE_SETTINGS" => "Y",
	"PLAYER_ID" => "",
	"BUFFER_LENGTH" => "10",
	"DOWNLOAD_LINK" => "http://ваш_сайт.com/video.flv",
	"DOWNLOAD_LINK_TARGET" => "_self",
	"ADDITIONAL_WMVVARS" => "",
	"ALLOW_SWF" => "Y",
  	)
);?>

Медиа проигрыватель

Описание player

Упрощенный режим

Расширенный режим

Создание/редактирование списка воспроизведения

Пример вызова

Смотрите также

Создание/редактирование
списка воспроизведения