One-to-one Virtual ShoppingBusiness Portal

Video Player (Android)

Player Mode

Determines the player mode and can be one of

  • PlayerMode.FIT_MODE: This state causes the player surface cuts into a smaller area of the screen while it maintains the 9:16 aspect ratio. Also, it makes the corner of the player rounded. (default value)

  • PlayerMode.FULL_BLEED_MODE: This state causes the player surface to fill the mobile screen without rounding the corner of the screen, Also while the source video maintains the 9:16 aspect ratio, the visible player fills the screen of the device, thus causing a minimal part of the video cut off in the edges.

Player Mode needs to be configured along with FwVideoFeedView

   <com.firework.videofeed.FwVideoFeedView
        android:id="@+id/videoFeedView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:fw_playerMode="fit_mode"
      />

Alternatively, this can be set as below in the class where ViewOptions are set for the FwideoFeedView

val playerOption = PlayerOption.Builder()
    .playerMode(PlayerMode.FIT_MODE) // Set the player mode 
    .build()
    
val viewOptions = ViewOptions.Builder()
    .playerOption(playerOption)
    .build()

val videoFeedView = findViewById<FwVideoFeedView>(R.id.videoFeedView)
videoFeedView.init(viewOptions)

Start the next video automatically

Use fw_autoPlayOnComplete attribute of FwVideoFeedView to control if the next video is automatically played after the previous one has ended. When true the player will play the next video after the current video finishes. Whenfalse, playing video will loop until users explicitly swipe away. Default value is true.

    <com.firework.videofeed.FwVideoFeedView
        android:id="@+id/videoFeedView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:fw_autoPlayOnComplete="true"
      />

Alternatively, this attribute can be set via ViewOptions class:

val playerOption = PlayerOption.Builder()
    .autoPlayOnComplete(true)
    .build()
            
val viewOptions = ViewOptions.Builder()
    .playerOption(playerOption)
    .build()

val videoFeedView = findViewById<FwVideoFeedView>(R.id.videoFeedView)
videoFeedView.init(viewOptions)

Show/hide more button in player

Use fw_showPlayMoreButton attribute of FwVideoFeedView to control if the more button is visible in the player. Default value is true.

    <com.firework.videofeed.FwVideoFeedView
        android:id="@+id/videoFeedView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:fw_playerShowMoreButton="false"
      />

Alternatively, this attribute can be set via ViewOptions class:

val playerOption = PlayerOption.Builder()
    .showMoreButton(true)
    .build()
 
val viewOptions = ViewOptions.Builder()
    .playerOption(playerOption)
    .build()

val videoFeedView = findViewById<FwVideoFeedView>(R.id.videoFeedView)
videoFeedView.init(viewOptions)

Show/hide play and pause button in replay videos

Use fw_showPlayPauseButtonInReplay attribute of FwVideoFeedView to control if the play/pause button is visible in the player. Default value is true.

    <com.firework.videofeed.FwVideoFeedView
        android:id="@+id/videoFeedView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:fw_showPlayPauseButtonInReplay="false"
      />

Alternatively, this attribute can be set via ViewOptions class:

val playerOption = PlayerOption.Builder()
    .showPlayPauseButtonInReplay(true)
    .build()
 
val viewOptions = ViewOptions.Builder()
    .playerOption(playerOption)
    .build()

val videoFeedView = findViewById<FwVideoFeedView>(R.id.videoFeedView)
videoFeedView.init(viewOptions)

Show/hide the Caption

Use fw_playerShowCaption the attribute FwVideoFeedView to control if the mute/unmute button is visible in the player. DefaultDefault value is false.

    <com.firework.videofeed.FwVideoFeedView
        android:id="@+id/videoFeedView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:fw_playerShowCaption="true"
      />

Alternatively, this attribute can be set via ViewOptions class:

val playerOption = PlayerOption.Builder()
    .showCaption(true)
    .build()
    
val viewOptions = ViewOptions.Builder()
    .playerOption(playerOption)
    .build()
    
val videoFeedView = findViewById<FwVideoFeedView>(R.id.videoFeedView)
videoFeedView.init(viewOptions)

Show/hide the mute and unmute button

Use fw_showMuteButton the attribute FwVideoFeedView to control if the mute/unmute button is visible in the player. DefaultDefault value is false.

    <com.firework.videofeed.FwVideoFeedView
        android:id="@+id/videoFeedView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:fw_showMuteButton="true"
      />

Alternatively, this attribute can be set via ViewOptions class:

val playerOption = PlayerOption.Builder()
    .showMuteButton(true)
    .build()
    
val viewOptions = ViewOptions.Builder()
    .playerOption(playerOption)
    .build()
    
val videoFeedView = findViewById<FwVideoFeedView>(R.id.videoFeedView)
videoFeedView.init(viewOptions)

Enable PIP/Floating player (Picture-in-Picture)

This attribute can be set via PlayerOption in ViewOptions class. Default value is false.

val playerOption = PlayerOption.Builder()
    .enablePipMode(true)
    .build()
    
val viewOptions = ViewOptions.Builder()
    .playerOption(playerOption)
    .build()
    
val videoFeedView = findViewById<FwVideoFeedView>(R.id.videoFeedView)
videoFeedView.init(viewOptions)

PiP Note

In Android 11, removing the app's task from the task manager doesn't kill the player in PiP mode. Therefore we suggest using the close PiP method to avoid any invalid state after returning from PiP mode while the task is removed.

This can be done on you Acitivity's onDestroy method:

    override fun onDestroy() {
        FireworkSdk.closePip()   
        super.onDestroy()
    }

Show/hide the Video title in the share dialog

This attribute can be set via ViewOptions class:

val videoDetailsOption = VideoDetailsOption.Builder()
    .showCaption(showVideoDetailsCaption)
    .build()

val playerUiOptions = PlayerUiOption.Builder()
    .videoDetailsOption(videoDetailsOption)
    .build()
            
val playerOption = PlayerOption.Builder()
    .playerUiOptions(playerUiOptions)
    .build()
    
val viewOptions = ViewOptions.Builder()
    .playerOption(playerOption)
    .build()

val videoFeedView = findViewById<FwVideoFeedView>(R.id.videoFeedView)
videoFeedView.init(viewOptions)

Show/hide the Firework logo in the share dialog

Use fw_showFireworkLogo attribute of FwVideoFeedView to control if the share button is visible in the player. The default value is true.

    <com.firework.videofeed.FwVideoFeedView
        android:id="@+id/videoFeedView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:fw_showFireworkLogo="true"
      />

Alternatively, this attribute can be set via ViewOptions class:

val playerOption = PlayerOption.Builder()
    .showFireworkLogo(true)
    .build()
    
val viewOptions = ViewOptions.Builder()
    .playerOption(playerOption)
    .build()

val videoFeedView = findViewById<FwVideoFeedView>(R.id.videoFeedView)
videoFeedView.init(viewOptions)

Show/hide share button

Use fw_showShareButton attribute of FwVideoFeedView to control if the share button is visible in the player. Default value is true.

    <com.firework.videofeed.FwVideoFeedView
        android:id="@+id/videoFeedView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:fw_showShareButton="false"
      />

Alternatively, this attribute can be set via ViewOptions class:

val playerOptions = PlayerOption.Builder()
        .showShareButton(true)
        .build()
val viewOptions = ViewOptions.Builder()
        .playerOption(playerOptions)
        .build()

// init video feed view with view options
 videoFeedView.init(viewOptions);

Enable/disable autoplay

Use fw_feedAutoplay attribute of FwVideoFeedView to control if the video feed should use autoplay, this means that the first visible item of the feed will start playing. Default value is false.

    <com.firework.videofeed.FwVideoFeedView
        android:id="@+id/videoFeedView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:fw_feedAutoplay="true"
      />

Alternatively, this attribute can be set via ViewOptions class:

val playerOptions = PlayerOption.Builder()
            .autoplay(true)
            .build()
            
val viewOptions = ViewOptions
            .Builder()
            .playerOption(playerOptions)
            .build()

val videoFeedView = findViewById<FwVideoFeedView>(R.id.videoFeedView)
videoFeedView.init(viewOptions)

Custom CTA button visibility delay

  • CtaDelayUnit.SECONDS: This unit type makes the CTA button become visible at the number of seconds set, this unit type only supports values from 0.0f inclusive to 10.0f inclusive [0.0f, 10.0f], otherwise when trying to play a video it will use 3 seconds default value.

  • CtaDelayUnit.PERCENTAGE: This unit type makes the CTA button become visible at the percentage set of the video, for example, if the video is 20 seconds and the percentage is set to 0.6f (60%) the CTA button will become visible at 12 seconds, this unit type only supports values from 0.0f inclusive to 1.0f exclusive [0%, 100%), otherwise when trying to play a video it will use 0.2f (20%) default value.

Use fw_ctaButtonDelayUnitType and fw_ctaButtonDelayDuration attribute of VideoFeedView to control the visibility delay of CTA button.

    <com.firework.videofeed.FwVideoFeedView
        android:id="@+id/videoFeedView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:fw_ctaButtonDelayDuration=".5"
        app:fw_ctaButtonDelayUnitType="percentage" />

Alternatively, this attribute can be set via ViewOptions class:

val ctaDelay = CtaDelay(ctaDelayDuration, CtaDelayUnit.SECONDS)

val viewOptions = ViewOptions.Builder()
    .ctaDelay(ctaDelay)
    .build()

val videoFeedView = findViewById<VideoFeedView>(R.id.videoFeedView)
videoFeedView.init(viewOptions)

Custom CTA button highlight delay

  • CtaDelayUnit.SECONDS: This unit type makes the CTA button highlight at the number of seconds set after cta visibility delay ended, this unit type only supports values from 0.0f inclusive to 10.0f inclusive [0.0f, 10.0f], otherwise when trying to play a video it will use 2 seconds default value.

  • CtaDelayUnit.PERCENTAGE: This unit type makes the CTA button highlight at the percentage set of the video, for example, if the video is 20 seconds and the percentage is set to 0.6f (60%) the CTA button will highlight at 12 seconds, this unit type only supports values from 0.0f inclusive to 1.0f exclusive [0%, 100%), otherwise when trying to play a video it will use 0.2f (20%) default value.

This attribute can only be set via ViewOptions class:

val ctaHighlightDelay = CtaDelay(ctaHighlightDelayDuration, CtaDelayUnit.SECONDS)

val viewOptions = ViewOptions.Builder()
    .ctaHighlightDelay(ctaHighlightDelay)
    .build()

val videoFeedView = findViewById<VideoFeedView>(R.id.videoFeedView)
videoFeedView.init(viewOptions)

Custom CTA button UI

Override FwCtaButtonViewStyle to modify the appearance of the CTA button:

  • CTA button background color

  • CTA button text color

  • CTA button typeface (Font)

Use android:backgroundTint, android:textColor and android:fontFamily attributes to modify the appearance of the CTA button

<resources>
        <style name="FwCtaButtonViewStyle">
                <item name="android:backgroundTint">@color/customBackgroundColor</item>
                <item name="android:textColor">@android:color/customTextColor</item>
                <item name="android:fontFamily">@font/customFont</item>
        </style>
</resources>

To override the CTA button shape properties (rounded corners radius for example) declare a separate style and apply it to shapeAppearanceOverlay style attribute:

<resources>
        <style name="FwCtaButtonViewStyle">
                <item name="shapeAppearanceOverlay">@style/MyCustomCtaButtonShapeStyle</item>
        </style>
        
        <style name="MyCustomCtaButtonShapeStyle">
                <item name="cornerFamily">rounded</item>  <!-- possible values "rounded" and "cut" -->
                <item name="cornerSizeTopLeft">6dp</item>
                <item name="cornerSizeBottomLeft">6dp</item>
                <item name="cornerSizeBottomRight">6dp</item>
                <item name="cornerSizeTopRight">6dp</item>
        </style>
</resources>

Custom Handling of CTA

Refer to CTAClickHandler Section in

Customize player UI buttons

The SDK provides a way to modify some icons in the player. The following icons can be modified, if not set default value will be used:

  • Player detail button (More Button): The icon on the top left with three dots that show player details like caption or share options.

  • Mute button: The icon that represents the muted state of the player.

  • Unmute button: The icon that represents the unmuted state of the player.

  • Close button: The icon on the top right of the player that closes the player.

  • Play button (Playback Button): The icon that represents the paused state is shown at the center of the player when the player is paused.

  • Pause button (Playback Button): The icon that represents the play state and is shown at the center of the player when the player is playing (when WCAG Talkback is on).

These attributes can be set via ViewOptions class:

// You can define a custom icon for any of the following options.
val customIcon =
    WidgetImage(
        drawableRes = R.drawable.drawable_1, // Your drawable
        tintColor = Color.WHITE, // Your tint
    )
            
val customIcon2 =  
    WidgetImage(
        drawableRes = R.drawable.drawable_2, // Your drawable
        tintColor = Color.WHITE, // Your tint
    )
            
val videoDetailsOption = VideoDetailsOption.Builder()
    .buttonIcon(customIcon)
    .build()
    
val closeButtonOption = CloseButtonOption.Builder()
    .icon(customIcon)
    .build()

val pipButtonOption = PipButtonOption.Builder()
    .icon(customIcon)
    .build()
    
val muteButtonOption = MuteButtonOption.Builder()
    .muteIcon(customIcon)
    .unmuteIcon(customIcon2)
    .build()
    
val playbackButtonOption = PlaybackButtonOption.Builder()
    .playIcon(customIcon)
    .pauseIcon(customIcon2)
    .build()

val playerUiOptions = PlayerUiOption.Builder()
    .videoDetailsOption(videoDetailsOption)
    .closeButtonOption(closeButtonOption)
    .pipButtonOption(pipButtonOption)
    .muteButtonOption(muteButtonOption)
    .playbackButtonOption(playbackButtonOption)
    .build()
            
val playerOption = PlayerOption.Builder()
    .playerUiOptions(playerUiOptions)
    .build()
    
val viewOptions = ViewOptions.Builder()
    .playerOption(playerOption)
    .build()

val videoFeedView = findViewById<FwVideoFeedView>(R.id.videoFeedView)
videoFeedView.init(viewOptions)

Player PIP/Floating player

For managing PIP/Floating player you can use the following functions:

#?## Enter PIP/Floating player

If you want to enter pip mode programmatically, you can call the following function:

FireworkSdk.enterPip(
    { onSuccess ->
        // true if entering PIP was a success
    },
)

Close PIP/Floating player

If you want to close PIP/Floating player for some reason, you can call the following function:

FireworkSdk.closePip()

Enable Livestream countdown

The Livesteam countdown is a feature that allows the host app to display a countdown timer before the livestream over the trailer video. This also allows the users to set a reminder for the livestream on their calendar.

val livestreamCountDownOption = LivestreamCountDownOption.Builder()
    .isHidden(false)
    .theme(Theme.DARK)
    .build()
val playerOptions = PlayerOption.Builder()
    .livestreamCountDownOption(livestreamCountDownOption)
    .build()
val viewOptions = ViewOptions.Builder()
    .playerOption(playerOptions)
    .build()

Show the Channel logo in the player

The Player allows you to decide if you want to show the channel logo on the video or not. By default, the channel logo is not visible and we only have the Kebab menu.

Possible options are:

  • LogoConfig.NoLogo

  • LogoConfig.Logo.AggregatorLogo(channelId, isClickable)

  • LogoConfig.Logo.CreatorLogo(channelId, isClickable)

val logo = LogoConfig.Logo.AggregatorLogo(logoChannelId)

val playerOptions = PlayerOption.Builder()
    .logoConfig(logo)
    .build()
val viewOptions = ViewOptions.Builder()
    .playerOption(playerOptions)
    .build()

Rearrange the order for mute/unmute button and closed captions button

The player lets you rearrange the icon order for those two buttons on the player screen.

viewOptions {
    playerOptions {
        // Define the order of mute/unmute and close captions button, default value is false. Ture: close captions button at the right of mute/unmute. False: close captions button at the left of mute/unmute.
        reverseAudioControls(false) 
    }
}

Change the color of the closed captions

We've added two options to let you customize the background and text colors of closed captions.

viewOptions {
    playerOptions {
        // Define closed captions background color
        subtitleBackgroundColor(0X66121212.toInt()) 
        // Define closed captions text color
        subtitleTextColor(0XFFFFFFFF.toInt())  
    }
}

Note

You can set click non-clickable if you don't want to see the share menu when clicking on the logo.

PreviousProduct HydrationNextStoryBlock (Android)

Last updated