Customizing the player

Player controls

The Wowza Flowplayer iOS SDK comes with built-in controls to further simplify its integration into your project. The built-in controls are, by default, enabled and shown over the player.

Configure built-in controls

The built-in controls are highly customizable. You can enable or disable specific controls by passing an FPPlayerControlConfig to your FlowplayerViewController instance. Use FPPlayerControlConfigBuilder to build your config. The sample below creates a configuration that enables the mute button:

Copy

Copied

let config = FPPlayerControlConfigBuilder()
    .setMuteControl(true)
    .build()
flowplayerViewController.setControlConfig(config)

Player plugins

In addition to the pre-defined controls, you can also enable player plugins. The following sample, in addition to enabling the pre-defined mute control, also enables the Wowza Flowplayer speed plugin and defines possible values and labels:

Copy

Copied

let config = FPPlayerControlConfigBuilder()
    .setMuteControl(true)
    .enablePlugins(["speed"])
    .setCustom(key: "speed.options", value: [0.5, 1, 2, 5])
    .setCustom(key: "speed.labels", value: ["Slow", "Normal", "Double", "Fast"])
    .build()

flowplayerViewController.setControlConfig(config)

The table below lists all the player plugins currently supported together with the version of Flowplayer iOS SDK they were added to.

Plugin	ID	Version
Speed selection	"speed"	`1.3.0`
Audio selection	"asel"	`1.4.0`
Subtitles	"subtitles"	`1.5.0`

Disable built-in controls

If you wish to disable the built-in controls to provide your own custom UI, you can do so by setting:

Copy

Copied

flowplayerViewController.setUseControls(false)

Hide controls

FPFlowplayerViewController contains the property hideControls: Bool. Toggle this property to show or hide controls based on your use case.

Custom controls

To further customize the player, you can, instead of using the built-in controls, offer your own HTML implementation.

We start with generating an HTML file. The file must reference the following assets:

https://cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css The basic CSS of the player
https://cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js The core webplayer
https://wvc.flowplayer.com/releases/flowplayer-webview-controls/1.1/sdk-adapter.js The SDK <-> Player adapter
https://wvc.flowplayer.com/releases/flowplayer-webview-controls/1.1/sdk-adapter.css CSS fixes for the SDK player

Example HTML file:

Copy

Copied

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no">
		<link rel="stylesheet" href="https://cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css" />
		<link rel="stylesheet" href="https://wvc.flowplayer.com/releases/flowplayer-webview-controls/1.3/sdk-adapter.css" />
		<script src="https://cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
		<script src="https://wvc.flowplayer.com/releases/flowplayer-webview-controls/1.3/sdk-adapter.js"></script>
		<!-- you might want to load additional JS plugins / CSS files here -->
  </head>
	<body>
		<!-- container element for the player -->
		<div id="container"></div>
		<!-- init the player !-->
		<script>controls("#container",{});</script>
	</body>
</html>

After the file is in place and publicly available in the internet, you have to configure the player to use the controls:

Copy

Copied

let controlsURL = "https://cdn.example.com/my-sdk-controls/index.html?token=[TOKEN]&[CONFIG]"
let config = FPPlayerControlConfigBuilder()
		.setControlsUrl(controlsURL)
		.build()

info

Please note the [TOKEN] and [CONFIG] placeholders in the URL. They are mandatory as the SDK will replace them with configuration values.

Fullscreen mode

For version 3.4.0 and above

By default, when FPFlowplayerViewController enters fullscreen view, it will create a new UIWindow that will be made key and visible. This window will then host the player while the app is in fullscreen view.

The following two behaviors trigger fullscreen mode for the player:

Behavior 1 (User presses the fullscreen control button):

When the fullscreen control button is pressed, FPFlowplayerViewController will programmatically change the app's orientation to landscape mode. When the minimize control button is pressed, the opposite will happen and the app's orientation will be programmatically set to portrait mode.

Behavior 2 (User rotates device into landscape mode):

If the user has rotation enabled on the device, the Wowza Flowplayer will enter into fullscreen view every time the user rotates the phone into landscape mode and exit when the phone returns to portrait mode.

To prevent above behaviors:

Copy

Copied

flowplayerViewController.orientationControlsFullscreen = false

For version 3.3.0 and below

By default, when the FPFlowplayerViewController enters fullscreen, it will appear on top of all other content and it will hide all of the system UI like the status bar and the UINavigationBar.

In addition, FPFlowplayerViewController will, by default, change the device's orientation to landscape every time it enters fullscreen and to portrait every time it exits from fullscreen. You can disable this feature by simply setting:

Copy

Copied

flowplayerViewController.setFullscreenControlOrientation(false)

Lockscreen and Control center controls

Make sure to enable background playback with Wowza Flowplayer as explained here. After that, please follow the official Apple documentation.