Description

The Video module allows you to upload and embed video files in your presentation. 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 don't have video conversion software installed, you can convert the files online using http://video.online-convert.com/.

Note: Be careful with video compression. We noticed that Windows Media Player (responsible for video playback on desktop browsers) experiences problems with playback when the video file download is interrupted by a keyframe. To prevent this issue, it is necessary to put keyframes in the film frequently enough (for example 1 keyframe per second).

The module allows you to provide 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's scripts. The example below shows how to react to the Text module gap content changes (i.e. putting in it elements from the Source List) 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 ValueChanged type 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 fullscreen 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 property of the module. 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 don't 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 will make the class green and change 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 drop-down 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 by space.

Labels will be visible in a drop-down menu, and they are optional. If the label is empty, the time will be visible in a drop-down 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 property of the module. Each line represents a separate description. Values are separated by a vertical bar.

• The first value is a 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 don't 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 showing how to use the Video module.