Documentation

Video

Description

The Video addon 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're using our mCourser and thus mLibro app, note that it requires OGV or WebM format. 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.

Property name Description
Files A collection of movie files displayed by the addon.
Property name Description
OGV video The video file in OGV format.
MP4 video The video file in MP4 format.
WebM video The video file in WebM format.
Subtitles Description of this property in available in "Managing subtitles" section.
Poster The image shown before and after playing the video.
ID Video ID for command-based navigation.
Loop video If this property is checked, the video will be played repeatedly.
It is recommended to set the resolution to 720p and if the key frame distance is left as "auto", the video doesn't loop properly.
Alternative text Text available for screen reader.
Time labels Description of this property in available in "Time labels" section.
Audio description Description of this property in available in "Managing audio description" section.

This property allows online resources. Find out more »

Show video (deprecated) This option is for Presentation Editor only! It allows you to view the specified video (counted from 1 to n, where n is the number of uploaded videos). This works only with the Show time option filled.
Show time (deprecated) This option is for Presentation Editor only! It allows you to view specified time ('MM:SS'). This works only with the Show video option filled.
Narration Narration for the recorded audio.
Hide default controls If this property is checked, the video controller bar will be hidden.
Hide subtitles If this option is selected, subtitles will be hidden on start.
Show play button If this property is checked, the play button will be visible on the video.
Speech texts List of speech texts:
  • Audio description enabled
  • Audio description disabled
This texts will be read by Text to Speech addon after a user performs an action.
Offline message This message will be displayed if the addon was configured to display an online video resource, but there's no internet access.
Enable video speed controller If this option is selected, the video speed controller will be display on the video controller bar.

Supported commands

Command name Params Description
show --- Shows the video.
hide --- Hides the video.
next --- Jumps to the next movie. If the last movie is currently displayed this command will have no effect.
previous --- Jumps to the previous movie. If the first movie is currently displayed this command will have no effect.
jumpTo movieNumber Jumps to specified movie number. The movie number should be from 1 to n, where n is the number of configured movie files. Providing a movie number out of this range will have no effect.
jumpToID movieID Jumps to specified movie ID (provided in Addon configuration, IDs property). Providing a movie ID not defined in IDs property will have no effect.
seek seconds Changes playback time to provided seconds in a currently played video.
play --- Plays the video.
stop --- Stops the video.
pause --- Pauses the video.
showSubtitles --- Shows the subtitles.
hideSubtitles --- Hides the subtitles.
showAudioDescription --- Shows the audio description.
hideAudioDescription --- Hides the audio description.
setVideoURL videoURL, movieNumber Sets new URL for video under specified movie ID.

Advanced Connector integration

Each command supported by the Video addon can be used in the Advanced Connector addon scripts. The example below shows how to react to the Text module gap content changes (i.e. throughout 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 addon sends ValueChanged type events to Event Bus when playback is finished.

Field name Description
Item current movie index
Value 'ended' string
Score N/A

The playing event occurs when the video is playing.

Field name Description
Item N/A
Value playing
Score N/A

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

Field name Description
Item current movie index
Value current time in format MM:SS
Score N/A

CSS addon classes

Class name Description
video-container DIV surrounding the video element. The video element is a direct child of this element.
captions DIV containing the captions. By default, it has an absolute positioning in reference to the video container and is played in the top left corner.
playing This class is added when a video is being played.
captions-container Div surrounding the captions. The size of this div will be changed by the addon, shouldn't be styled.

CSS control bar classes

Class name Description
CustomControlsBar-wrapper DIV surrounding the controls bar elements
CustomControlsBar-wrapper-controls-controlsWrapper DIV containing all buttons in lower panel
CustomControlsBar-wrapper-controls-play Play button which is visible when video is paused. CSS display value shouldn't be changed
CustomControlsBar-wrapper-controls-pause Pause button which is visible when video is playing. CSS display value shouldn't be changed
CustomControlsBar-wrapper
-controls-stop
Stop button
CustomControlsBar-wrapper
-controls-volume
Volume button
CustomControlsBar-wrapper
-controls-volumeBarWrapper
DIV container for volume bar elements
CustomControlsBar
-controls-volumeBarWrapper-volumeBackground
DIV which is background for volume bar. Is visible if volume button is clicked. CSS display value shouldn't be changed
CustomControlsBar-wrapper-controls
-volumeBarWrapper-volumeBackgroundSelected
DIV which show how much volume is selected. Is visible if volume button is clicked. CSS display value shouldn't be changed
CustomControlsBar-wrapper
-controls-fullscreen
Fullscreen button. Is visible when addon is not in fullscreen. CSS display value shouldn't be changed
CustomControlsBar-wrapper
-controls-closeFullscreen
Close fullscreen button. Is visible if addon is in fullscreen. CSS display value shouldn't be changed
CustomControlsBar-wrapper
-controls-timer
DIV which contain actual duration time in video. Value is changed by addon.
CustomControlsBar-wrapper
-controls-progressBarWrapper
DIV containing progress bar elements
CustomControlsBar-wrapper
-controls-progressBarWrapper-grayProgressBar
Background for progress bar.
CustomControlsBar-wrapper
-controls-progressBarWrapper-redProgressBar
Actual video progress.
video-poster-play Play "watermark" button class.
video-poster-pause Additional "watermark" button class when video is paused.

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 property of the addon. 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").

Using the presentation's CSS editor, 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 addon. 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 contains examples of how this addon can be used.