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:

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

Autoplay configuration

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

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.

UI configuration sample code

<!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:

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" }]

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:

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

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

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