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	-	This selects the video's audio/video track, not the interface language — see displayLanguage for the interface. 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”. lang selects a subtitle track on the video and is independent of displayLanguage, which controls the interface language.
disableContextMenu	boolean	false	Prevents right-clicking on the video element.
displayLanguage	string	browser	Sets the UI language for the player. When omitted, the player follows the user's browser/system language and falls back to English if that language is not available. Accepts the codes listed under Display languages, plus browser to explicitly follow the browser language.
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);

Display languages

The player interface — button labels, menus, aria-label and title attributes, and error messages — is translated into seven languages. Set displayLanguage to one of the codes below.

Code	Interface language	Also accepted
en	English	en-GB, en-US, any other en-*
sv	Swedish	sv-SE
no	Norwegian (bokmål)	nb, nb-NO, any other no-*
fi	Finnish	fi-FI
de	German	de-DE, de-AT, any other de-*
fr-FR	French	fr, fr-CA, any other fr-*
it-IT	Italian	it, any other it-*
browser	Follows the browser/system language, falls back to English

Region variants. A code with a region collapses onto its base language, so en-US and en-GB both give English, nb-NO gives Norwegian, and fr-CA gives French. Matching is case-insensitive: fr-fr and FR-FR both work. Any code that is not listed above — including Norwegian Nynorsk (nn, nn-NO) — falls back to English.

Which value wins. The displayLanguage option takes precedence over the UI language set on the player theme, which in turn takes precedence over the browser language. Setting displayLanguage: 'browser' overrides a theme language and returns to following the browser.

const playerOptions = {
    displayLanguage: 'no'
};
const player = new MFPlayer('#player1', '73DEK47D79', playerOptions);

Accessibility. If your page is in a language other than English, set displayLanguage explicitly rather than relying on the browser language. Screen readers otherwise read English control labels with the page language's speech synthesis, which WCAG 2.1 success criterion 3.1.2 (Language of Parts) requires you to avoid.

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);

Options

Setting Options

Display languages

Setting Playlist Options

Mediaflow API

File Selector

Video Player

External