Video Player
Options
You can customize the behavior and appearance of the Mediaflow video player by passing an options object to the constructor. This page lists the available options and shows how to use them to configure settings like autoplay, default subtitles, start time, looping, and more.
Text | Type | Default | Description |
|---|---|---|---|
autoPlay | boolean | false | Start playback immediately on load. Note that in most browsers this will only work in conjunction with the muted option set to true. |
autoStartLoad | boolean | false | If set to true, the video will preload part of the video before it starts to play. This uses more data, do not set this to true if you intend on embedding multiple videos on the same page, unless you have some sort of lazy loading technology implemented. |
clickToPlay | boolean | true | Enables or disables the ability to play/pause the video when clicking on the video element. |
contained Available in Plus and Pro plans. | boolean | true | If set to false, the videos will be shown under the video instead of as a dialog. Only for JavaScript embeds. |
continuousPlay Available in Plus and Pro plans. | boolean | false | If set to true, the next video will start playing immediately after the current video has ended. |
currentLevel | number | -1 | Accepts a number corresponding to the height of a quality level. E.g. 720 or 1080. This forces the whole video to be played at a certain quality level. This overrides startLevel, if set. -1 = auto |
defaultEmbedType | string | javascript | Sets the default value for embed type. Valid values: 'javascript' and 'iframe'. |
defaultLanguage | string | - | Sets the default language of the video. Accepts a 2 letter language code. |
defaultSubtitle | object | - | This will set and enable a subtitle or caption text track. Example: defaultSubtitle: {'lang': 'en', 'kind': 'captions'} Lang is always a 2 letter language code and kind can be either “subtitles” or “captions”. The object can also be sent without kind, it will then default to “subtitles”. |
disableContextMenu | boolean | false | Prevents right-clicking on the video element. |
displayLanguage | string | browser | Sets the UI language for the player. When omitted, the player will look for the user’s browser/system language first and if translations are missing it will default to English. Currently supported language codes: en, sv |
env | string | production | If set to "development", the player will use the development API. |
hideControls | boolean | true | Player controls will never be hidden if set to false. |
hideOverlaidPlayButton | boolean | false | Hide the overlaid play button. |
loop | boolean | false | Loops the video if true. |
muted | boolean | false | Start playback in a muted state. |
preview | boolean | false | Sets the player to preview mode (when the player is showing a stream that is not yet live). This adds some custom styling and prevents statistics from being reported. |
showCaptionSettings | boolean | false | If set to true, the caption settings will always be shown, even if no captions are enabled. When false, the caption settings will only be shown when captions are available. |
showDownload | boolean | false | If true - shows a download button for the video. |
showShare | boolean | false | Shows a share button in the top right corner. |
showTitle | boolean | false | Shows the video title in the top left corner. |
startAt | number | - | A number in seconds from where to start the playback. |
startLevel | number | -1 | Accepts a number corresponding to the height of a quality level. E.g. 720 or 1080. This forces the first video chunk to be a certain quality level. If currentLevel is set, that will override startLevel. -1 = auto |
testBandwidth | boolean | false | If set to true, the video player will evaluate the viewer's bandwidth capabilities by downloading the first chunk before selecting the first auto-level. startLevel must be set to -1 for this to work. |
theatreMode | boolean | false | If set to true, a button is added for toggling theatre mode. This button dispatches an event that the user can listen to, in order to apply changes to the container. |
theme Available in Plus and Pro plans. | string | - | Accepts a player theme ID. |
volume | number | 1 | Set the video volume. A number between 0 and 1. |
Setting Options
Setting the player options for a regular video embed looks like this:
const playerOptions = {
displayLanguage: 'en',
showTitle: true
};
const player = new MFPlayer('#player1', '73DEK47D79', playerOptions);Setting Playlist Options
For playlists, the options object looks a little bit different. See example below:
const playerOptions = {
continuousPlay: true,
contained: false,
playerOptions: {
displayLanguage: 'en',
showTitle: true
}
};
const player = new MFPlaylist('#player1', 'dNr4ocPZ973YQYJi8rv6tp', playerOptions);