Comparing video clips

This section describes how to compare two videos, how to make them start and pause simultaneously, and how to put multiple videos on a page.

Note

You can add media files (audio files, videos, images) from your own server, a cloud storage like Google Cloud, Amazon AWS, or Yandex Cloud.

Two videos side-by-side

To place two videos next to each other, you can use the layout.side-by-side component. Add components with video (view.video) to the items property, and fields for responses to the controls property.

Note

Unlike other components, layout.side-by-side has options allowing you to hide or display any of the elements in items.

View example

Instead of layout.side-by-side, you can use other components, for example:

  • view.list: A list of any elements, vertical or horizontal.

  • layout.columns: A set of horizontal columns that you can put the videos in. As opposed to view.list, this component provides more options for column width setup.

Parallel playback of two videos

You can sync playback and pause for both videos.

To do this, add a button (view.action-button) that will trigger the action.play-pause action for both videos. To call two actions using one button (for each video), use the action.bulk component.

View example

You can also trigger playback using a hotkey. The button's shortcut will be shown on the button label.

Use plugin.hotkeys for this. To assign a shortcut to the button, do the same thing with the shortcut.

Tip

To call the same action from different parts of the code, put it in a separate variable inside vars. Then reference this variable using the $ref structure. For more information, see Reuse code.

View example

Compare multiple videos

In the examples below, you can add as many video components as you like using the items property.

View example

If you want to add multiple videos that a Toloker doesn't have to view at the same time, position them vertically using the view.list component. To make sure that the response selection buttons don't get lost, use the layout.sidebar component.

View example

Contact support

Last updated: August 2, 2023

Introduction
Getting started
Important tips
Useful recommendations
Working with Toloka
Projects
Pools
Tasks
Results
Project analysis
Toloka settings
Task interface
Template Builder
HTML/CSS/JS editor
Help and support
FAQTroubleshootingSupportGlossary