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, false Default: true 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) quality: 4 starts with the highest level
start_time
float
Defines a start time different than the beginning of the clip. number with seconds and fractions of seconds. Note: This setting only has effect initially. Changing it with setOpts() is not possible. start_time: 60,
start_time: 10.5
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 fullscreen, mute and volume. none (default) See the UI configuration. Note: this is translated to an integer internally, so do not add quotes.

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 ads plugin documentation 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.
HLS / DASH audio selection asel
object or boolean
Adds support for multiple audio tracks in HLS or DASH streams. See the audio selection plugin documentation.
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 comscore
object
Allows you to track your media content in Comscore. See the comscore plugin documentation.
Cuepoints cuepoints
object
Adds cuepoint support to the player. See the cuepoints plugin documentation.
MPEG-Dash dash
object
Implements an MPEG-DASH loader plugin, which is capable of playing .mpd source files. See the dash plugin documentation.
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 the endscreen plugin documentation.
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 fas plugin documentation.
Google Analytics ga
object
Allows you to track your media content in Google Analytics. ga: {}
See the google analytics plugin documentation.
Gemius Analytics gemius
object
Allows you to track your media content in Google Analytics. gemius: {}
See the gemius analytics plugin documentation.
HLS hls
object
Implements an HLS loader plugin, which is capable of playing .m3u8 source files. hls: {}
See hls plugin documentation.
Keyboard keyboard
object
Loads the accessibility helper keyboard plugin, which also allows searching with keyboard shortcuts at pre-defined intervals. keyboard: {}
See keyboard plugin documentation.
Playlist playlist
array and others, see documentation
Ads support for playlists. Must be initialized with flowplayer/playlist src type. playlist: []
See playlist plugin documentation.
HLS 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 documentation.
Share share
object
Adds a share button to offer social media linking. share: {}
See share plugin documentation.
Speed speed
object
Adds a playback speed selector menu item with configurable slow/fast playback options. speed: {}
See speed plugin documentation.
Subtitles subtitles
array
Lists subtitle tracks. Default: none subtitles: {tracks: []}
See subtitles plugin documentation.
Thumbnails thumbnails
object
Adds WebVTT-based thumbnail support. thumbnails: {src:"https://some.org/sampel.vtt"}
See thumbnail plugin docs.

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>