Customizing the Player on iOS

The ArcMediaPlayerView can be customized to fit your app’s UI design and features. You can get it from the ArcMediaPlayerViewController’s playerView property.

Note

Unless otherwise noted, controls are customizable only on iOS, not tvOS, because tvOS uses the remote control instead. Even if the properties are exposed, the outlets are not connected in tvOS.

Buttons

The default button icons are sourced from Icons8 and free to use. The default icons use the IOS Glyphs Style, have a size of 30x30, and have light and dark mode versions. You can use your own icons instead, but keep in mind that if they’re not the same size, the player’s layout will be affected.

Some buttons can be hidden, but unless otherwise specified, the order the buttons appear in, and their positions in the view, cannot be changed.

Name	Type	Description
closedCaptionsButton	UIButton	Toggles closed-captioning (if available) on and off.
controlBarPlayButton	UIButton	Toggles between playing and pausing the video. The Play icon is used in the button’s .default state, while the Pause icon is used in its .selected state.
fullScreenButton	UIButton	Toggles the player between full screen and the its original size and location.
goBackwardButton	UIButton	Skips to the beginning of the video, or rewinds if pressed continuously.
goForwardButton	UIButton	Skips to the end of the video (or the next video), or fast-forwards if pressed continuously.
skipBackwardButton	UIButton	Rewinds the video by a certain number of seconds. Note The default icon displays 15. If you change this to an icon with a different value, you must also set the ArcMediaPlayerViewController’s goBackwardInterval to that same value. Make sure you specify a negative number of seconds! playerViewController.playerView.skipBackwardButton.setImage(UIImage(named: “back-60-seconds”), for: .normal) playerViewController.goBackwardInterval = CMTime(seconds: -60.0, preferredTimescale: 1)
skipForwardButton	UIButton	Skips the video ahead by a certain number of seconds. Note The default icon displays 30. If you change this to an icon with a different value, you must also set the ArcMediaPlayerViewController’s goForwardInterval to that same value. Make sure that you specify a positive number of seconds! playerViewController.playerView.skipBackwardButton.setImage(UIImage(named: “forward-20-seconds”), for: .normal) playerViewController.goBackwardInterval = CMTime(seconds: 20.0, preferredTimescale: 1)
useSkipBackwardButton	Bool	Whether the skipBackwardButton will be displayed, even if the current video allows skipping.
useSkipForwardButton	Bool	Whether the skipForwardButton will be displayed, even if the current video allows skipping.
volumeButton	UIButton	Pops up a volume slider. (See mpVolumeView, below.) Note: The icons used for the various volume levels are not currently customizable.

Labels

Name	Type	Description
timeElapsedLabel	UILabel	Shows the video’s elapsed time. There are two formats that are used for the times: one with, and one without, the hours. (If alwaysShowHours is true, then the format with hours is always used.)
timeRemainingLabel	UILabel	Shows the video’s remaining time. If the video is a livestream, then the label will display “LIVE” instead of a time. There are two formats that are used for the times: one with, and one without, the hours. (If alwaysShowHours is true, then the format with hours is always used.)
alwaysShowHours	Bool	Set this to true if the time-elapsed & time-remaining labels should always show the hours field. The default is false.
durationFormat	String	The format string for the time-elapsed & time-remaining labels when the time is less than one hour. The default is mm:ss. Examples are 31:20 or 04:32. It should not be prefixed with a “-”, as that’s added automatically by the player.
durationFormatWithHours	String	The format string for the time-elapsed/time-remaining label when the time one hour or greater. The default is H:mm:ss. Examples are 1:31:20 or 2:04:32. It should not be prefixed with a “-”, as that’s added automatically by the player.

Captions

The ArcMediaPlayerView supports captions in two different ways:

• Embedded in the video stream
• Listed in an associated Video Text Track (VTT) file

The appearance and behavior of embedded captions is determined by the operation system or app’s accessibility settings, and are not customizable directly in the ArcMediaPlayerView.

VTT captions are customizable using the following properties:

Name	Type	Description
closedCaptionsButton	UIButton	Toggles closed-captioning (if available) on and off.
clientSideCaptionTextColor	UIColor	The text color for the client-side caption overlay text. The default value is UIColor.white. The color should contrast with the clientSideCaptionTextShadowColor so that it will show up clearly, no matter what the underlying video content looks like.
clientSideCaptionTextShadowColor	UIColor	The text color for the client-side caption overlay text shadow. On iOS, this defaults to UIColor.darkText, but since that property isn’t available on tvOS, the tvOS default is .white. The color should contrast with the clientSideCaptionTextColor so that it will show up clearly, no matter what the underlying video content looks like.

Other Controls & Views

Name	Type	Description
controlBar	UIView	The overlay that displays the playback controls. It cannot be positioned elsewhere inside or outside the view, but its behavior can be customized.
mpVolumeView:	MPVolumeView	The volume slider that appears when the volumeButton is toggled. Note: this appears only on iOS devices, not on the simulator.
secondsBeforeControlBarHides	Double	The number of seconds that the control bar is visible after playback starts. If it’s nil, then no timer will be set. Instead, you must call ArcMediaPlayerView.showControlBar() and hideControlBar() manually.