Media Component 

This component is suitable for use when creating accessible courses.

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

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 a Display Title, as needed. Display Title is seen by learners.

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

1. Add 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. This widget 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 Media

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

Adding external media:

1. Toggle External Media to link to an external media mp4 file.
2. Enter the Media URL and Poster Image, as needed.

Adding media uploaded to Evolve:

Select your Media and select a Mobile Media File to add smaller sized media, as needed.

Behavior section

Select how to Set completion status on. Select Inview, Play or Ended. The default setting is Inview.

Toggle to tailor settings for Auto-play video, Loop video, Hide Player Controls, and Hide Play Button.

Accessibility section

Enter Button Label and Transcript Text. Use the text editor to style and format your Transcript text, as needed.

Toggle to enable Open in Popup.

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

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

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.

Additional Settings

Access additional Media settings by navigating to Course Settings > Globals tab > Media.

Here you'll find settings that can be applied to all instances of the Evolve media player in a course. These settings include:

• Toggle for hiding Full Screen Button
• Toggle for showing subtitles by default
• Toggle for showing Playback Speed Controls
• Labels for media control button tooltips
• Labels for accessibility

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.