Firework for Developers
One-to-one Virtual ShoppingBusiness Portal
  • Welcome to Firework for Developers
  • Firework Interactive Video and One-to-many Digital Showroom
  • Web
    • Getting Started (Web)
      • Shopify
      • Magento
      • Wordpress (WooCommerce)
      • Salesforce Commerce Cloud
      • BigCommerce
    • Integration Guide for Web
      • Components
        • Hero Unit
        • Carousel / Grid
        • Storyblock (Web)
        • Player (Floating)
        • Storylink
      • Styling
      • Feed Attributes
      • Player
        • Configuration
          • Appearance
      • Video customization
        • Video Factory
        • CTA Button
        • Product cards
      • Events
        • Embed Feed and Storyblock Events
        • Video player events
        • Live stream events
        • Shopping events
      • Shopping Integration (V2)
        • Introduction
        • Shopping APIs
        • Product Hydration
        • Product Factory
        • Cart Sync
        • Tracking
          • Purchase
          • Add to cart
          • Remove from cart
          • Page viewed
        • Shopping Integration FAQ
        • Migrate from V1
      • Web SDK
      • Enhanced Picture-in-Picture
      • Privacy settings
        • Tracking settings
        • Cookies management
        • Content Security Policy
    • Telemetry console
    • Firework Service Domains
    • FAQ & Troubleshooting (Web)
  • Android SDK
    • Integration Guide for Android SDK
      • Getting Started (Android)
      • Video Feed (Android)
        • Video Feed Layouts (Android)
        • Channel Feed (Android)
        • Discover Feed (Android)
        • Playlist Feed (Android)
        • Dynamic Content Feed
        • Channel Hashtags Feed
        • Sku Feed
        • Single Content Feed
        • Configure Video Feed
      • Customization
        • CTA
      • Analytics (Android)
      • Shoppable Videos (Android)
        • Product Hydration
      • Live Stream Support (Android)
      • Video Player (Android)
      • StoryBlock (Android)
      • Share & Video Deep linking
      • Ad Support (Android)
      • Configure Video Advertisements Source (Android)
      • In-app Language Switches
      • Compose support(Android)
    • Sample App (Android)
    • FAQ & Troubleshooting (Android)
    • Changelog (Android)
  • iOS SDK
    • Integration Guide for iOS SDK
      • Getting Started (iOS)
      • ATT compliance (iOS)
      • Video Feed (iOS)
        • Discover Feed(iOS)
        • Channel Feed (iOS)
        • Playlist Feed (iOS)
        • Playlist Group Feed (iOS)
        • Dynamic Content (iOS)
        • Hashtag Playlist (iOS)
        • SKU Playlist (iOS)
        • Video Ads (iOS)
        • Video Feed Layouts (iOS)
      • Story Block (iOS)
      • Customization (iOS)
        • Video feed configurations (iOS)
        • Player configurations (iOS)
        • Shopping configurations (iOS)
          • Customize product card on videos using the custom view (iOS)
        • Customize click behaviors (iOS)
      • Shopping (iOS)
      • Live Stream Support (iOS)
      • Analytics (iOS)
      • Share & Deeplinking(iOS)
      • Ad Support (iOS)
    • Sample App (iOS)
    • FAQ & Troubleshooting (iOS)
    • Changelog (iOS)
  • React Native SDK
    • Integration Guide for React Native SDK V2
      • Getting Started (React Native)
      • ATT compliance React Native (iOS)
      • Video Feed (React Native)
      • Story Block (React Native)
      • Customization (React Native)
        • Video feed configurations (React Native)
        • Player configurations (React Native)
        • Shopping configurations (React Native)
          • Customize product card on videos using the custom view (React Native)
        • Customize click behaviors (React Native)
      • Shopping (React Native)
      • Live Stream Support (React Native)
      • Ad Support (React Native)
      • Analytics (React Native)
      • App-level Language Setting (React Native)
      • Share & Video Deeplinking (React Native)
      • Android Style (React Native)
      • Inject Android Image Loader (React Native)
      • Integrate SDKs in Hybrid React Native and native Apps
      • Reference (React Native)
      • Sample App (React Native)
      • FAQ & Troubleshooting (React Native)
      • Changelog (React Native)
  • Flutter SDK
    • Integration Guide for Flutter SDK V2
      • Getting Started (Flutter)
      • ATT compliance Flutter (iOS)
      • Video Feed (Flutter)
      • Story Block (Flutter)
      • Customization (Flutter)
        • Video feed configurations (Flutter)
        • Player configurations (Flutter)
        • Shopping configurations (Flutter)
          • Customize product card on videos using the custom view (Flutter)
        • Customize click behaviors (Flutter)
      • Live Stream Support (Flutter)
      • Shopping (Flutter)
      • Ad Support (Flutter)
      • Analytics (Flutter)
      • App-level Language Setting (Flutter)
      • Share & Video Deeplinking (Flutter)
      • Inject Android Image Loader (Flutter)
      • Android Style (Flutter)
      • Integrate SDKs in Hybrid Flutter and native Apps
      • Reference (Flutter)
      • Sample App (Flutter)
      • FAQ & Troubleshooting (Flutter)
      • Changelog (Flutter)
  • Help Articles
    • Importing Products to Firework
    • Adding products to a video
    • Displaying product videos on product pages using hashtag filtering(Web)
    • Syncing Carts
    • Encoded IDs
Powered by GitBook
On this page
  • Configuration reference
  • Customize player styles
  • Enable PiP(Picture in Picture)
  • Customize player icons
  • Customize player logo
  • Customize Ad badge
  • Customize video or livestream shared URL
  • Customize other player configurations

Was this helpful?

  1. Flutter SDK
  2. Integration Guide for Flutter SDK V2
  3. Customization (Flutter)

Player configurations (Flutter)

PreviousVideo feed configurations (Flutter)NextShopping configurations (Flutter)

Last updated 2 months ago

Was this helpful?

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

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

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:

Set up Android project

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,
);

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.

// 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, // or AdBadgeTextType.sponsored
  backgroundColor: "#ffffff",
  textColor: "#000000",
  androidFontInfo: AndroidFontInfo(
    isCustom: false,
    typefaceName: "SANS_SERIF",
  ),
);

Customize video or livestream shared URL

To customize video or livestream shared URL, you could use FireworkSDK.getInstance().onCustomShareUrl to customize the URL. The sample codes are:

FireworkSDK.getInstance().onCustomShareUrl =
    (CustomShareUrlEvent? event) async {
  if (event != null) {
    final originalUrl = event.url;
    final video = event.video;

    // Here, you can write code to customize the shared URL based on event parameters,
    // such as the original URL and video details.
    // For example, you could use appsFlyerSdk.generateInviteLink to generate AppsFlyer OneLink.
    // The doc is https://github.com/AppsFlyerSDK/appsflyer-flutter-plugin/blob/master/doc/AdvancedAPI.md#-user-invite
    
    // Return the customized shared URL.
    // For example, the customized shared URL can be an AppsFlyer OneLink.
    return CustomShareUrlResult(
      url: "customized shared url",
    );
  }
  
  // If null is returned, the default shared URL will be used.
  return null;
};

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,
);

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:

For more details, please refer to

Add the custom icons to the drawable directory( and) in your Android project. Such as:

VideoPlayerConfiguration
StoryBlockConfiguration
OpenVideoPlayerConfiguration
Apple Documentation
https://developer.apple.com/documentation/xcode/adding-images-to-your-xcode-project
App resources overview
Support different pixel densities