Description

The Video module allows you to upload and embed video files in your content. It supports 3 video formats:

• OGV
• MP4
• WebM

Chrome, Firefox, Edge, and Safari nowadays support MP4, so this format should suffice, but if you are using your own solution, please remember to make sure that it fully supports your selected video format.

If you do not have video conversion software installed, you can convert the files online using e.g. http://video.online-convert.com/.

The module allows providing custom-styled captions for the movie. Using CSS, you can move the captions and change their color and background.

The Video module can be configured with more than one video file. Its API lets you change the movies dynamically with standard buttons. See the commands section for more details.

Properties

The list starts with the common properties. Learn more about them by visiting the Modules description section. The other available properties are described below.

Supported commands

Advanced Connector integration

Each command supported by the Video module can be used in the Advanced Connector module's scripts. The example below shows how to react to the Text module's gap content changes (i.e., putting in it elements from the Source List module) and change the displayed video accordingly.

EVENTSTART
Source:Text2
Value:1
SCRIPTSTART

var video = presenter.playerController.getModule('video1');
video.jumpTo(1);

SCRIPTEND
EVENTEND

EVENTSTART
Source:Text2
Value:2
SCRIPTSTART

var video = presenter.playerController.getModule('video1');
video.jumpTo(2);

SCRIPTEND
EVENTEND

EVENTSTART
Source:Text2
Value:3
SCRIPTSTART

var video = presenter.playerController.getModule('video1');
video.jumpTo(3);

SCRIPTEND
EVENTEND

Events

The Video module sends the ValueChanged type of events to the Event Bus when the playback is finished.

The playing event occurs when the video is playing.

The time update event is sent every second while the video is playing.

CSS classes

CSS control bar classes

Default styles

.video-container .CustomControlsBar-wrapper {
    bottom: 0px;
    left: 0px;
    background-color: #EBEFF0;
    height: 40px;
    width: 100%;
    position: absolute;
}

.video-container .CustomControlsBar-wrapper-controls-controlsWrapper {
    margin-top: 3px;
    position: absolute;
    height: 37px;
    width: 100%;
}

.video-container-video {
    display: block;
    pointer-events: none;
    position: absolute;
}

.video-container .CustomControlsBar-wrapper-controls-play {
    height: 100%;
    width: 38px;
    background: url("resources/video-play-btn.png") no-repeat center;
    box-sizing: border-box;
    cursor: pointer;
    float: left;
}

.video-container .CustomControlsBar-wrapper-controls-pause {
    height: 100%;
    width: 38px;
    background: url("resources/video-pause-btn.png") no-repeat center;
    box-sizing: border-box;
    cursor: pointer;
    float: left;
}

.video-container .CustomControlsBar-wrapper-controls-stop {
    height: 100%;
    width: 40px;
    background: url("resources/video-stop-btn.png") no-repeat center center;
    cursor: pointer;
    float: left;
}

.video-container .CustomControlsBar-wrapper-controls-progressBarWrapper {
    position: absolute;
    width: 100%;
    height: 3px;
    float: left;
}

.video-container .CustomControlsBar-wrapper-controls-progressBarWrapper:hover {
    height: 6px;
}

.video-container .CustomControlsBar-wrapper-controls-progressBarWrapper-redProgressBar {
    background-color: red;
    height: 100%;
    position: absolute;
}

.video-container .CustomControlsBar-wrapper-controls-progressBarWrapper-grayProgressBar {
    background-color: dimgrey;
    width: 100%;
    height: 100%;
    position: absolute;
}

.video-container .CustomControlsBar-wrapper-controls-volume {
    height: 100%;
    width: 40px;
    background: url("resources/video-volume-btn.png") no-repeat center center;
    cursor: pointer;
    float: left;
}

.video-container .CustomControlsBar-wrapper-controls-volumeBarWrapper {
    height: 100%;
    float: left;
    cursor: pointer;
}

.video-container .CustomControlsBar-wrapper-controls-volumeBarWrapper-volumeBackground {
    width: 100px;
    height: 14px;
    border-bottom: solid 9px white;
    float: left;
    cursor: pointer;
    position: absolute;
}

.video-container .CustomControlsBar-wrapper-controls-volumeBarWrapper-volumeBackgroundSelected {
    width: 100px;
    height: 14px;
    border-bottom: solid 9px lightgrey;
    float: left;
    cursor: pointer;
    position: absolute;
}

.video-container .CustomControlsBar-wrapper-controls-fullscreen {
    float: right;
    width: 40px;
    height: 100%;
    background: url("resources/video-fullscreen-btn.png") no-repeat center center;
    cursor: pointer;
}

.video-container .CustomControlsBar-wrapper-controls-closeFullscreen {
    float: right;
    width: 40px;
    height: 100%;
    background: url("resources/video-close-fullscreen-btn.png") no-repeat center center;
    cursor: pointer;
}

.video-container .CustomControlsBar-wrapper-controls-timer {
    height: 40px;
    color: gray;
    font-size: 14px;
    padding-right: 10px;
    display: flex;
    align-items: center;
    float: right;
}

Managing subtitles

This option in full-screen mode is supported by Chrome, Firefox, and Safari.

Subtitles should be provided in the following format:

0|2|100|200|red|This is a sample text
2.5|4|10|10|green|Another line of text

Subtitles should be entered into the "Subtitles" area(s) of the 'Files' property. Each line represents a separate caption. Values are separated by a vertical bar.

• The first value is a start time.
• The second value is the end time of the caption.
• The third value is the vertical distance from the top edge.
• The fourth value is the horizontal distance from the left edge.
• The fifth value is an additional CSS class that will be used for this specific caption.
• The sixth value is the caption text itself.

If you do not need a specific CSS class for a caption, just omit it ("0|2|0|0||Text").

By editing the CSS, you can alter how each caption is displayed. For example:

.video .green {
    color: green;
    font-weight: bold;
    background-color: #fff;
}

This adds the green class and changes the font color to green, together with font-weight and background color.

Time labels

Each file can contain time labels. After adding the time labels, the user can jump to the given time by selecting the time label from the dropdown menu in the video controls bar.

Time labels should be provided in the following format:

<Hour>:<Minute>:<Second> <Label>
<Minute>:<Second> <Label>
<Second> <Label>

Time must be separated from a label with a space.

Labels will be visible in a dropdown menu. If the label is empty, the time will be displayed in the dropdown menu.

Managing audio description

Audio descriptions should be provided in the following format:

0|100|200|red|en|This is a sample text
2.5|10|10|green|en|Another line of text

Audio descriptions should be entered into the "Audio Description" area(s) of the 'Files' property. Each line represents a separate description. Values are separated with a vertical bar.

• The first value is the start time.
• The second value is the vertical distance from the top edge.
• The third value is the horizontal distance from the left edge.
• The fourth value is the additional CSS class that will be used for this specific caption
• The fifth value defines the language in which the description is read.
• The sixth value is the description text itself.

If you do not need a specific CSS class for a caption, just omit it. The same applies if you want the description to be read in the language defined in the properties of the lesson. ("0|0|0|||Text").

Keyboard navigation

• Space - play/pause.
• Up/Down arrows - volume up/down.
• Left/Right arrows - backward/forward.
• Shift + Left/Right arrows - jump to a previous/next time label.

Demo presentation

Demo presentation contains examples of how to use the Video module.