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