VideoComponent
Defined in: parser/types.ts:1365
The VideoComponent interface is used to define the properties of a video component. This component is used to render a video with optional controls.
Most often, video components will be used for trainings, and will have a forceCompletion field set to true. This will prevent the participant from moving on until the video has finished playing.
As such, the forceCompletion field is set to true by default, and the withTimeline field is set to false by default.
For example, to render a training video with a path of <study-name>/assets/video.mp4, you would use the following snippet:
{
"type": "video",
"path": "<study-name>/assets/video.mp4",
}
Extends​
Properties​
| Property | Type | Description | Inherited from | Defined in |
|---|---|---|---|---|
allowFailedTraining? | boolean | Controls whether the component should allow failed training. If present, will override the allow failed training setting in the uiConfig. | BaseIndividualComponent.allowFailedTraining | parser/types.ts:1076 |
clickToRecord? | boolean | Enables a click-and-hold microphone button instead of continuous recording. When true, audio is muted by default and is recorded only while the button is held. When false, recording starts immediately and can be paused/resumed via the microphone button. Defaults to false. | BaseIndividualComponent.clickToRecord | parser/types.ts:1080 |
correctAnswer? | Answer[] | The correct answer to the component. This is used for training trials where the user is shown the correct answer after a guess. | BaseIndividualComponent.correctAnswer | parser/types.ts:1028 |
description? | string | The description of the component. This is used to identify and provide additional information for the component in the admin panel. | BaseIndividualComponent.description | parser/types.ts:1032 |
enumerateQuestions? | boolean | Whether to prepend questions with their index (+ 1). This should only be used when all questions are in the same location, e.g. all are in the side bar. If present, will override the enumeration of questions setting in the uiConfig. | BaseIndividualComponent.enumerateQuestions | parser/types.ts:1084 |
forceCompletion? | boolean | Whether to force the video to play until the end. Defaults to true. | - | parser/types.ts:1370 |
helpTextPath? | string | The path to the help text file. This is displayed when a participant clicks help. Markdown is supported. If present, will override the help text path set in the uiConfig. | BaseIndividualComponent.helpTextPath | parser/types.ts:1048 |
instruction? | string | The instruction of the component. This is used to identify and provide additional information for the component in the admin panel. | BaseIndividualComponent.instruction | parser/types.ts:1044 |
instructionLocation? | ConfigResponseBlockLocation | The location of the instructions. If present, will override the instruction location setting in the uiConfig. | BaseIndividualComponent.instructionLocation | parser/types.ts:1046 |
meta? | Record<string, unknown> | The meta data for the component. This is used to identify and provide additional information for the component in the admin panel. | BaseIndividualComponent.meta | parser/types.ts:1030 |
nextButtonAlignment? | NextButtonAlignment | The horizontal alignment of the navigation action group. If present, will override the alignment setting in the uiConfig. | BaseIndividualComponent.nextButtonAlignment | parser/types.ts:1056 |
nextButtonAutoAdvanceTime? | number | The time in milliseconds after which the participant is automatically advanced to the next component without saving answers from the current component. | BaseIndividualComponent.nextButtonAutoAdvanceTime | parser/types.ts:1062 |
nextButtonAutoAdvanceWarningMessage? | string | The warning message shown before auto-advance. Include {seconds} to interpolate the remaining number and {unit} to interpolate second/seconds. | BaseIndividualComponent.nextButtonAutoAdvanceWarningMessage | parser/types.ts:1066 |
nextButtonAutoAdvanceWarningTime? | number | The time in milliseconds before auto-advance when the warning message is shown. Defaults to 30000. | BaseIndividualComponent.nextButtonAutoAdvanceWarningTime | parser/types.ts:1064 |
nextButtonDisableTime? | number | The time in milliseconds to wait before the next button is disabled. If present, will override the next button disable time setting in the uiConfig. | BaseIndividualComponent.nextButtonDisableTime | parser/types.ts:1060 |
nextButtonEnableTime? | number | The time in milliseconds to wait before the next button is enabled. If present, will override the next button enable time setting in the uiConfig. | BaseIndividualComponent.nextButtonEnableTime | parser/types.ts:1058 |
nextButtonLocation? | ConfigResponseBlockLocation | The location of the next button. If present, will override the next button location setting in the uiConfig. | BaseIndividualComponent.nextButtonLocation | parser/types.ts:1054 |
nextButtonText? | string | The text to display on the next button. If present, will override the next button text setting in the uiConfig. | BaseIndividualComponent.nextButtonText | parser/types.ts:1052 |
nextOnEnter? | boolean | Whether enter key should move to the next question. If present, will override the enter key setting in the uiConfig. | BaseIndividualComponent.nextOnEnter | parser/types.ts:1050 |
path | string | The path to the video. This could be a relative path from the public folder or might be a url to an external website. | - | parser/types.ts:1368 |
previousButton? | boolean | Whether to show the previous button. If present, will override the previous button setting in the uiConfig. | BaseIndividualComponent.previousButton | parser/types.ts:1068 |
previousButtonText? | string | The text that is displayed on the previous button. If present, will override the previous button text setting in the uiConfig. | BaseIndividualComponent.previousButtonText | parser/types.ts:1070 |
provideFeedback? | boolean | Controls whether the component should provide feedback to the participant, such as in a training trial. If present, will override the provide feedback setting in the uiConfig. | BaseIndividualComponent.provideFeedback | parser/types.ts:1072 |
recordAudio? | boolean | Whether or not we want to utilize think-aloud features. If present, will override the record audio setting in the uiConfig. | BaseIndividualComponent.recordAudio | parser/types.ts:1078 |
recordScreen? | boolean | Whether or not we want to utilize screen recording feature. If present, will override the record screen setting in the uiConfig. If true, the uiConfig must have recordScreen set to true or the screen will not be captured. It's also required that the library component, $screen-recording.components.screenRecordingPermission, be included in the study at some point before this component to ensure permissions are granted and screen capture has started. | BaseIndividualComponent.recordScreen | parser/types.ts:1082 |
response | Response[] | The responses to the component | BaseIndividualComponent.response | parser/types.ts:1024 |
responseDividers? | boolean | Whether to show the response dividers. If present, will override the response dividers setting in the uiConfig. | BaseIndividualComponent.responseDividers | parser/types.ts:1086 |
responseOrder? | "random" | "fixed" | The order of the responses. Defaults to 'fixed'. | BaseIndividualComponent.responseOrder | parser/types.ts:1090 |
showTitle? | boolean | Controls whether the title should be hidden in the study. If present, will override the title setting in the uiConfig. | BaseIndividualComponent.showTitle | parser/types.ts:1040 |
showTitleBar? | boolean | Controls whether the title bar should be hidden in the study. If present, will override the title bar setting in the uiConfig. | BaseIndividualComponent.showTitleBar | parser/types.ts:1042 |
sidebarWidth? | number | The width of the left sidebar. If present, will override the sidebar width setting in the uiConfig. | BaseIndividualComponent.sidebarWidth | parser/types.ts:1038 |
style? | Styles | You can set styles here, using React CSSProperties, for example: {"width": 100} or {"width": "50%"} | BaseIndividualComponent.style | parser/types.ts:1094 |
stylesheetPath? | string | The path to the external stylesheet file. | BaseIndividualComponent.stylesheetPath | parser/types.ts:1092 |
trainingAttempts? | number | The number of training attempts allowed for the component. If present, will override the training attempts setting in the uiConfig. | BaseIndividualComponent.trainingAttempts | parser/types.ts:1074 |
type | "video" | - | - | parser/types.ts:1366 |
windowEventDebounceTime? | number | Debounce time in milliseconds for automatically tracked window events. If present, will override the window event debounce time setting in the uiConfig. | BaseIndividualComponent.windowEventDebounceTime | parser/types.ts:1088 |
withProgressBar? | boolean | Controls whether the progress bar is rendered. If present, will override the progress bar setting in the uiConfig. | BaseIndividualComponent.withProgressBar | parser/types.ts:1034 |
withSidebar? | boolean | Controls whether the left sidebar is rendered at all. Required to be true if your response's location is set to sidebar for any question. If present, will override the sidebar setting in the uiConfig. | BaseIndividualComponent.withSidebar | parser/types.ts:1036 |
withTimeline? | boolean | Whether to show the video timeline. Defaults to false. | - | parser/types.ts:1372 |