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: "[your-player-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 before the player starts to play initially.	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`
`playback_token` string	Add a signed URL or Content Access Token (CAT) to provide secure, time-limited access to protected video-on-demand (VOD) assets. This property can be configured with your own CAT token, or with an Advanced Token from Wowza Video. For more, see Security features for videos in Wowza Video.	Alphanumeric, special character string	`playback_token: "eyJhbGciOiJIUz.."`
`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 before the player starts to play initially.	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: "[your-player-token]",
  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 the use of various plugins. To learn more about these plugins and how to configure them for usage with the player, see Plugin configurations.

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

For licensing and to authorize use of the player, you need to configure the player with your token. If you're using Wowza Video, see Create or revoke a player token in Wowza Video.

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. It has to be added to the player with the token configuration value when you initialize the player.

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-player-token]"
})
</script>