
Developers
iOS SDK
Developers
iOS SDK
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.
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 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.
<<<<<<< HEAD | 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.
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)
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)
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 playerhttps://cdn.flowplayer.com/releases/native/stable/flowplayer.min.js
- The core webplayerhttps://wvc.flowplayer.com/releases/flowplayer-webview-controls/1.1/sdk-adapter.js
- The SDK <-> Player adapterhttps://wvc.flowplayer.com/releases/flowplayer-webview-controls/1.1/sdk-adapter.css
- CSS fixes for the SDK playerExample 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()
Live streaming
Live analytics
Ad scheduling
Monetization