Player controls for iOS

The Apple SDK for iOS contains built-in controls that can simplify the player's integration into your projects. You can use these controls to deliver a responsive and intuitive player interface in your iOS applications. The controls are enabled by default and display over the player's user interface (UI) when incorporated.

info

All interactions with the controls are handled by the FlowplayerView class. To learn more about this class, see the Add the player to iOS projects section.

For information related to listening to events, managing media playback, and handling errors, see the following pages:

Manage built-in controls

Configure built-in controls

The ControlsConfig configuration class helps to manage optional player control features. It allows you to customize, enable, or turn off the player's built-in controls.

You can pass this class to your FlowplayerView instance and hide or display any intended controls. Use the ControlsConfig.create() method to get a default ControlsConfig.Builder object that customizes the controls.

For example, you can use this sample code to create a configuration that enables the mute button:

Copy

Copied

// Create an instance of ControlsConfig with the create() method
// Assign it to configBuilder constant
let configBuilder = ControlsConfig.create()

// Enable the mute button
configBuilder.setMuteControl(true)

// Build the configuration object by calling the build() method on the configBuilder object
// Assign it to the flowplayerView.controlsConfig property
flowplayerView.controlsConfig = configBuilder.build()

The following table lists all available configuration options for the built-in controls.

Method	Description
`func setControlsUrl(_ string: String)`	Sets custom control URL to be loaded by the player.
`func setMuteControl(_ visible: Bool)`	Toggles mute button visibility.
`func setFullscreenControl(_ visible: Bool)`	Toggles full-screen button visibility.
`func setControlsVisible(_ visible: Bool)`	Toggles the visibility of all controls.
`func setUseDragHandle(_ use: Bool)`	Set to use the drag handle on the control bar.
`func setUseThinControlBar(_ use: Bool)`	Set to use a thin control bar.
`func setUsePlay2(_ use: Bool)`	Set to use a second play button and customize the play icon.
`func setUsePlay3(_ use: Bool)`	Set to use a third play button and customize the play icon.
`func setCustom(key: String, value: Any)`	Set to use a custom attribute with a key-value pair for a plugin.
`func enablePlugins(_ plugins: [String])`	Set to enable certain Flowplayer plugins.

Hide built-in controls

If you wish to provide your own custom UI, you can disable or hide the built-in controls. To accomplish this task, you can set the hideControls property using your FlowplayerView instance and the FlowplayerViewAPI protocol.

Copy

Copied

flowplayerView.hideControls = true

Enter or exit full-screen mode

With full-screen mode, viewers can expand the player and enter a distraction-free presentation that hides system and other application controls. Users must perform some action to exit this mode. The SDK framework considers these interactions and provides a way to handle both device-controlled and player-controlled behaviors.

Device-controlled behaviors

An example of a device-controlled interaction is when the user rotates the device into landscape mode. If the user has rotation enabled on the device, the player enters full-screen mode every time the user flips the phone to the landscape presentation. The full-screen view exits once the phone returns to the portrait layout.

When the FlowplayerView instance enters full-screen mode using this type of interaction, it creates a new UIWindow object that becomes primary and visible. This window then hosts the player while the app is in full-screen view.

To prevent the default behavior described here, disable the orientationControlsFullsreen property of the FlowplayerViewAPI protocol.

Copy

Copied

flowplayerView.orientationControlsFullscreen = false

Player-controlled behaviors

An example of a player-controlled interaction occurs when the user presses the full-screen control button. Once this happens, the FlowplayerView instance programmatically changes the app's orientation to landscape mode, forcing the user to rotate the device. Once the minimize control button is used, the opposite happens, and the app orientation programmatically reverts to the portrait layout.

When the FlowplayerView instance enters full-screen mode using this type of interaction, it appears on top of all other content. It hides all system UI controls, such as the status bar and the UINavigationBar object.

You can turn off this default behavior by setting the fullscreenControlsOrientation property of the FlowplayerViewAPI protocol.

Copy

Copied

flowplayerView.fullscreenControlsOrientation = false

Configure player plugins

In addition to the pre-defined controls, you can also add and configure player plugins to display in the player's UI. The following table lists all player plugins the SDK currently supports.

Plugin	ID	Available with Wowza Flowplayer iOS SDK version	Description
Speed Selection	`speed`	1.3.0	Shows the playback speed options menu in the player's UI.
Audio Selection	`asel`	1.4.0	Shows the audio selection options menu in the player's UI.
Subtitles	`subtitles`	1.5.0	Shows the subtitles selection options menu in the player's UI.

This code sample enables the pre-defined mute control. It also also activates the Wowza Flowplayer Speed Selection and HTML Subtitles plugins and defines possible values and labels for those plugins:

Copy

Copied

let configBuilder = ControlsConfig.create()

// Enable mute control
configBuilder.setMuteControl(true)

// Enable plugins and set plugin values and labels
configBuilder.enablePlugins(["speed", "subtitles"])
configBuilder.setCustom(key: "speed.options", value: [0.5, 1.0, 2.0])
configBuilder.setCustom(key: "speed.labels", value: ["Slow", "Normal", "Fast"])

// Build configuration object
flowplayerView.controlsConfig = configBuilder.build()