Interactive Video Component

This component is NOT recommended for use when creating accessible courses.

The Interactive Video component lets you create branching video content to present video scenarios that allow multiple outcomes and branches for learners to explore.

This article provides an overview of the Interactive Video component, component setup and behavior, and examples of Interactive Video component configurations.

Component overview

The Interactive Video component is an interactive component that lets you create branching video content where you present video scenarios that allow multiple outcomes and branches for learners to explore.

The Interactive Video component is fully responsive.

Component set up

To add this component, follow the steps in this article:

The Property Panel for the newly added component will then open automatically for you to customize set-up.

Or click anywhere on an existing component to open the Property Panel.

General section

In the General section:

Add*Title* , or an Display Title, as needed. Display Title is seen by learners.

Scroll down the page and add your Body. Use the text editor to style and format your text, as needed.

1. Add Instruction Text that tells learners how to use the component.
2. Include an Aria Label for screen readers, as needed.
3. Enter Video Play Button ARIA Label, as needed. Fill this in to describe this piece of content to a screen reader.

Interaction Label section

In the Interaction Label section, you can enable an Interaction Label.

The Interaction Label allows you to add a widget before or after the Interactive Video component. This widget can display an icon and label prior to the Interactive Video component completion, which changes to a different icon and label once the Interactive Video component is completed.

Interactive Video Editor section

In the Interactive Video Editor section, you Add videos and items to your Interactive Video component.

Click Edit item to edit each item.

For each item:

1. Enter Item Question Text.
2. Add Video Subtitle Label as needed.
3. Add Video Subtitles for the video.

Add Transcript and Transcript Text that will display underneath the video. Use the text editor to style and format your text, as needed.

Poster Graphic section

In the Poster Graphic section, you can add an Image to your Interactive Video component, as needed.

Screens section

In the Screen section's first part, Timeout screen, you add Text and a Retry button label.

Scroll down the page and add texts for Incorrect screen by adding Text and a Retry button label.

For the Completion screen, add a Title as needed. This will be shown in a notification dialog. Use the text editor to style and format your Feedback text, as needed.

Behavior section

In the Behavior section, toggle to enable Full Screen Options. This will display the video options in full screen on mobile.

Toggle to Enable Video Controls. This will show the video controls.

Note: On mobile browsers, the controls will be visible.

Toggle to Disable Timer. Enabling this setting will allow the learner to have unlimited time to choose an answer.

Enter Timer. By default, the Timer is set to 10 seconds.

Component Examples

Below are examples that illustrate the Interactive Video component setup:

Example 1 – displays the Interactive Video component with the first video ready to play.

Example 2 – displays the options after the first video is played. The option to the right is the correct answer.

Example 3 – displays the dialog notification with the component Correct Feedback text shown after the correct video has been played.

Animations section

In the Animations section, you select what animations to run when the options are displayed at the end of each video.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.