# Player configuration

After you [embed](/docs/wowza-flowplayer/player/embed/embed-with-standalone/) Wowza Flowplayer, it can be configured through the manual Javascript player setup below. Configuration is added to the `flowplayer()` call in the second argument:


```js
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](/docs/wowza-flowplayer/player/configure#autoplay-configuration). | `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](/docs/wowza-flowplayer/player/configure#user-interface-configuration). | `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](/docs/wowza-flowplayer/player/player-api#methods). | `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](/docs/wowza-flowplayer/player/translations/#install-translations). | ISO  code for the [language](/docs/wowza-flowplayer/player/translations/#see-available-languages) | `lang: "fr"` |
| `logo` *string* | Adds a custom logo to the player. See also the [logo skinning docs](/docs/wowza-flowplayer/player/skinning#custom-logo). | `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)` |
| `seekable` *boolean* | Enables or disables seeking back or forth in the timeline. Can be switched at runtime with the [`setOps()` API method](/docs/wowza-flowplayer/player/player-api#methods) method. | `true (default)`,`false` | `seekable: false`; `(flowplayer.setOpts({seekable: true |
| `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](/docs/wowza-flowplayer/player/configure#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](/docs/wowza-flowplayer/player/configure#user-interface-configuration) like full-screen mode, mute, and volume. | none (default) See the [UI configuration](/docs/wowza-flowplayer/player/configure#user-interface-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](/docs/wowza-flowplayer/player/configure#bitmask) 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:

* [Chrome](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes)
* [Firefox](https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide)
* [iOS Safari](https://webkit.org/blog/6784/new-video-policies-for-ios/)
* [iOS MacOS](https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/)


### 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](/docs/wowza-flowplayer/plugins/audio)) | `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


```html
<!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](/docs/wowza-flowplayer/plugins/about-plugins/#plugin-configuration).

## 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.

```html
## 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**

```json
[{ "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:


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

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


```js
<script>
flowplayer("#player_container", {
  src: "my_video.mp4",
  token: "[my-player-token]"
})
</script>
```