Проигрыватель videojs

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

Описание videojs

Начиная с версии 17.0.2 модуля Управление структурой, этот тип плеера рекомендуется выбирать в качестве плеера по умолчанию в настройках компонента. До версии 17.0.2 использовался компонент Проигрыватель HTML5 / Flash.

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

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

Компонент относится к модулю Управление структурой.

Для настройки компонента используются следующие параметры.

Параметры

Основные настройки
Поле	Описание
Тип плеера	Указывается тип плеера: Определить автоматически - для wmv/wma файлов будет подключен WMV плеер, а для всех остальных файлов и ссылок - video.js. Так как новый плеер полностью перекрывает функционал старого HTML5 / Flash плеера, то при выборе этого плеера администратор увидит предупреждающее сообщение с просьбой перейти на новый плеер.; HTML5 / Flash плеер - HTML5 / Flash плеер; WMV Плеер - WMV плеер. Для работы WMV плеера необходимо установить Microsoft Silverlight.
Использовать список воспроизведения	При отмеченной опции необходимо будет указать путь к файлу формата xml, в котором будет находиться плейлист. Формат плейлистов по сравнению с HTML5 / Flash плеером не изменился, однако были убраны поля Автор видео и Продолжительность ролика. Пример создания плейлиста - в конце статьи. При расширенном режиме настроек компонента.
Путь к файлу	Указывается путь к файлу для проигрывания. В качестве пути можно указать: путь к файлу из структуры; ролик из медиатеки; ссылку на youtube (абсолютный путь c http:// или https://); ссылку на vimeo.com (абсолютный путь c http:// или https://); ссылку на потоковое видео формата m3u8/ts (абсолютный путь c http:// или https://); публичную ссылку на файл на диске; ссылку на файл в облаке (абсолютный путь c http:// или https://); ссылку на файл на другом сайте (абсолютный путь c http:// или https://).
Способ указания размеров	Абсолютные размеры - необходимо ввести размеры блока в пикселях в поля Ширина и Высота. В эти размеры включены размеры плейлиста и кнопок управления плеером. Размеры по умолчанию - 400х300 пикселей; Вписать в контейнер - размер тега video пример размеры родительского контейнера. Для адаптивного отображения компонента на различных устройствах рекомендуется использовать этот вариант; Подстроиться под размеры видео - размер тега video будет соответствовать разрешению ролика. Эта опция недоступна при использовании плейлиста.
Внешний вид, общие настройки
Путь к рисунку для предварительного просмотра	Указывается путь к изображению, которое будет отображаться внутри плеера до начала воспроизведения. Можно использовать следующие варианты: Ссылка на файл из структуры; Картинка из медиатеки; Публичная ссылка на файл на диске; Ссылка на картинку в облаке (абсолютный путь с http:// или https://); Ссылка на картинку на другом сайте (абсолютный путь с http:// или https://). При расширенном режиме настроек компонента.
Показывать панель управления	При отмеченной опции будет отображаться панель управления плеером. При расширенном режиме настроек компонента. При простом режиме опция находится в секции Дополнительные настройки
Путь к папке со скинами	Указывается путь к папке со скинами. Если скин включает в себя не только файл стиля, но и дополнительные файлы (картинки), то необходимо, чтобы файл стилей и папка назывались одинаково. При расширенном режиме настроек компонента.
Скин	Если был правильно указан путь к папке с пользовательскими скинами, то в этом поле можно будет выбрать ваш скин. При расширенном режиме настроек компонента.
Настройки воспроизведения
Автоматически начать проигрывать	При отмеченной опции проигрывание медиафайла(ов) будет начато сразу после загрузки страницы.
Автоматически начинать проигрывать при появлении плеера на экране	При отмеченной опции проигрывание медиафайла(ов) будет начато только после попадания плеера в поле зрения пользователя. Видео запускается автоматически только один раз. При автоматическом запуске звук выключается, включается только при первом взаимодействии с плеером.
Настройки повторения	Если вы используете плейлист - он будет зациклен по умолчанию. Если список воспроизведения не используется - можно включить или выключить повторение видео.
Уровень громкости в процентах от максимального	Указывается уровень громкости звука в процентах (от 0 до 100) от максимального заданного в системе.
Отключать звук при старте	При отмеченной опции звук не будет воспроизводиться, включить его можно будет вручную в панели управления плеера. При расширенном режиме настроек компонента.
Время начала воспроизведения	Указывается место ролика в секундах, с которого должно начаться воспроизведение. Опция недоступна при работе с плейлистами, flv-файлами, роликами с vimeo и потоковым видео. При расширенном режиме настроек компонента.
Скорость воспроизведения	Указывается число от 1 до 3, которое будет множителем скорости воспроизведения видео. Не работает для flv-файлов. При расширенном режиме настроек компонента.
Дополнительные настройки
Mime-type файла	В поле можно в явном виде указать mime-type, если ссылка на php-скрипт, например.
Начинать загрузку видео сразу	При отмеченной опции браузер начнет скачивать ролик сразу после загрузки страницы, еще до начала его воспроизведения.
Расширенный режим настройки компонента	Включает отображение дополнительных настроек, скрытых по умолчанию.
Идентификатор плеера	Указывается идентификатор для плеера для дальнейшего обращения к объекту плеера из JavaScript.

Примеры использования

Вставка видео заданных размеров на страницу:

В поле Путь к файлу вставляем ссылку на файл (рекомендуется использовать ссылку на youtube видео или ссылку на файл формата mp4);
Способ указания размеров - абсолютные размеры, указываем требуемую ширину и высоту в пикселях;
Остальные настройки можно оставить по умолчанию.

Вывод плейлиста с аудио-файлами:

Ставим галочку в поле Расширенный режим настройки компонента;
Ставим галочку в поле Использовать плейлист;
В поле Путь к файлу плейлиста вставляем расположение файла списка воспроизведения (например, /upload/audio.xml);
Нажимаем кнопку Создать плейлист, заполняем названия файлов и пути к ним;
Способ указания размеров - абсолютные размеры, указываем требуемую ширину и высоту в пикселях (например, 600 на 100 пикселей);
Размер списка воспроизведения - устанавливаем размер списка воспроизведения. К примеру, 300 пикселей;
Количество строк в списке отображения - указываем количество строк, которое будет отображаться в списке воспроизведения. К примеру, 5 строк.

Пример xml-файла для списка воспроизведения:

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>
   <track>
      <title>1 bunny local
      <location>/upload/SampleVideo_360x240_5mb.mp4
      <image>
  </track>
   <track>
      <title>2 bunny web
      <location>http://techslides.com/demos/sample-videos/small.mp4
      <image>/upload/pexels-photo-286142.jpeg
   </track>
</trackList>
</playlist>