Сравнить видеоклипы
Обратите внимание
Документация на русском языке может быть устаревшей. Самые последние изменения доступны в документации на английском языке.
В этом разделе описано, как сравнить два видео, как сделать, чтобы они запускались и останавливались одновременно и как разместить больше двух видео на странице.
Примечание
Вы можете добавлять медиафайлы (аудио, видео, картинки) со своего сервера, Яндекс Диска или из облачных хранилищ, таких как Yandex Cloud, Google Cloud, Amazon AWS и т.п.
Два видео рядом (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.