Виджет "Видеоплеер" (с поддержкой тем)
Виджет "Видеоплеер" (с поддержкой тем) позволяет встраивать и воспроизводить видео в мэшапах. Видеоплеер поддерживает несколько опций, включая автовоспроизведение, добавление изображений пиктограмм, управление внешним видом элементов управления и многое другое. Это динамический виджет, который поддерживает темы для согласованного взаимодействия с пользователем.
 |
Видеоплеер доступен в виде виджета и веб-компонента, который можно настроить и импортировать из пакета SDK веб-компонентов ThingWorx.
|
Анатомия
1. Метка видеоплеера
2. Область видео
3. Предварительный просмотр пиктограммы
4. Управление плеером
Сочетания клавиш
В следующей таблице перечислены сочетания клавиш, которые можно использовать для взаимодействия с этим виджетом, сгруппированные по компонентам.
Компонент | Кнопка/элемент управления | Клавиши | Описание |
|---|---|---|---|
Навигация | Управляет навигацией между различными компонентами виджета. | TAB и SHIFT+TAB | Перемещение вперед и назад между подкомпонентами плеера. |
Плеер | Управление воспроизведением/остановкой | ПРОБЕЛ или ВВОД | Воспроизвести или остановить видео |
Столбик временной шкалы | СТРЕЛКА ВВЕРХ или ВПРАВО | Перемотка на 10 секунд вперед | |
СТРЕЛКА ВНИЗ или ВЛЕВО | Перемотка на 10 секунд назад | ||
PAGE UP | Перемотка на 1 минуту вперед | ||
PAGE DOWN | Перемотка на 1 минуту назад | ||
HOME | Перейти в начало видео | ||
END | Перейти в конец видео | ||
Аудио | Кнопка отключения звука | ПРОБЕЛ или ВВОД | Включение или выключение звука видео |
Ползунок громкости | СТРЕЛКА ВВЕРХ или ВПРАВО | Увеличение громкости на 5 % | |
СТРЕЛКА ВНИЗ или ВЛЕВО | Уменьшение громкости на 5 % | ||
HOME | Установка громкости 0 % | ||
END | Установка громкости 100 % | ||
Загрузка | Кнопка "Загрузить" | ПРОБЕЛ или ВВОД | Загрузить видеофайл |
Полный экран | Кнопка "Полный экран" | ПРОБЕЛ или ВВОД | Вход в полноэкранный режим |
ESCAPE | Выход из полноэкранного режима и возврат в оконный режим |
Настройка компоновки элементов управления плеером
Используйте свойство OverlayControls, чтобы настроить положение элементов управления видеоплеера. Если для этого свойства задано значение true, элементы управления отображаются для содержимого видео. Если задано false, элементы управления отображаются под видео. Наложение элементов управления уменьшает объем вертикального пространства, используемого виджетом.
Добавление пиктограммы
Используйте свойство Thumbnail, чтобы отобразить изображение предварительного просмотра перед запуском видео. Изображение будет появляться вместо видео до тех пор, пока пользователь не нажмет кнопку воспроизведения. Эта функция полезна для предоставления контекста, фирменной символики или предварительного просмотра содержимого. При начале воспроизведения пиктограмма заменяется видео.
Конфигурирование настроек воспроизведения
Можно включить свойство AutoPlay для автоматического запуска воспроизведения видео при загрузке мэшапа. Если свойство AutoPlay включено, звук видео по умолчанию отключается. Чтобы воспроизводить звук, пользователи должны вручную включить звук видео после начала его воспроизведения. Для настройки звука можно включить или выключить свойство Mute виджета или создать привязки для динамического управления звуком.
Добавление кнопки загрузки
Используйте свойство EnableDownload, чтобы отобразить кнопку загрузки в проигрывателе. Если это свойство включено, оно позволяет пользователям загружать видео на основе URL-адреса. Используйте эту функцию для поддержки просмотра в автономном режиме или для совместного использования видеоконтента.
| | Если загрузка заблокирована из-за настройки безопасности, например правил CSP, отображается сообщение. |
Конфигурирование правил CSP
Чтобы обеспечить правильную работу виджета "Видеоплеер" при включенных правилах политики безопасности содержимого (CSP) в среде ThingWorx, необходимо обновить директиву media-src, чтобы включить внешние домены, из которых загружается видео. Например:
media-src 'self' https://cdn.com https://video-location.com;
Дополнительные сведения о настройке правил CSP см. в разделе Политика безопасности содержимого.
Свойства виджета
В следующей таблице перечислены свойства виджета.
Имя свойства | Описание | Базовый тип | Значение по умолчанию | Доступно для привязки? (Д/Н) | Локализуемое? (Д/Н) |
|---|---|---|---|---|---|
Label | Указывает текст метки виджета. | STRING | Д | Д | |
LabelAlignment | Выравнивает текст метки по левому краю, по правому краю или по центру виджета. | STRING | left | Н | Н |
VideoURL | Указывает URL-адрес воспроизводимого видео. | NUMBER | Нет | Д | Н |
EnableDownload | Добавляет в элементы управления плеера кнопку загрузки, позволяющую пользователям загружать видео. | BOOLEAN | False | Д | Н |
Thumbnail | Указывает изображение пиктограммы для видео. | NUMBER | Нет | Д | Н |
AutoPlay | Определяет, будет ли видео воспроизводиться автоматически при загрузке виджета. Если включена функция AutoPlay, видео воспроизводится без звука. | BOOLEAN | False | Н | Н |
Mute | Отключает звук видео. | BOOLEAN | False | Д | Н |
OverlayControls | Накладывает элементы управления проигрывателя на видео, уменьшая пространство, занимаемое проигрывателем в компоновке. Элементы управления отображаются только при наведении указателя на видео. Если отключено, элементы управления плеером видимы все время. | BOOLEAN | False | Д | Н |
Width | Указывает ширину видеоплеера. | NUMBER | 480 | Д | Н |
Height | Указывает высоту видеоплеера. | NUMBER | 314 | Д | Н |
CustomClass | Определяемый пользователем класс CSS для применения к верхнему разделу виджета. Можно ввести несколько классов, разделенных пробелами. | NUMBER | Нет | Д | Н |
TabSequence | Указывает порядок обхода виджета. | NUMBER | 0 | Н | Н |
Свойства проверки
В следующей таблице перечислены свойства проверки виджета.
Имя свойства | Описание | Базовый тип | Значение по умолчанию | Доступно для привязки? (Д/Н) | Локализуемое? (Д/Н) |
|---|---|---|---|---|---|
PlaybackErrorMessage | Сообщение, отображаемое, если видеофайл заблокирован из-за правил CSP. | STRING | Лексема: [[Widgets.VideoPlayer.Validation.PlaybackErrorMessage]] Значение: Ошибка воспроизведения | Д | Д |
PlaybackErrorMessageDetails | Сведения, отображаемые под сообщением, если видеофайл заблокирован из-за правил CSP. | STRING | [[Widgets.VideoPlayer.Validation.PlaybackErrorMessageDetails]] Убедитесь, что поддерживается формат видео и установлено сетевое соединение, затем повторите попытку. | Д | Д |
NetworkErrorMessage | Сообщение, отображаемое, если видео не загружается из-за ошибки сети. | STRING | [[Widgets.VideoPlayer.Validation.NetworkErrorMessage]] Проблема с сетью | Д | Д |
NetworkErrorMessageDetails | Сведения, отображаемые под сообщением, если видео не загружается из-за ошибки сети. | STRING | [[Widgets.VideoPlayer.Validation.NetworkErrorMessageDetails]] Проверьте сетевое соединение и повторите попытку. | Д | Д |
DownloadBlockedMessage | Сообщение, отображаемое, если невозможно загрузить видео из-за проблемы с разрешением на доступ. | STRING | [[Widgets.VideoPlayer.Validation.DownloadBlockedMessage]] Загрузка заблокирована | Д | Д |
DownloadBlockedMessageDetails | Сведения, отображаемые под сообщением, если невозможно загрузить видео из-за проблемы с разрешением на доступ. | STRING | [[Widgets.VideoPlayer.Validation.DownloadBlockedMessageDetails]] Загрузка заблокирована платформой. Убедитесь, что правила CSP платформы сконфигурированы правильно, и повторите попытку. | Д | Д |
PlaybackBlockedMessage | Сообщение, отображаемое, если видеофайл заблокирован из-за правил CSP. | STRING | [[Widgets.VideoPlayer.Validation.PlaybackBlockedMessage]] Это содержимое заблокировано | Д | Д |
PlaybackBlockedMessageDetails | Сведения, отображаемые под сообщением, если видеофайл заблокирован из-за правил CSP. | STRING | [[Widgets.VideoPlayer.Validation.PlaybackBlockedMessageDetails]] Обратитесь к владельцу сайта, чтобы устранить эту проблему. | Д | Д |
ValidationFailureIcon | Указывает значок, отображаемый при сбое проверки. | STRING | cds:icon_error | Н | Н |