Сравнить видеоклипы
В этом разделе описано, как сравнить два видео, как сделать, чтобы они запускались и останавливались одновременно и как разместить больше двух видео на странице.
Два видео рядом (side-by-side)
Чтобы расположить рядом два видео, можно использовать компонент layout.side-by-side. Компоненты с видео (view.video) добавьте в свойство items, а поля для ответов в свойство controls.
items.Посмотреть пример в песочнице.
- view.list — список любых элементов, вертикальный или горизонтальный.
- layout.columns — набор горизонтальных колонок, в которые можно поместить видео. В отличие от view.list, этот компонент дает больше опций для настройки ширины колонок.
Одновременное воспроизведение двух видео
Вы можете сделать, чтобы оба видео воспроизводились и останавливались одновременно.
Для этого добавьте кнопку (view.action-button), которая будет вызывать действие action.play-pause для обоих видео. Чтобы по кнопке вызвать сразу два действия (для каждого видео), используйте компонент action.bulk.
Посмотреть пример в песочнице.
Вы также можете сделать воспроизведение по горячей клавише. Используемая горячая клавиша будет написана на кнопке.
Для этого используйте плагин plugin.hotkeys. Чтобы привязать горячую клавишу к кнопке, необходимо выполнить по горячей клавише то же самое действие.
vars, а затем ссылайтесь на него с помощью конструкции $ref. Подробнее об этом в разделе Переиспользуйте код.Сравнить несколько видео
В примерах выше в свойстве items вы можете добавить сколько угодно компонентов с видео.
Посмотреть пример в песочнице.
Если вы хотите добавить много разных видео, которые не надо смотреть одновременно, лучше расположить их вертикально с помощью компонента view.list. А чтобы кнопки для выбора ответа не потерялись, можно использовать компонент layout.sidebar.
