Customizing the player

Player controls

The Flowplayer iOS SDK comes with built-in controls in order 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 a FPPlayerControlConfig to your FlowplayerViewController instance. Use FPPlayerControlConfigBuilder to build your config. The sample below creates a config that enables the mute button:

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

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, it also enables the plugin speed and defines its possible values and labels:

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 that are currently supported together with the version of Flowplayer iOS SDK that they were added.

Plugin	ID	Version
Speed selection	"speed"	1.3.0
Audio selection	"asel"	1.4.0

Disable built-in controls

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

flowplayerViewController.setUseControls(false)

Fullscreen

By default, when the FPFlowplayerViewController enters fullscreen, it will appear on top of all other content and it will hide all the system UI, such as 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:

flowplayerViewController.setFullscreenControlOrientation(false)

Custom controls

In order to further customize the player you can instead of using the built-in controls offer your own HTML implementation.

We start with generating a HTML file.

The file must reference the following assets:

https://cdn.flowplayer.com/releases/native/stable/style/flowplayer.css - The basic CSS of the player
https://cdn.flowplayer.com/releases/native/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:

<!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/stable/style/flowplayer.css">
        <link rel="stylesheet" href="https://wvc.flowplayer.com/releases/flowplayer-webview-controls/1.1/sdk-adapter.css">
        <script src="https://cdn.flowplayer.com/releases/native/stable/flowplayer.min.js"></script>
        <script src="https://wvc.flowplayer.com/releases/flowplayer-webview-controls/1.1/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:

let config = FPPlayerControlConfigBuilder()
        .setControlsUrl("https://cdn.example.com/my-sdk-controls/index.html")
        .build()