Player configurations (iOS)

We have the following three entries to open the player.

1. Video feed components: VideoFeedViewController/VideoFeedView/VideoFeedSwiftUIView

2. Story block components: StoryBlockViewController/StoryBlockView/StoryBlockSwiftUIView

3. openVideoPlayer API

When customizing the player, you need to handle the above entries if you use them.

Customize player styles

Customize player styles for video feed components

var config = VideoFeedContentConfiguration()

// Customize the video overlay CTA button style
config.playerView.ctaButton.contentConfiguration.backgroundColor = .black
config.playerView.ctaButton.contentConfiguration.textColor = .white
config.playerView.ctaButton.contentConfiguration.font = .systemFont(ofSize: 12)
config.playerView.ctaButton.contentConfiguration.shape = .oval

// Customize the style of Action button style, such as share button
config.playerView.actionButton.backgroundColor = .black
config.playerView.actionButton.textColor = .white
config.playerView.actionButton.separatorColor = .white
config.playerView.actionButton.shape = .oval

// Customize the style of cancel button style
config.playerView.cancelButton.backgroundColor = .black
config.playerView.cancelButton.textColor = .white
config.playerView.cancelButton.shape = .oval

// Specifies the appearance of the countdown timer
config.playerView.countdownTimerConfiguration.appearance = .light

// Configure the subtitle text color
config.playerView.subtitleConfiguration.textColor = .white
// Configure the subtitle background color
config.playerView.subtitleConfiguration.backgroundColor = .black

// Configure the background color of the ad badge.
// This also applies to video feed item.
config.adBadge.backgroundColor = .white
// Configure the text color of the ad badge
// This also applies to video feed item
config.adBadge.textColor = .black
// Configure the text(Sponsored or Ad) of the ad badge
// This also applies to video feed item
config.adBadge.badgeText = .ad

// Apply the changes for VideoFeedViewController instance
let feedVC = VideoFeedViewController()
feedVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let videoFeedView = VideoFeedView()
videoFeedView.viewConfiguration = config

// Apply the changes for VideoFeedSwiftUIView instance
VideoFeedSwiftUIView(viewConfiguration: config)

Customize player styles for story block components

var config = StoryBlockConfiguration()

// Customize the video overlay CTA button style for embedded mode
config.ctaButton.contentConfiguration.backgroundColor = .black
config.ctaButton.contentConfiguration.textColor = .white
config.ctaButton.contentConfiguration.font = .systemFont(ofSize: 12)
config.ctaButton.contentConfiguration.shape = .oval
// Customize the video overlay CTA button style for full screen mode
config.fullScreenPlayerView.ctaButton.contentConfiguration.backgroundColor = .black
config.fullScreenPlayerView.ctaButton.contentConfiguration.textColor = .white
config.fullScreenPlayerView.ctaButton.contentConfiguration.font = .systemFont(ofSize: 12)
config.fullScreenPlayerView.ctaButton.contentConfiguration.shape = .oval

// Customize the style of action button style for embedded mode, such as share button
config.actionButton.backgroundColor = .black
config.actionButton.textColor = .white
config.actionButton.separatorColor = .white
config.actionButton.shape = .oval
// Customize the style of action button style for full screen mode, such as share button
config.fullScreenPlayerView.actionButton.backgroundColor = .black
config.fullScreenPlayerView.actionButton.textColor = .white
config.fullScreenPlayerView.actionButton.separatorColor = .white
config.fullScreenPlayerView.actionButton.shape = .oval

// Customize the style of cancel button style for embedded mode
config.cancelButton.backgroundColor = .black
config.cancelButton.textColor = .white
config.cancelButton.shape = .oval
// Customize the style of cancel button style for full screen mode
config.cancelButton.backgroundColor = .black
config.cancelButton.textColor = .white
config.cancelButton.shape = .oval

// Specifies the appearance of the countdown timer for embedded mode
config.countdownTimerConfiguration.appearance = .light
// Specifies the appearance of the countdown timer for full screen mode
config.fullScreenPlayerView.countdownTimerConfiguration.appearance = .light

// Configure the subtitle styles for embedded mode
config.subtitleConfiguration.textColor = .white
config.subtitleConfiguration.backgroundColor = .black
// Configure the subtitle styles for full screen mode
config.fullScreenPlayerView.subtitleConfiguration.textColor = .white
config.fullScreenPlayerView.subtitleConfiguration.backgroundColor = .black

// Configure the background color of the ad badge.
config.adBadge.backgroundColor = .white
// Configure the text color of the ad badge
config.adBadge.textColor = .black
// Configure the text(Sponsored or Ad) of the ad badge
config.adBadge.badgeText = .ad

// Apply the changes for StoryBlockViewController instance
let storyBlockVC = StoryBlockViewController()
storyBlockVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let storyBlockView = StoryBlockView()
storyBlockView.viewConfiguration = config

// Apply the changes for StoryBlockSwiftUIView instance
StoryBlockSwiftUIView(viewConfiguration: config)

Customize player styles for openVideoPlayer API

var config = VideoFeedContentConfiguration()

// Customize the video overlay CTA button style
config.playerView.ctaButton.contentConfiguration.backgroundColor = .black
config.playerView.ctaButton.contentConfiguration.textColor = .white
config.playerView.ctaButton.contentConfiguration.font = .systemFont(ofSize: 12)
config.playerView.ctaButton.contentConfiguration.shape = .oval

// Customize the style of Action button style, such as share button
config.playerView.actionButton.backgroundColor = .black
config.playerView.actionButton.textColor = .white
config.playerView.actionButton.separatorColor = .white
config.playerView.actionButton.shape = .oval

// Customize the style of cancel button style
config.playerView.cancelButton.backgroundColor = .black
config.playerView.cancelButton.textColor = .white
config.playerView.cancelButton.shape = .oval

// Specifies the appearance of the countdown timer
config.playerView.countdownTimerConfiguration.appearance = .light

// Configure the subtitle text color
config.playerView.subtitleConfiguration.textColor = .white
// Configure the subtitle background color
config.playerView.subtitleConfiguration.backgroundColor = .black

// Configure the background color of the ad badge.
config.adBadge.backgroundColor = .white
// Configure the text color of the ad badge
config.adBadge.textColor = .black
// Configure the text(Sponsored or Ad) of the ad badge
config.adBadge.badgeText = .ad

// Pass config to openVideoPlayer API
VideoFeedViewController.openVideoPlayer(with: url, config, self, true) { result in
    print("Open VideoPlayer result \(result)")
}

Enable PiP(Picture in Picture)

Set up the iOS project

To enable PiP outside the iOS app, you also need to add "Audio, Airplay, and Picture in Picture" background mode via Signing & Capabilities in your iOS project settings(as shown in the following screenshot). More information about this can be found here: Apple Documentation

Enable PiP for video feed components

// Enable PiP for VideoFeedViewController instance
let feedVC = VideoFeedViewController()
feedVC.isPictureInPictureEnabled = true

// Enable PiP for VideoFeedView instance
let videoFeedView = VideoFeedView()
videoFeedView.isPictureInPictureEnabled = true

// Enable PiP for VideoFeedSwiftUIView instance
VideoFeedSwiftUIView(isPictureInPictureEnabled: true)

Enable PiP for story block components

// Enable PiP for StoryBlockViewController instance
let storyBlockVC = StoryBlockViewController()
storyBlockVC.isPictureInPictureEnabled = true

// Enable PiP for StoryBlockView instance
let storyBlockView = StoryBlockView()
storyBlockView.isPictureInPictureEnabled = true

// Enable PiP for StoryBlockSwiftUIView instance
StoryBlockSwiftUIView(isPictureInPictureEnabled: true)

Enable PiP for openVideoPlayer API

// Pass true to the fourth parameter
VideoFeedViewController.openVideoPlayer(with: url, config, self, true) { result in
    print("Open VideoPlayer result \(result)")
}

Enable horizontal full-screen player

Set up iOS project

As illustrated in the screenshot below, you need to include landscape orientations in your iOS project's Info.plist file.

Enable horizontal full-screen player for video feed components

var config = VideoFeedContentConfiguration()

// Specifies if horizontal layout is enabled
// When enabled, the video player will be displayed in horizontal layout 
// when users rotate the device to landscape mode
config.playerView.horizontalLayout.isEnabled = true

// Apply the changes for VideoFeedViewController instance
let feedVC = VideoFeedViewController()
feedVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let videoFeedView = VideoFeedView()
videoFeedView.viewConfiguration = config

// Apply the changes for VideoFeedSwiftUIView instance
VideoFeedSwiftUIView(viewConfiguration: config)

Enable horizontal full-screen player for story block components

var config = StoryBlockConfiguration()

// Specifies if horizontal layout is enabled
// When enabled, the video player will be displayed in horizontal layout 
// when users rotate the device to landscape mode
config.fullScreenPlayerView.horizontalLayout.isEnabled = true

// Apply the changes for StoryBlockViewController instance
let storyBlockVC = StoryBlockViewController()
storyBlockVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let storyBlockView = StoryBlockView()
storyBlockView.viewConfiguration = config

// Apply the changes for StoryBlockSwiftUIView instance
StoryBlockSwiftUIView(viewConfiguration: config)

Enable horizontal full-screen player for openVideoPlayer API

var config = VideoFeedContentConfiguration()

// Specifies if horizontal layout is enabled
// When enabled, the video player will be displayed in horizontal layout 
// when users rotate the device to landscape mode
config.playerView.horizontalLayout.isEnabled = true

VideoFeedViewController.openVideoPlayer(with: url, config, self, true) { result in
    print("Open VideoPlayer result \(result)")
}

Customize player icons

Set up iOS project

Add the custom icons to the asset catalogs(e.g. Images.xcassets, Assets.xcassets or other names) in your iOS project. Such as:

Customize player icons for video feed components

var config = VideoFeedContentConfiguration()

// Customize the play icon
config.playerView.playbackButton.playDisplay.displayMode = .image(someImage)
// Customize the pause icon
config.playerView.playbackButton.pauseDisplay.displayMode = .image(someImage)
// Customize the more option icon
config.playerView.videoDetailButtonDisplayConfiguration.displayMode = .image(someImage)
// Customize the mute icon
config.playerView.muteButton.muteDisplay.displayMode = .image(someImage)
// Customize the unmute icon
config.playerView.muteButton.unmuteDisplay.displayMode = .image(someImage)
// Customize the close icon
config.playerView.closeButtonConfiguration.closeDisplay.displayMode = .image(someImage)
// Customize the pip icon
config.playerView.pipButtonConfiguration.pipDisplay.displayMode = .image(someImage)
// Customize the subtitle on icon
config.playerView.subtitleConfiguration.subtitleButton.subtitleOnDisplay.displayMode = .image(someImage)
// Customize the subtitle off icon
config.playerView.subtitleConfiguration.subtitleButton.subtitleOffDisplay.displayMode = .image(someImage)

// Apply the changes for VideoFeedViewController instance
let feedVC = VideoFeedViewController()
feedVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let videoFeedView = VideoFeedView()
videoFeedView.viewConfiguration = config

// Apply the changes for VideoFeedSwiftUIView instance
VideoFeedSwiftUIView(viewConfiguration: config)

Customize player icons for story block components

var config = StoryBlockConfiguration()

// Customize the play icon for embedded mode
config.playbackButton.playDisplay.displayMode = .image(someImage)
// Customize the pause icon for embedded mode
config.playbackButton.pauseDisplay.displayMode = .image(someImage)
// Customize the more option icon for embedded mode
config.videoDetailButtonDisplayConfiguration.displayMode = .image(someImage)
// Customize the mute icon for embedded mode
config.muteButton.muteDisplay.displayMode = .image(someImage)
// Customize the unmute icon for embedded mode
config.muteButton.unmuteDisplay.displayMode = .image(someImage)
// Customize the subtitle on icon for embedded mode
configrView.subtitleConfiguration.subtitleButton.subtitleOnDisplay.displayMode = .image(someImage)

// Customize the play icon for full screen mode
config.fullScreenPlayerView.playbackButton.playDisplay.displayMode = .image(someImage)
// Customize the pause icon for full screen mode
config.fullScreenPlayerView.playbackButton.pauseDisplay.displayMode = .image(someImage)
// Customize the more option icon for full screen mode
config.fullScreenPlayerView.videoDetailButtonDisplayConfiguration.displayMode = .image(someImage)
// Customize the mute icon for full screen mode
config.fullScreenPlayerView.muteButton.muteDisplay.displayMode = .image(someImage)
// Customize the unmute icon for full screen mode
config.fullScreenPlayerView.muteButton.unmuteDisplay.displayMode = .image(someImage)
// Customize the close icon for full screen mode
config.fullScreenPlayerView.closeButtonConfiguration.closeDisplay.displayMode = .image(someImage)
// Customize the pip icon for full screen mode
config.fullScreenPlayerView.pipButtonConfiguration.pipDisplay.displayMode = .image(someImage)
// Customize the subtitle off icon
config.fullScreenPlayerView.subtitleConfiguration.subtitleButton.subtitleOffDisplay.displayMode = .image(someImage)

// Apply the changes for StoryBlockViewController instance
let storyBlockVC = StoryBlockViewController()
storyBlockVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let storyBlockView = StoryBlockView()
storyBlockView.viewConfiguration = config

// Apply the changes for StoryBlockSwiftUIView instance
StoryBlockSwiftUIView(viewConfiguration: config)

Customize player icons for openVideoPlayer API

var config = VideoFeedContentConfiguration()

// Customize the play icon
config.playerView.playbackButton.playDisplay.displayMode = .image(someImage)
// Customize the pause icon
config.playerView.playbackButton.pauseDisplay.displayMode = .image(someImage)
// Customize the more option icon
config.playerView.videoDetailButtonDisplayConfiguration.displayMode = .image(someImage)
// Customize the mute icon
config.playerView.muteButton.muteDisplay.displayMode = .image(someImage)
// Customize the unmute icon
config.playerView.muteButton.unmuteDisplay.displayMode = .image(someImage)
// Customize the close icon
config.playerView.closeButtonConfiguration.closeDisplay.displayMode = .image(someImage)
// Customize the pip icon
config.playerView.pipButtonConfiguration.pipDisplay.displayMode = .image(someImage)
// Customize the subtitle on icon
config.playerView.subtitleConfiguration.subtitleButton.subtitleOnDisplay.displayMode = .image(someImage)
// Customize the subtitle off icon
config.playerView.subtitleConfiguration.subtitleButton.subtitleOffDisplay.displayMode = .image(someImage)

// Pass config to openVideoPlayer API
VideoFeedViewController.openVideoPlayer(with: url, config, self, true) { result in
    print("Open VideoPlayer result \(result)")
}

Customize player logo

To display the channel logo instead of the more icon (three dots) in the player, you could refer to the following code snippets.

Customize player logo for video feed components

var config = VideoFeedContentConfiguration()

// Configure the channel id of logo
config.playerView.logoConfiguration.option = .creator("your encoded channel id")

// Apply the changes for VideoFeedViewController instance
let feedVC = VideoFeedViewController()
feedVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let videoFeedView = VideoFeedView()
videoFeedView.viewConfiguration = config

// Apply the changes for VideoFeedSwiftUIView instance
VideoFeedSwiftUIView(viewConfiguration: config)

Customize player icons for story block components

var config = StoryBlockConfiguration()

// Configure the channel id of logo for embedded mode
config.logoConfiguration.option = .creator("your encoded channel id")
// Configure the channel id of logo for full screen mode
config.fullScreenPlayerView.logoConfiguration.option = .creator("your encoded channel id")

// Apply the changes for StoryBlockViewController instance
let storyBlockVC = StoryBlockViewController()
storyBlockVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let storyBlockView = StoryBlockView()
storyBlockView.viewConfiguration = config

// Apply the changes for StoryBlockSwiftUIView instance
StoryBlockSwiftUIView(viewConfiguration: config)

Customize player logo for openVideoPlayer API

var config = VideoFeedContentConfiguration()

// Configure the channel id of logo
config.playerView.logoConfiguration.option = .creator("your encoded channel id")

// Pass config to openVideoPlayer API
VideoFeedViewController.openVideoPlayer(with: url, config, self, true) { result in
    print("Open VideoPlayer result \(result)")
}

Customize share base URL

Customize other player configurations for video feed components

var config = VideoFeedContentConfiguration()

config.playerView.shareButton.behavior.baseURL = URL(string: "<Base URL for your Universal Link or Deeplink>")

// Apply the changes for VideoFeedViewController instance
let feedVC = VideoFeedViewController()
feedVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let videoFeedView = VideoFeedView()
videoFeedView.viewConfiguration = config

// Apply the changes for VideoFeedSwiftUIView instance
VideoFeedSwiftUIView(viewConfiguration: config)

Customize player icons for story block components

var config = StoryBlockConfiguration()

// Specifies custom base URL for use in the sharing link for the video for embedded mode
config.shareButton.behavior.baseURL = URL(string: "<Base URL for your Universal Link or Deeplink>")
// Specifies custom base URL for use in the sharing link for the video for embedded mode
config.fullScreenPlayerView.shareButton.behavior.baseURL = URL(string: "<Base URL for your Universal Link or Deeplink>")

// Apply the changes for StoryBlockViewController instance
let storyBlockVC = StoryBlockViewController()
storyBlockVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let storyBlockView = StoryBlockView()
storyBlockView.viewConfiguration = config

// Apply the changes for StoryBlockSwiftUIView instance
StoryBlockSwiftUIView(viewConfiguration: config)

Customize other player configurations for openVideoPlayer API

var config = VideoFeedContentConfiguration()

// Specifies custom base URL for use in the sharing link for the video
config.playerView.shareButton.behavior.baseURL = URL(string: "<Base URL for your Universal Link or Deeplink>")

// Apply the changes for VideoFeedViewController instance
let feedVC = VideoFeedViewController()
feedVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let videoFeedView = VideoFeedView()
videoFeedView.viewConfiguration = config

// Apply the changes for VideoFeedSwiftUIView instance
VideoFeedSwiftUIView(viewConfiguration: config)URL

Customize other player configurations

Customize other player configurations for video feed components

var config = VideoFeedContentConfiguration()

// Configure player style: fullBleed or fit
config.playerView.playerStyle = .fullBleed
// Configure the video complete action: advanceToNext or loop
config.playerView.videoCompleteAction = .advanceToNext
// Specifies if the share button should be hidden
config.playerView.shareButton.isHidden = false
// Specifies custom base URL for use in the sharing link for the video
config.playerView.shareButton.behavior.baseURL = URL(string: "https://fw.tv")
// Specifies if the video detail title should be hidden or not
config.playerView.videoDetail.titleConfiguration.isHidden = false
// Specifies if the mute button should be hidden
config.playerView.muteButton.isHidden = false
// Specifies if the play/pause button should be hidden
config.playerView.playbackButton.isHidden = false
// Specifies if the player caption should be hidden
config.playerView.playerCaption.isHidden = true
// Specifies if the video detail button should be hidden
config.playerView.videoDetailButton.isHidden = true
// Specifies if horizontal layout is enabled
// When enabled, the video player will be displayed in horizontal layout when users rotate the device to landscape mode
// Currently, only short videos are adapted to the horizontal layout
config.playerView.horizontalLayout.isEnabled = true

// Apply the changes for VideoFeedViewController instance
let feedVC = VideoFeedViewController()
feedVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let videoFeedView = VideoFeedView()
videoFeedView.viewConfiguration = config

// Apply the changes for VideoFeedSwiftUIView instance
VideoFeedSwiftUIView(viewConfiguration: config)

Customize player icons for story block components

var config = StoryBlockConfiguration()

// Configure player style: fullBleed or fit for embedded mode
config.playerStyle = .fullBleed
// Specifies if the share button should be hidden for embedded mode
config.shareButton.isHidden = false
// Specifies custom base URL for use in the sharing link for the video for embedded mode
config.shareButton.behavior.baseURL = URL(string: "https://fw.tv")
// Specifies if the video detail title should be hidden or not
config.videoDetail.titleConfiguration.isHidden = false
// Specifies if the mute button should be hidden for embedded mode
config.muteButton.isHidden = false
// Specifies if the play/pause button should be hidden for embedded mode
config.playbackButton.isHidden = false
// Specifies if the player caption should be hidden for embedded mode
config.playerCaption.isHidden = true
// Specifies if the video detail button should be hidden for embedded mode
config.videoDetailButton.isHidden = true


// Configure player style: fullBleed or fit for embedded mode
config.fullScreenPlayerView.playerStyle = .fullBleed
// Configure the video complete action: advanceToNext or loop for embedded mode
config.fullScreenPlayerView.videoCompleteAction = .advanceToNext
// Specifies if the share button should be hidden for embedded mode
config.fullScreenPlayerView.shareButton.isHidden = false
// Specifies custom base URL for use in the sharing link for the video for embedded mode
config.fullScreenPlayerView.shareButton.behavior.baseURL = URL(string: "https://fw.tv")
// Specifies if the video detail title should be hidden or not for embedded mode
config.fullScreenPlayerView.videoDetail.titleConfiguration.isHidden = false
// Specifies if the mute button should be hidden for embedded mode
config.fullScreenPlayerView.muteButton.isHidden = false
// Specifies if the play/pause button should be hidden for embedded mode
config.fullScreenPlayerView.playbackButton.isHidden = false
// Specifies if the player caption should be hidden for embedded mode
config.fullScreenPlayerView.playerCaption.isHidden = true
// Specifies if the video detail button should be hidden for embedded mode
config.fullScreenPlayerView.videoDetailButton.isHidden = true
// Specifies if horizontal layout is enabled
// When enabled, the video player will be displayed in horizontal layout when users rotate the device to landscape mode
// Currently, only short videos are adapted to the horizontal layout
config.fullScreenPlayerView.horizontalLayout.isEnabled = true

// Apply the changes for StoryBlockViewController instance
let storyBlockVC = StoryBlockViewController()
storyBlockVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let storyBlockView = StoryBlockView()
storyBlockView.viewConfiguration = config

// Apply the changes for StoryBlockSwiftUIView instance
StoryBlockSwiftUIView(viewConfiguration: config)

Customize other player configurations for openVideoPlayer API

var config = VideoFeedContentConfiguration()

// Configure player style: fullBleed or fit
config.playerView.playerStyle = .fullBleed
// Configure the video complete action: advanceToNext or loop
config.playerView.videoCompleteAction = .advanceToNext
// Specifies if the share button should be hidden
config.playerView.shareButton.isHidden = false
// Specifies custom base URL for use in the sharing link for the video
config.playerView.shareButton.behavior.baseURL = URL(string: "https://fw.tv")
// Specifies if the video detail title should be hidden or not
config.playerView.videoDetail.titleConfiguration.isHidden = false
// Specifies if the mute button should be hidden
config.playerView.muteButton.isHidden = false
// Specifies if the play/pause button should be hidden
config.playerView.playbackButton.isHidden = false
// Specifies if the player caption should be hidden
config.playerView.playerCaption.isHidden = true
// Specifies if the video detail button should be hidden
config.playerView.videoDetailButton.isHidden = true
// Specifies if horizontal layout is enabled
// When enabled, the video player will be displayed in horizontal layout when users rotate the device to landscape mode
// Currently, only short videos are adapted to the horizontal layout
config.playerView.horizontalLayout.isEnabled = true

// Apply the changes for VideoFeedViewController instance
let feedVC = VideoFeedViewController()
feedVC.viewConfiguration = config

// Apply the changes for VideoFeedView instance
let videoFeedView = VideoFeedView()
videoFeedView.viewConfiguration = config

// Apply the changes for VideoFeedSwiftUIView instance
VideoFeedSwiftUIView(viewConfiguration: config)