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 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)

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, it 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 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
    • 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)

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

Player events Chromecast
Results