Документация для разработчиков
Темная тема

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

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


Описание 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), вместе со списком воспроизведения, если проигрывается плей-лист.
плеера в пикселях (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 Указывается путь к папке со скинами Flash плеера. Пользовательские скины должны храниться в директории, не затрагиваемой системой обновлений. Можно использовать javascript-файлы в папке скина.
Скин 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 [Y|N] При отмеченной опции открывается полный набор настроек компонента. Опция предназначена для опытных пользователей. Позволяет расширенно настроить компонент. Если отключить эту опцию, то редакторы сайта смогут размещать медиафайлы в упрощенном режиме, но установленные расширенные настройки будут действовать.
Идентификатор плеераPLAYER_ID Указывается идентификатор для плеера для дальнейшего обращения к объекту плеера из JavaScript.
Дополнительные настройки для плеера HTML5 / Flash
Mime-type файлаTYPE В поле можно в явном виде указать mime-type, если ссылка на php-скрипт, например.
Расширенный режим настройки компонента ADVANCED_MODE_SETTINGS [Y|N] При отмеченной опции открывается полный набор настроек компонента. Опция предназначена для опытных пользователей. Позволяет расширенно настроить компонент. Если отключить эту опцию, то редакторы сайта смогут размещать медиафайлы в упрощенном режиме, но установленные расширенные настройки будут действовать.
Идентификатор плеераPLAYER_ID Указывается идентификатор для плеера для дальнейшего обращения к объекту плеера из JavaScript.
Список подключаемых плагиновPLUGINSУказываются подключаемые к flash-плееру плагины. При выборе данной опции становится активным дополнительное поле.
Параметры плагина [название плагина]PLUGINS_[название плагина]Указываются дополнительные параметры подключаемых к flash-плееру плагинов.

Поле доступно, если в Списке подключаемых плагинов указан какой-либо плагин.
Дополнительные переменные FlashvarsADDITIONAL_FLASHVARSУказываются дополнительные переменные для flash-плеера.
Начать проигрывать с элемента в списке START_ITEM Указывается номер элемента списка воспроизведения, с которого начать проигрывать. Элементы нумеруются с нуля.
Размер буфера в секундах BUFFER_LENGTH Указывается сколько секунд воспроизведения ролика сохранять в буфере обмена, прежде чем начать проигрывать. Рекомендуется для медленного трафика.
Разрешить проигрывание swf-файлов (не рекомендуется) ALLOW_SWF [Y|N] При отмеченной опции будет разрешено проигрывание файлов формата swf. Не рекомендуется использовать в силу высокой степени опасности XSS-атаки через подключаемый файл.
Дополнительные настройки для плеера WMV
Mime-type файлаTYPE В поле можно в явном виде указать mime-type, если ссылка на php-скрипт, например.
Расширенный режим настройки компонента ADVANCED_MODE_SETTINGS [Y|N] При отмеченной опции открывается полный набор настроек компонента. Опция предназначена для опытных пользователей. Позволяет расширенно настроить компонент. Если отключить эту опцию, то редакторы сайта смогут размещать медиафайлы в упрощенном режиме, но установленные расширенные настройки будут действовать.
Идентификатор плеера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",
  	)
);?>


Пользовательские комментарии

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

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
0
Антон Царук
В настройках свойства инфоблока типа "Видео" нет жесткой настройки ширины и высоты проигрывателя. Эти параметры выставляются уже непосредственно при добавлении элемента инфоблока для каждого видео. Это крайне неудобно, так как чаще всего под видео в дизайне определяется строго заданная область. А получается, что юзер при добавлении видео может задать ему размер, например, 1000 пикселей, и весь дизайн поедет...

Решение есть: использовать параметры "Дополнительные переменные Flashvars" и "Дополнительные переменные Silverlight" в настройках свойства типа "Видео". Для этого укажите в них следующее:
Код
width=300
height=200

Каждый параметр с новой строчки ОБЯЗАТЕЛЬНО.

Такой подход навсегда закрепит за видео нужные Вам размеры.
0
Роберт Басыров
Если необходимо вставить видео в инфоблок.
http://dev.1c-bitrix.ru/community/blogs/howto/435.php
© «Битрикс», 2001-2024, «1С-Битрикс», 2024
Наверх