# 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: ```swift 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: ```swift 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: ```swift 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: ```html
``` After the file is in place and publicly available in the internet, you have to configure the player to use the controls: ```swift 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:** ```swift 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: ```swift flowplayerViewController.setFullscreenControlOrientation(false) ``` ## Lockscreen and Control center controls Make sure to enable background playback with Wowza Flowplayer as explained [here](/docs/wowza-flowplayer/apple-sdk/ios-legacy/usage/#background-playback). After that, please follow the official [Apple documentation](https://developer.apple.com/documentation/avfoundation/media_playback/creating_a_basic_video_player_ios_and_tvos/controlling_background_audio).