One-to-one Virtual ShoppingBusiness Portal

Player configurations (Flutter)

We have the following three entries to open the player.

  1. VideoFeed widget

  2. StoryBlock widget

  3. openVideoPlayer API

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

Configuration reference

  1. VideoPlayerConfiguration

  2. StoryBlockConfiguration

  3. OpenVideoPlayerConfiguration

Customize player styles

As the following code snippets, we could customize styles for video overlay CTA, action button, countdown timer, etc.

Customize player styles for video feed widget

// Configure player configuration for VideoFeed widget
final videoPlayerConfiguration = VideoPlayerConfiguration();

// Customize the video overlay CTA button style
videoPlayerConfiguration.ctaButtonStyle = VideoPlayerCTAStyle(
  backgroundColor: "#2089ff",
  textColor: "#ffffff",
  fontSize: 14,
  shape: ButtonShape.roundRectangle,
  iOSFontInfo: IOSFontInfo(
    fontName: "Helvetica",
    systemFontStyle: IOSSystemFontStyle.italic,
    systemFontWeight: IOSSystemFontWeight.heavy,
  ), // or ButtonShape.oval
);

// Customize the style of action button style, such as share button
videoPlayerConfiguration.actionButtonStyle = VideoPlayerActionButtonStyle(
  backgroundColor: "#2089ff",
  textColor: "#ffffff",
  dividingLineColor: "#ffffff",
  shape: ButtonShape.oval,
);

// Customize the style of cancel button style
videoPlayerConfiguration.cancelButtonStyle = VideoPlayerActionButtonStyle(
  backgroundColor: "#ffffff",
  textColor: "#000000",
  shape: ButtonShape.oval,
);

// Specifies the appearance of the countdown timer
videoPlayerConfiguration.countdownTimerConfiguration =
    CountdownTimerConfiguration(
  appearance: CountdownTimerAppearanceMode.light,
);

VideoFeed(
  source: VideoFeedSource.playlist,
  channel: "your encoded channel id",
  playlist: "your encoded playlist id",
  videoPlayerConfiguration: videoPlayerConfiguration,
);

Customize player styles for story block widget

// Configure player configuration for StoryBlock widget
final storyBlockConfiguration = StoryBlockConfiguration();

// Customize the video overlay CTA button style
storyBlockConfiguration.ctaButtonStyle = VideoPlayerCTAStyle(
  backgroundColor: "#2089ff",
  textColor: "#ffffff",
  fontSize: 14,
  shape: ButtonShape.roundRectangle,
  iOSFontInfo: IOSFontInfo(
    fontName: "Helvetica",
    systemFontStyle: IOSSystemFontStyle.italic,
    systemFontWeight: IOSSystemFontWeight.heavy,
  ), // or ButtonShape.oval
);

// Customize the style of Action button style, such as share button
storyBlockConfiguration.actionButtonStyle = VideoPlayerActionButtonStyle(
  backgroundColor: "#2089ff",
  textColor: "#ffffff",
  dividingLineColor: "#ffffff",
  shape: ButtonShape.oval,
);

// Customize the style of cancel button style
storyBlockConfiguration.cancelButtonStyle = VideoPlayerActionButtonStyle(
  backgroundColor: "#ffffff",
  textColor: "#000000",
  shape: ButtonShape.oval,
);

// Specifies the appearance of the countdown timer.
storyBlockConfiguration.countdownTimerConfiguration =
    CountdownTimerConfiguration(
  appearance: CountdownTimerAppearanceMode.light,
);

StoryBlock(
  source: StoryBlockSource.playlist,
  channel: "your encoded channel id",
  playlist: "your encoded playlist id",
  storyBlockConfiguration: storyBlockConfiguration,
);

Customize player styles for openVideoPlayer API

// Configure player configuration for openVideoPlayer API
OpenVideoPlayerConfiguration openVideoPlayerConfiguration =
    OpenVideoPlayerConfiguration();

// Customize the video overlay CTA button style
openVideoPlayerConfiguration.ctaButtonStyle = VideoPlayerCTAStyle(
  backgroundColor: "#2089ff",
  textColor: "#ffffff",
  fontSize: 14,
  shape: ButtonShape.roundRectangle,
  iOSFontInfo: IOSFontInfo(
    fontName: "Helvetica",
    systemFontStyle: IOSSystemFontStyle.italic,
    systemFontWeight: IOSSystemFontWeight.heavy,
  ), // or ButtonShape.oval
);

// Customize the style of Action button style, such as share button
openVideoPlayerConfiguration.actionButtonStyle =
    VideoPlayerActionButtonStyle(
  backgroundColor: "#2089ff",
  textColor: "#ffffff",
  dividingLineColor: "#ffffff",
  shape: ButtonShape.oval,
);

// Customize the style of cancel button style
openVideoPlayerConfiguration.cancelButtonStyle =
    VideoPlayerActionButtonStyle(
  backgroundColor: "#ffffff",
  textColor: "#000000",
  shape: ButtonShape.oval,
);

// Specifies the appearance of the countdown timer
openVideoPlayerConfiguration.countdownTimerConfiguration =
    CountdownTimerConfiguration(
  appearance: CountdownTimerAppearanceMode.light,
);

FireworkSDK.getInstance().openVideoPlayer(
  url: url,
  config: openVideoPlayerConfiguration,
);

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

Set enablePictureInPicture to true on Dart side

// Enable PiP for VideoFeed widget
VideoFeed(
  height: 200,
  source: VideoFeedSource.discover,
  enablePictureInPicture: true,
);

// Enable PiP for StoryBlock widget
StoryBlock(
  height: 400,
  source: StoryBlockSource.discover,
  enablePictureInPicture: true,
);

// Enable PiP for openVideoPlayer API
FireworkSDK.getInstance().openVideoPlayer(
  url: url,
  config: OpenVideoPlayerConfiguration(
    enablePictureInPicture: true,
  ),
);

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:

For more details, please refer to https://developer.apple.com/documentation/xcode/adding-images-to-your-xcode-project

Set up Android project

Add the custom icons to the drawable directory(App resources overview and Support different pixel densities) in your Android project. Such as:

Configure the icon names on the Dart side

// Configure player configuration for VideoFeed widget
final videoPlayerConfiguration = VideoPlayerConfiguration();
videoPlayerConfiguration.buttonConfiguration =
    VideoPlayerButtonConfiguration(
  videoDetailButton: ButtonInfo(imageName: "custom_more"),
  closeButton: ButtonInfo(imageName: "custom_close"),
  pipButton: ButtonInfo(imageName: "custom_pip"),
  muteButton: ButtonInfo(imageName: "custom_mute"),
  unmuteButton: ButtonInfo(imageName: "custom_unmute"),
  playButton: ButtonInfo(imageName: "custom_play"),
  pauseButton: ButtonInfo(imageName: "custom_pause"),
);
VideoFeed(
  source: VideoFeedSource.discover,
  videoPlayerConfiguration: videoPlayerConfiguration,
);

// Configure player configuration for StoryBlock widget
final storyBlockConfiguration = StoryBlockConfiguration();
storyBlockConfiguration.buttonConfiguration =
    VideoPlayerButtonConfiguration(
  videoDetailButton: ButtonInfo(imageName: "custom_more"),
  closeButton: ButtonInfo(imageName: "custom_close"),
  pipButton: ButtonInfo(imageName: "custom_pip"),
  muteButton: ButtonInfo(imageName: "custom_mute"),
  unmuteButton: ButtonInfo(imageName: "custom_unmute"),
  playButton: ButtonInfo(imageName: "custom_play"),
  pauseButton: ButtonInfo(imageName: "custom_pause"),
);
StoryBlock(
  source: StoryBlockSource.discover,
  storyBlockConfiguration: storyBlockConfiguration,
);

// Configure player configuration for openVideoPlayer API
OpenVideoPlayerConfiguration openVideoPlayerConfiguration =
    OpenVideoPlayerConfiguration();
openVideoPlayerConfiguration.buttonConfiguration =
    VideoPlayerButtonConfiguration(
  videoDetailButton: ButtonInfo(imageName: "custom_more"),
  closeButton: ButtonInfo(imageName: "custom_close"),
  pipButton: ButtonInfo(imageName: "custom_pip"),
  muteButton: ButtonInfo(imageName: "custom_mute"),
  unmuteButton: ButtonInfo(imageName: "custom_unmute"),
  playButton: ButtonInfo(imageName: "custom_play"),
  pauseButton: ButtonInfo(imageName: "custom_pause"),
);
FireworkSDK.getInstance().openVideoPlayer(
  url: "url",
  config: openVideoPlayerConfiguration,
);

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

// Configure player configuration for VideoFeed widget
final videoPlayerConfiguration = VideoPlayerConfiguration();
videoPlayerConfiguration.videoPlayerLogoConfiguration =
    VideoPlayerLogoConfiguration(
  option: VideoPlayerLogoOption.creator,
  encodedId: "your encoded channel id",
);

VideoFeed(
  source: VideoFeedSource.playlist,
  channel: "your encoded channel id",
  playlist: "your encoded playlist id",
  videoPlayerConfiguration: videoPlayerConfiguration,
);

// Configure player configuration for StoryBlock widget
final storyBlockConfiguration = StoryBlockConfiguration();
storyBlockConfiguration.videoPlayerLogoConfiguration =
    VideoPlayerLogoConfiguration(
  option: VideoPlayerLogoOption.creator,
  encodedId: "your encoded channel id",
);
StoryBlock(
  source: StoryBlockSource.playlist,
  channel: "your encoded channel id",
  playlist: "your encoded playlist id",
  storyBlockConfiguration: storyBlockConfiguration,
);

// Configure player configuration for openVideoPlayer API
OpenVideoPlayerConfiguration openVideoPlayerConfiguration =
    OpenVideoPlayerConfiguration();
openVideoPlayerConfiguration.videoPlayerLogoConfiguration =
    VideoPlayerLogoConfiguration(
  option: VideoPlayerLogoOption.creator,
  encodedId: "your encoded channel id",
);
FireworkSDK.getInstance().openVideoPlayer(
  url: "url",
  config: openVideoPlayerConfiguration,
);

Customize Ad badge

We offer a global API for customizing ad badges, and these configurations are applicable to both the player and the video feed. The API is FireworkSDK.getInstance().adBadgeConfiguration.

FireworkSDK.getInstance().adBadgeConfiguration = AdBadgeConfiguration(
  badgeTextType: AdBadgeTextType.ad,
  backgroundColor: "#ffffff",
  textColor: "#000000",
  androidFontInfo: AndroidFontInfo(
    isCustom: false,
    typefaceName: "SANS_SERIF",
  ),
);

Customize other player configurations

// Configure player configuration for VideoFeed widget
final videoPlayerConfiguration = VideoPlayerConfiguration();
// Configure player style: full or fit
videoPlayerConfiguration.playerStyle = VideoPlayerStyle.full;
// Configure video complete action: advanceToNext or loop
// On iOS, the property only applies to full-screen mode but not to embedded mode
// On Android, the property applies to both full-screen and embedded modes
videoPlayerConfiguration.videoCompleteAction =
    VideoPlayerCompleteAction.advanceToNext;
// Indicates if the video player shows share button
videoPlayerConfiguration.showShareButton = true;
// Indicates if the video player shows playback button
videoPlayerConfiguration.showPlaybackButton = true;
// Indicates if the video player shows mute button
videoPlayerConfiguration.showMuteButton = true;
// Specifies if the video detail title should be showed
videoPlayerConfiguration.showVideoDetailTitle = true;

VideoFeed(
  source: VideoFeedSource.playlist,
  channel: "your encoded channel id",
  playlist: "your encoded playlist id",
  videoPlayerConfiguration: videoPlayerConfiguration,
);

// Configure player configuration for StoryBlock widget
final storyBlockConfiguration = StoryBlockConfiguration();
// Configure player style: full or fit
storyBlockConfiguration.playerStyle = VideoPlayerStyle.full;
// Configure video complete action: advanceToNext or loop
storyBlockConfiguration.videoCompleteAction =
    VideoPlayerCompleteAction.advanceToNext;
// Indicates if the video player shows share button
storyBlockConfiguration.showShareButton = true;
// Indicates if the video player shows playback button
storyBlockConfiguration.showPlaybackButton = true;
// Indicates if the video player shows mute button
storyBlockConfiguration.showMuteButton = true;
// Specifies if the video detail title should be showed
storyBlockConfiguration.showVideoDetailTitle = true;
StoryBlock(
  source: StoryBlockSource.playlist,
  channel: "your encoded channel id",
  playlist: "your encoded playlist id",
  storyBlockConfiguration: storyBlockConfiguration,
);

// Configure player configuration for openVideoPlayer API
OpenVideoPlayerConfiguration openVideoPlayerConfiguration =
    OpenVideoPlayerConfiguration();
// Configure player style: full or fit
openVideoPlayerConfiguration.playerStyle = VideoPlayerStyle.full;
// Configure video complete action: advanceToNext or loop
openVideoPlayerConfiguration.videoCompleteAction =
    VideoPlayerCompleteAction.advanceToNext;
// Indicates if the video player shows share button
openVideoPlayerConfiguration.showShareButton = true;
// Indicates if the video player shows playback button
openVideoPlayerConfiguration.showPlaybackButton = true;
// Indicates if the video player shows mute button
openVideoPlayerConfiguration.showMuteButton = true;
// Specifies if the video detail title should be showed
openVideoPlayerConfiguration.showVideoDetailTitle = true;
FireworkSDK.getInstance().openVideoPlayer(
  url: url,
  config: openVideoPlayerConfiguration,
);
PreviousVideo feed configurations (Flutter)NextShopping configurations (Flutter)

Last updated

Was this helpful?