Player configuration

After you embed Wowza Flowplayer, it can be configured through the manual Javascript player setup below. Configuration is added to the flowplayer() call in the second argument:

Copy

Copied

flowplayer('#player_container', {
    src: "my_video.mp4"
  , token: "<my_token>"
  , title: "my video"
  , autoplay: true
})

Configuration options

Wowza Flowplayer uses the configurations mentioned in the Core Player Configuration table below by default. You can override them by manually setting options.

All other configuration options (Autoplay, User Interface, and Plugins) need to be set manually by adding them to the embed code.

Core player configuration

Option	Description	Parameters	Example
`advance` boolean	Playlists: Whether to auto advance to next clip.	`true`, `false (default)`	`advance: true`
`auto_orient` boolean	When `true`, the player requests fullscreen when going from portrait to landscape. This does not guarantee fullscreen occurs. Many modern platforms have similar best-effort rules like auto play for this behavior.	`true`, `false (default)`	`auto_orient: true`
`autopause` boolean	Whether a player should auto pause when it's outside of the viewport.	`true`, `false (default)`	`autopause: true`
`autoplay` boolean or bitflag	Whether the player should auto play. Autoplay bitflags exist at `flowplayer.autoplay`. When using bitflags don't add quotation marks. For example, use `autoplay: flowplayer.autoplay.ON`.	`true`, `false (default)`, `flowplayer.autoplay.OFF`, `flowplayer.autoplay.ON`, `flowplayer.autoplay.AUDIO_REQUIRED`, or use numeric values. See the autoplay options table.	`autoplay: flowplayer.autoplay.AUDIO_REQUIRED`
`controls` boolean	When set to `false`, the control bar doesn't display. See also the corresponding `NO_CONTROLS` ui bitflag.	`true`, `false`	`controls: false`
`description` string	Descriptive text to show when hovering the player.	none (default) text string	`description: "This is a video about videos, showing how to view videos"`
`disabled` boolean	If `true`, seeking forward with mouse or keyboard is disabled. Can be switched with the `toggleDisable()` API method.	`true`, `false (default)`	`disabled: true`
`dvr` boolean	Forces the dvr feature for live streams, overrides automatic detection. See also `seconds_to_dvr`.	`true`, `false`	`dvr: true`
`lang` string	Sets the language of the player UI and its messages. Requires loading the language file.	ISO code for the language	`lang: "fr"`
`logo` string	Adds a custom logo to the player. See also the logo skinning docs.	`url string`	`logo: "https://yourdomain.com/path/image.png"`
`logo_alt_text` string	Optional image text that describes the custom logo for the player and helps with accessibility.	none (default), text string	`logo_alt_text: "Wowza Flowplayer logo"`
`logo_href` string	An optional url which redirects the user when clicking the logo.	none (default), text string	`logo_href: "https://flowplayer.com/about"`
`loop` boolean	Whether the player should loop the current video or playlist.	`true`, `false (default)`	`loop: true`
`live` boolean	If `true`, then the UI shows only live controls (mandatory for live streams).	`true`, `false (default)`	`live: true`
`multiplay` boolean	Whether the player should continue to play if another player on the current page also begins playback.	`true`, `false (default)`	`multiplay: true`
`muted` boolean	Whether the player should start with sound turned off.	`true`, `false (false)`	`muted: true`
`poster` string	Show a custom image instead of first frame of a video.	none (default) url string	`poster: "https://myserver.mydomain.com/path/to/image.jpg"`
`preload` string	Whether to preload the video clip or its metadata. `auto` attempts to load the complete video clip (this might impose high bandwidth usage on page load even if the visitor does not start the video).	`none (default`, `auto`, `metadata`	`preload: "auto"`
`ratio` string	Presets the player dimensions ratio in `width:height` format according to the dimensions of the video clip or live stream, either as calculated aspect ratio or using the real dimensions.	`"width:height"`	`ratio: "16:9"` `ratio: "1280:720"` `ratio: "1.7:1"`
`retry` boolean	If `true`, the player retries connecting to a live URL (RTS@scale, WebRTC, HLS, or DASH) every three seconds. Useful if you embed the player before the live stream is available and you don't have any other retry mechanism in place. For HLS and DASH live streams, `live: true` must also be set.	`true (default)`, `false`	`retry: true`
`rewind` boolean	If set to `true` , the player returns to the start after playback has finished, showing either the poster image (if configured) or the first frame of the clip.	`true`, `false (default)`	`rewind: true`
`seconds_to_dvr` integer	Indicates seconds of live content to be buffered before dvr is enabled. This is the length of buffered content, not the time the stream is running. Do not use in combination with `dvr: true\|false` as the dvr option will override any seconds setting.	`60 seconds (default)`	`seconds_to_dvr: 30`
`seekable` boolean	Enables or disables seeking back or forth in the timeline. Can be switched at runtime with the `setOps()` API method method.	`true (default)`, `false`	`seekable: false`; `(flowplayer.setOpts({seekable: true\|false}))`
`shuffle` boolean	Playlists: `true` randomizes the playback order of the playlist items.	`true` , `false (default)`	`shuffle: true`
`skip_controls` boolean	Playlists: Display playlist skip controls in the player control bar.	`true` , `false (default)`	`skip_controsls: true`
`src` string object array	The video source. The source configured in the embed code serves as the default.	see Video source
`start_quality` bitmask	Defines one of three possible start qualities for HLS sources, calculated from the levels available in the master manifest.	`1` (LOW), `2`(MEDIUM), `4` (HIGH)	`start_quality: 4` Starts with the highest level
`start_time` float	Defines a start time that differs from the beginning of a clip for VOD or live stream content. This setting only has an effect initially. Changing it with `setOpts()` is not possible.	For VOD content, this is a number in seconds or fractions of a second. For live streams, the default value -1 starts the live stream from the edge. Set to 0 to start the live stream from the beginning of the broadcast.	VOD example: `start_time: 60`, `start_time: 10.5` Live stream example: `start_time: 0`
`title` string	Title to show when hovering the player.	none (default), text string	`title: "Video about videos"`
`token` string [hash=attr-token/]	Used to ensure only valid domains use your assets.	alphanumeric, special character string	`token: "areallylongsrandomstringfromtheui"`
`ui` integer	A bitmask disabling certain UI elements like full-screen mode, mute, and volume.	none (default) See the UI configuration. This is translated to an integer internally, so do not add quotes.	`ui: flowplayer.ui.NO_VOLUME_CONTROL`

Autoplay configuration

Autoplay can be configured in several ways either with the bitmask parameter or the numeric value representing it:

Option	Description	Value
`flowplayer.autoplay.OFF`	Autoplay is disabled.	`0`
`flowplayer.autoplay.ON`	Autoplay is enabled, if the browser does not allow autoplay with audio it will use muted autoplay.	`1`
`flowplayer.autoplay.AUDIO_REQUIRED`	The player will attempt autoplay. If it can only proceed in a muted state, it will not attempt to play while muted and instead shows the initial starting screen.	`2`

Info

Use autoplay with caution and keep in mind that most browsers do not allow autoplay with sound in many situations; we expect policies to become even more restrictive in the future. Autoplaying videos can be an irritant to users (especially when muted) and might waste bandwidth and battery energy. Check the current browser policies here:

User interface configuration

The following options are available in the ui configuration object. To combine several options, add the values and configure the sum.

Example:

NO_HEADER | NO_TITLE | LOGO_RIGHT will have the numeric values 4096 | 256 | 8 and the resulting config value for "ui": will be 4360.

Option	Description	Numeric Value
`AUDIO_ONLY`	Force audio player minimal UI (requires audio plugin)	`8192`
`LOGO_ON_RIGHT`	Show custom logo in right corner of the player	`8`
`LOGO_ON_BOTTOM`	Show custom logo on bottom of the player	`32768`
`NO_CONTROLS`	Disable the complete control bar	`1024`
`NO_DESCRIPTION`	Don't show clip description metadata (since v1.12.0)	`512`
`NO_DURATION`	Disable display of clip duration on start screen	`2048`
`NO_FULLSCREEN`	Hide fullscreen button	`1`
`NO_HEADER`	Disable the header which holds the logo, as well as the share, cast and fullscreen buttons	`4096`
`NO_MUTE`	Hide mute button	`4`
`NO_TITLE`	Don't show clip title (since v1.12.0)	`256`
`NO_TOUCH_ZONES`	Remove the seek touch zones on mobile devices	`16384`
`NO_VOLUME_CONTROL`	Hide volume control bar	`2`
`USE_DRAG_HANDLE`	Add a round scrubbing handle to the timeline	`16`
`USE_PLAY_2`	Use alternate play (outlined) button in the center of the player	`32`
`USE_PLAY_3`	Use alternate play button (circled) in the center of the player	`64`
`USE_THIN_CONTROLBAR`	Uses a thinner control bar that gets taller when the mouse is hovering the player	`128`

Info

Note the UI flags are configured without quotes and are case-sensitive.

UI configuration sample code

Copy

Copied

<!doctype html>
<html>
  <head>
  <title>ui flags</title>
  <link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css">
  <script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
  <!-- Optional plugins -->
  <script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/hls.min.js"></script>
</head>
<body>
<div id="player_container"></div>
<script>
flowplayer("#player_container", {
  src: "https://yourserver.com/path/playlist.m3u8"
, token: "<yourtoken>"
, ui: flowplayer.ui.NO_VOLUME_CONTROL | flowplayer.ui.NO_MUTE | flowplayer.ui.NO_FULLSCREEN
});
</script>
</body>
</html>

Plugins configuration

Wowza Flowplayer can be extended through plugins. All plugins are configured at the top level. To load them, just add the plugin urls after the core player.

To configure, set a configuration object at the top level and include the desired options as explained in the linked plugin documentation below:

Plugin	Option	Description	Example
Advertising	`ima` object	Ad configuration. Only available on Professional and Enterprise plans. Default: none	`ima: {...}` See Advertising plugin for details.
AirPlay	`airplay` string	Implements an Apple AirPlay feature that allows you to play content on AirPlay devices. An AirPlay device selection button appears when AirPlay devices are available in the same WiFi network.	Just load the AirPlay plugin. Do not add the config string.
Audio Track Selection	`asel` object or boolean	Adds support for multiple audio tracks in HLS or DASH streams.	See Audio Track Selection plugin for details.
Chromecast	`chromecast` string	Implements a Chromecast feature that plays content on Chromecast enabled devices. A Chromecast device selection button appears when Chromceast devices are available in the same WiFi network and you're using a Chromecast-enabled browser.	Just load the Chromecast plugin. Do not add the config string.
Comscore Analytics	`comscore` object	Allows you to track your media content in Comscore.	See Comscore Analytics plugin for details.
Cuepoints	`cuepoints` object	Adds cuepoint support to the player.	See Cuepoints plugin for details.
MPEG-DASH	`dash` object	Implements an MPEG-DASH loader plugin, which is capable of playing .mpd source files.	See MPEG-DASH plugin for details.
Endscreen	Configured with API call.	Adds support for an recommendation end screen. The end screen is displayed at the end of a single video or after the last item of a playlist. It contains a grid view of recommended videos (if available).	See Endscreen plugin for details.
Float-on-Scroll	`float-on-scroll` object	Turns the player into a floating container that positions the player in the lower left corner (site and position configurable with css) when user scrolls past the player.	`float-on-scroll: false`
Frame-Accurate Seeking	`fas` object	Adds support for seeking to specific frames and SMPTE timecodes.	`fas: {}` See Frame-Accurate Seeking plugin for details.
Google Analytics: GA4	`ga` object	Allows you to track your media content in Google Analytics.	`ga: {}` See Google Analytics: GA4 plugin for details.
Gemius Analytics	`gemius` object	Allows you to track your media content in Google Analytics.	`gemius: {}` See Gemius Analytics plugin for details.
HLS	`hls` object	Implements an HLS loader plugin, which is capable of playing .m3u8 source files.	`hls: {}` See HLS plugin for details.
HTML Subtitles	`subtitles` array	Lists subtitle tracks. Default: none	`subtitles: {tracks: []}` See HTML Subtitles plugin for details.
Keyboard	`keyboard` object	Loads the accessibility helper keyboard plugin, which also allows searching with keyboard shortcuts at pre-defined intervals.	`keyboard: {}` See Keyboard plugin for details.
Playlist	`playlist` array and others	Ads support for playlists. Must be initialized with `flowplayer/playlist` `src` type.	`playlist: []` See Playlist plugin for details.
Quality Selection	`qsel` object	Implements a quality-selector menu where the different quality levels of a stream are offered for manual selection.	`qsel: {}` See Quality Selection plugin for details.
Share	`share` object	Adds a share button to offer social media linking.	`share: {}` See Share plugin for details.
Speed Selection	`speed` object	Adds a playback speed selector menu item with configurable slow/fast playback options.	`speed: {}` See Speed plugin for details.
Preview Thumbnails	`thumbnails` object	Adds WebVTT-based thumbnail support.	`thumbnails: {src:"https://some.org/sampel.vtt"}` See Preview Thumbnails plugin for details.
Wowza Video Platform Integration	`ovp` object	Allows for integration of videos and live streams you've created in Wowza Video.	See Wowza Video Platform Integration plugin for details.

Video source

The source ( root level "src": option) can be configured either as a/an:

String
- If using a self-hosted video, it should be the full URL to the video (example: https://edge.flowplayer.org/bauhaus.m3u8 ). MIME-type is guessed from the suffix. If you have non-standard extensions (like .mov - usage not recommended - or a query parameter for example, you must set the type property. Also, make sure your server sends the correct MIME headers.
  Mime types
  
  Make sure that all the files are available on the server (avoid redirects) and that the server transmits them with the correct Content-Type header. Depending on your server, you might have to extend the .htaccess or mime.types files (Apache), use the IIS manager (Internet Information Server) or set the header via Metadata (Amazon S3). Example .htaccess file:
  
  For nginx, the MIME type is defined in nginx/conf/mime.types In lighthttps, use the config file
  
  In Amazon S3, you need to give the content type as a parameter to the AWS cli or s3cmd when uploading a file, or adapt it in the metadata section of each file when it's already uploaded.
  Copy
  
  Copied
```
## video types
AddType application/x-mpegurl .m3u8
AddType video/mp4             .mp4
AddType video/webm            .webm
AddType application/dash+xml .mpd
			hls transport stream segments:
			AddType video/mp2t            .ts
			subtitle text tracks:
			AddType text/vtt              .vtt
			```
```
Object with following properties
- type - the MIME type (example video/mp4 or application/x-mpegurl )
- src - the full url of the video (example: https://edge.flowplayer.org/bauhaus.m3u8 )

Array of objects to have a fallback mime type for different browsers depending on browser support

Example

Copy

Copied

[{ "src": "https://edge.flowplayer.org/bauhaus.m3u8", "type": "application/x-mpegurl"},
{ "src": "https://edge.flowplayer.org/bauhaus.mp4", "type": "video/mp4" }]

Info

If you configure a source array with several source types like m3u8, mp4 and webm, they will be evaluated in the order they're written and the first source the browser supports will be played. This means that you should always list m3u8 first if you want to offer quality selection for example.

Token configuration

Configure the player with your token

You need to configure the player with your token if you haven't already. Your token will be one of the following:

If you're playing a video through Wowza Video, use this token:

Copy

Copied

eyJraWQiOiIwWE44RnRTYkQxblYiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6MzgsXCJpZFwiOlwiMFhOOEZ0U2JEMW5WXCJ9IiwiaXNzIjoiRmxvd3BsYXllciJ9.wHlyQZ86rIHD8ldgnpiWbmFBmR4zt_3FSj78GMk7lfQ1es7K8y0MuHzbqcJfp0lm6LcUbUkQ5PsazIsAybxivg

If you're playing a video through something besides Wowza Video, use the unique token sales sent you after you purchased Wowza Flowplayer.

The token is validated online on every player start.

The token has to be configured in the player with the token configuration value.

Initialize player

Create a <div> element in your HTML to act as the placeholder for the player if you haven't:

Copy

Copied

<div id="player_container"></div>

Then call the flowplayer() initializer to kick of the player if you haven't yet:

Copy

Copied

<script>
flowplayer('#player_container', {
  src: 'my_video.mp4',
  token: '<my_token>'
})
</script>