Player configuration

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

Sample codes

// Configure player configuration for VideoFeed widget
final videoPlayerConfiguration = VideoPlayerConfiguration();
videoPlayerConfiguration.playerStyle =
    VideoPlayerStyle.full; // or VideoPlayerStyle.fit;
videoPlayerConfiguration.videoCompleteAction = VideoPlayerCompleteAction
    .advanceToNext; // or VideoPlayerCompleteAction.loop;
videoPlayerConfiguration.showShareButton = true; // or false
videoPlayerConfiguration.ctaButtonStyle = VideoPlayerCTAStyle(
  shape: ButtonShape.roundRectangle, // or ButtonShape.oval
);
videoPlayerConfiguration.buttonConfiguration =
    VideoPlayerButtonConfiguration(
  pipButton: ButtonInfo(
    imageName: "custom_pip",
  ),
);
videoPlayerConfiguration.actionButtonStyle = VideoPlayerActionButtonStyle(
  backgroundColor: "#2089ff",
  textColor: "#ffffff",
  shape: ButtonShape.oval,
);
videoPlayerConfiguration.cancelButtonStyle = VideoPlayerActionButtonStyle(
  backgroundColor: "#ffffff",
  textColor: "#000000",
  shape: ButtonShape.oval,
);

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.playerStyle =
    VideoPlayerStyle.full; // or VideoPlayerStyle.fit;
storyBlockConfiguration.videoCompleteAction = VideoPlayerCompleteAction
    .advanceToNext; // or VideoPlayerCompleteAction.loop;
storyBlockConfiguration.showShareButton = true; // or false
storyBlockConfiguration.ctaButtonStyle = VideoPlayerCTAStyle(
  shape: ButtonShape.roundRectangle, // or ButtonShape.oval
);
storyBlockConfiguration.buttonConfiguration =
    VideoPlayerButtonConfiguration(
  pipButton: ButtonInfo(
    imageName: "custom_pip",
  ),
);
storyBlockConfiguration.actionButtonStyle = VideoPlayerActionButtonStyle(
  backgroundColor: "#2089ff",
  textColor: "#ffffff",
  dividingLineColor: "#c0c0c0",
  shape: ButtonShape.oval,
);
storyBlockConfiguration.cancelButtonStyle = VideoPlayerActionButtonStyle(
  backgroundColor: "#ffffff",
  textColor: "#000000",
  shape: ButtonShape.oval,
);
storyBlockConfiguration.buttonConfiguration =
    VideoPlayerButtonConfiguration(
  pipButton: ButtonInfo(
    imageName: "custom_pip",
  ),
);
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.playerStyle =
    VideoPlayerStyle.full; // or VideoPlayerStyle.fit;
openVideoPlayerConfiguration.videoCompleteAction = VideoPlayerCompleteAction
    .advanceToNext; // or VideoPlayerCompleteAction.loop;
openVideoPlayerConfiguration.showShareButton = true; // or false
openVideoPlayerConfiguration.ctaButtonStyle = VideoPlayerCTAStyle(
  shape: ButtonShape.roundRectangle, // or ButtonShape.oval
);
openVideoPlayerConfiguration.buttonConfiguration =
    VideoPlayerButtonConfiguration(
  pipButton: ButtonInfo(
    imageName: "custom_pip",
  ),
);
openVideoPlayerConfiguration.actionButtonStyle =
    VideoPlayerActionButtonStyle(
  backgroundColor: "#2089ff",
  textColor: "#ffffff",
  shape: ButtonShape.oval,
);
openVideoPlayerConfiguration.cancelButtonStyle =
    VideoPlayerActionButtonStyle(
  backgroundColor: "#ffffff",
  textColor: "#000000",
  shape: ButtonShape.oval,
);
openVideoPlayerConfiguration.buttonConfiguration =
    VideoPlayerButtonConfiguration(
  pipButton: ButtonInfo(
    imageName: "custom_pip",
  ),
);
FireworkSDK.getInstance().openVideoPlayer(
  url: "url",
  config: openVideoPlayerConfiguration,
);

Highlight configurations

Customize player icon

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

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

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

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