Media Component

The Media component is a presentation component that lets you display a video to your learners. The Media component can display videos from external sources or display videos uploaded to Evolve.

This article provides an overview of the Media component, component setup and examples of Media component configurations.

Component overview

The Media component is an interactive component that lets you add a video to your course and present it to your learners. The Media component can be configured to show either a video uploaded to Evolve or a video from an external video source.

The Media component is fully responsive and can be configured to auto play when the video appears on an Evolve page or hide the player controls, as needed.

Component set up

Follow these steps to add the Media component to a Block:

1. Click Add Component.
2. Use the component search or scroll to find the Media component.
3. Click the Media component and select Add Left, Add Full, or Add Right.

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

General section

In the General section:

Add Media Title, or a Media Display Title, as needed. Media Display Title is seen by learners.

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

1. Add Media Instruction Text that tells users how to use the component.
2. Include an Aria Label for screen readers, as needed.

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 Media component that can display an icon and label prior to the Media component completion, which changes to a different icon and label once the Media component is completed.

Add Video

In the Media section, you select and configure settings for your video.

Adding an external video:

1. Toggle External media to link to an external video mp4 file.
2. Enter the Video url and Video Id, as needed.

Adding a video uploaded to Evolve:

Select your Video and select a Mobile Video to add a smaller sized video, as needed.

For all videos:

Toggle to tailor settings for Should play automatically, Hide Player Controls and Hide Play Button .

Select a Video Poster Image to display and enter Transcript Button Text and Transcript Text. Use the text editor to style and format your Transcript text, as needed.

Toggle to enable Open Transcript in Popup and select how to Set completion status on. Select Inview, Play or Ended. The default setting is Inview.

Audio Description section

In the Audio Description section, you have the option to add an audio description to your Media component instead of Transcript.

1. Toggle to Enable audio description. This is used to give users the option to play an additional narration track that describes the action. By default, this setting is disabled.
2. Select an Audio in mp3 format.

Subtitles section

In the Subtitles section, enter Label to be shown as a subtitle track option. Select a Subtitles track for the video.

Heads up!

Due to browser restrictions, subtitle files cannot play in offline courses. Try using the transcript in the Media section instead if offline is required.

Component Examples

The Media component gives you a lot of flexibility. Below are examples that illustrate some alternative Media component setups:

Example 1 – displays a video with player controls enabled

Example 2 – displays a video with player controls set to hidden and Transcript text displayed below the video

Did this article help?

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