Components | Video

"Video" component allows us to add a local video (which is added to the content and can be played off-line) or an on-line video (which requires an Internet connection, as it is hosted in YouTube, Vimeo or other streaming platforms).

This component is added within the screens by default (see here), but it can also be added inside other components (for example, inside a Pop-up, a Row, etc.).

You will find this component in the group of "Multimedia" components.

Setup process

1. Access to the "Properties" tab. Go to "View" property and select if you want to add a local video (saved in the unit Resources folder) or an on-line video.

2. If you choose "Local video", you will be required to configure at least the following properties:

Resource: mp4 video file.
Cover: This property allows adding a cover image that will be shown while the video is not being played.

Additionally, you can configure other properties (see the list at the bottom of this page).

3. If you choose an "On-line video", you will have to configure at least a "URL address" from YouTube, Vimeo or other streaming platforms like Brightcove. Additionally, you can configure other properties (see the list at the bottom of this page).

4. Additionally, you can go to the "Add" tab to include a "Caption" for the video.

Video properties

PROPERTY

DESCRIPTION

Title

Video title. This property is used when adding the video to the "Carousel" component (See here)

View

This property allows adding the type of video: a local video (included in the unit Resources folder) or an on-line video (hosted by YouTube, Vimeo or other streaming platforms like Brightcove).

Resource (.mp4)

This property is only enabled when we select "Local video" inside "View". It is the video file that will be displayed. We will click on "Examine" to access the unit Resources folder (check here), and select the video we want to show. Only mp4 files are supported.

Cover

This property allows adding a cover image that will be shown while the video is not being played. It is used for local videos and on-line videos.

Lock fast forward It allows to decide if the user can advance or rewind freely through the video or if the reproduction will be automatic and will not be able to interact with it.

Subtitles

This property is only enabled when we select "Local video" inside "View". This property allows associating video subtitles to each available language. Click on the "+" button to add a subtitle file.

Then select the language and associate it with the subtitle file. File must have vtt format.

Optionally, you can define if the subtitle will be the one loaded by default. If the unit is multi-language, a default subtitle can be assigned for each language.

URLaddress

This property is only enabled when "On-line video" is the option selected inside "View". It allows adding the URL address of the video.

Width

This property allows changing the space occupied by a component inside a central column of contents. The component occupies 100% of the space by default, but size can be reduced to other preset percentages or can be displayed in "full-size". Some quote styles may overlap the central column if "Full" width is chosen.

Align

This property allows placing the component on the right, on the left or on the centre of the central column where contents are shown. It can only be used when applied "Width" is less than 100%.

Float

It allows inserting a component and "wrap" it with a text.

First, we should select a size percentage under 100% in "Width" property (25%, for instance).
"Float" property allows us to decide where we would like to put the floating component (on the right or on the left of the text).
We use arrows to move the component and put it on the text.

Overcome goal

It allows to modify the configuration of the overcoming of the objectives of this concrete component. We can choose between:

Inherited: aply the default value defined in the Completion Objectives Area (See here).
Non objetive: this video will not an objetive to complete the unit.
Play: the video playback is required to complete the unit.
Complete: to complete the unit, the video must be displayed.