Сравнить видеоклипы

Два видео рядом (side-by-side)

Чтобы расположить рядом два видео, можно использовать компонент layout.side-by-side. Компоненты с видео (view.video) добавьте в свойство items, а поля для ответов в свойство controls.

Примечание. В отличие от других компонентов, у layout.side-by-side есть переключатели, которые позволяют скрыть или отобразить любой из элементов в items.

Посмотреть пример в песочнице.

Вместо layout.side-by-side вы можете использовать другие компоненты, например:
  • view.list — список любых элементов, вертикальный или горизонтальный.
  • layout.columns — набор горизонтальных колонок, в которые можно поместить видео. В отличие от view.list, этот компонент дает больше опций для настройки ширины колонок.

Одновременное воспроизведение двух видео

Вы можете сделать, чтобы оба видео воспроизводились и останавливались одновременно.

Для этого добавьте кнопку (view.action-button), которая будет вызывать действие action.play-pause для обоих видео. Чтобы по кнопке вызвать сразу два действия (для каждого видео), используйте компонент action.bulk.

Посмотреть пример в песочнице.

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

Для этого используйте плагин plugin.hotkeys. Чтобы привязать горячую клавишу к кнопке, необходимо выполнить по горячей клавише то же самое действие.

Совет. Чтобы вызвать одно и то же действие из разных частей кода, вынесите его в отдельную переменную в vars, а затем ссылайтесь на него с помощью конструкции $ref. Подробнее об этом в разделе Переиспользуйте код.

Посмотреть пример в песочнице

Сравнить несколько видео

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

Посмотреть пример в песочнице.

Если вы хотите добавить много разных видео, которые не надо смотреть одновременно, лучше расположить их вертикально с помощью компонента view.list. А чтобы кнопки для выбора ответа не потерялись, можно использовать компонент layout.sidebar.

Посмотреть пример в песочнице.