Customizing the player

Table of contents

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 an FPPlayerControlConfig to your FlowplayerViewController instance. Use FPPlayerControlConfigBuilder to build your config. The sample below creates a configuration that enables the mute button:

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 Flowplayer Native speed and analytics plugins and defines possible values and labels:

let config = FPPlayerControlConfigBuilder()
    .setMuteControl(true)
    .enablePlugins(["speed", "analytics"])
    .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 *
  • Flowplayer Analytics
  • "analytics"
  • 1.4.0 *
  • Subtitles
  • "subtitles"
  • 1.5.0

To utilize the Flowplayer Analytics you must use Flowplayer platform mediaids (either videos hosted on our platform or registered remote assets ) Configuring direct stream urls will not trigger Analytics.

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)

Hide controls

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

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

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

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

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

flowplayerViewController.orientationControlsFullscreen = false

For version 3.3.0 and bellow

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)

Lockscreen and Control center controls

Make sure to enable background playback with Flowplayer as explained here. After that please follow the official docs link.

Player events Chromecast
Results