Player configurations (iOS)
Last updated
Was this helpful?
Last updated
Was this helpful?
Was this helpful?
We have the following three entries to open the player.
Video feed components: VideoFeedViewController/VideoFeedView/VideoFeedSwiftUIView
Story block components: StoryBlockViewController/StoryBlockView/StoryBlockSwiftUIView
openVideoPlayer API
When customizing the player, you need to handle the above entries if you use them.
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)
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)
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)")
}
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 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 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)
// Pass true to the fourth parameter
VideoFeedViewController.openVideoPlayer(with: url, config, self, true) { result in
print("Open VideoPlayer result \(result)")
}
Add the custom icons to the asset catalogs(e.g. Images.xcassets, Assets.xcassets or other names) in your iOS project. Such as:
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)
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)
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)")
}
To display the channel logo instead of the more icon (three dots) in the player, you could refer to the following code snippets.
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)
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)
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)")
}
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)
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)
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
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)
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)
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)