Interactive Video Component

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

Follow these steps to add the Interactive Video component to a Block:

1. Click Add Component.
2. Use the component search or scroll to find the Interactive Video component.
3. Click the Interactive Video component and select Add Full.

Click the Edit Component icon on the newly added Interactive Video component to begin set up.

General section

In the General section:

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

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

1. Add Interactive Video 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 that 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 section, you add Title text, Body text, and Button text.

Scroll down the page and add texts for Incorrect screen by adding Title text, Body text, and Button text.

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

Behaviour section

In the Behaviour 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.

Heads up!

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.