GuidesAPI ReferenceRelease Notes
HomeLog InHome
Guides

Videos Inline Player Modes

This section covers the player mode options for inline video players, including their configurations and use cases.

PlayerMode defines the presentation modes for inline video players, determining UI behavior and interaction levels. Each mode specifies how the inline player appears and behaves, including styling configuration and capabilities.

Available Modes

Preview Mode

Mode declaration

data class Preview(
    val previewPlayerStyle: BlazeVideosInlinePreviewPlayerStyle,
    val fullScreenPlayerStyle: BlazeVideosPlayerStyle? = null,
) : PlayerMode()

Preview mode designed for lightweight preview experiences with minimal user controls.

Behavior

  • Shows video preview/thumbnail with minimal controls
  • Placeholder click opens fullscreen player (Preview mode only)
  • Optimized for feed/list contexts where videos auto-preview

Use Cases

  • Video feeds and carousels
  • Content discovery interfaces
  • Auto-playing preview content

Configuration Parameters

previewPlayerStyle: BlazeVideosInlinePreviewPlayerStyle.

  • Main styling configuration for inline preview mode

fullScreenPlayerStyle: BlazeVideosPlayerStyle (Optional)

  • Styling configuration for fullscreen mode when user clicks placeholder or transitions from inline player

Example Usage

val previewMode = BlazeVideosInlinePlayer.PlayerMode.Preview(
    previewPlayerStyle = BlazeVideosInlinePreviewPlayerStyle.base().apply {
        backgroundColor = Color.BLACK
        buttons.mute.isVisible = false
    },
    fullScreenPlayerStyle = BlazeVideosPlayerStyle.base() // Optional
)

val player = BlazeVideosInlinePlayer(
    // ... other parameters
    playerMode = previewMode
)

Interactive Mode

Mode declaration

data class Interactive(
    val interactivePlayerStyle: BlazeVideosInlineInteractivePlayerStyle,
    val fullScreenPlayerStyle: BlazeVideosPlayerStyle? = null,
) : PlayerMode()

Interactive mode with full user controls and comprehensive interaction capabilities.

Behavior

  • Complete video player controls (play/pause, seek, volume, etc.)
  • Full user interaction support
  • Supports both inline and fullscreen playback
  • Placeholder has no click behavior (Interactive mode)

Use Cases

  • Dedicated video viewing experiences
  • Media players with rich controls
  • Educational or training content requiring precise navigation

Configuration Parameters

interactivePlayerStyle: BlazeVideosInlineInteractivePlayerStyle.

  • Main styling configuration for inline interactive mode

fullScreenPlayerStyle: BlazeVideosPlayerStyle (Optional)

  • Styling configuration for fullscreen mode when user clicks fullscreen button or transitions from inline player

Example Usage

val interactiveMode = BlazeVideosInlinePlayer.PlayerMode.Interactive(
    interactivePlayerStyle = BlazeVideosInlineInteractivePlayerStyle.base().apply {
        backgroundColor = Color.BLACK
        buttons.share.isVisible = false
        seekBar.isVisible = true
        headingText.textColor = Color.WHITE
    },
    fullScreenPlayerStyle = BlazeVideosPlayerStyle.base() // Optional
)

val player = BlazeVideosInlinePlayer(
    // ... other parameters
    playerMode = interactiveMode
)

Mode Comparison

FeaturePreview ModeInteractive Mode
Primary PurposeLightweight previewFull interaction
Placeholder ClickOpens fullscreen playerNo click behavior
Button Count2 (mute, replay)10+ (comprehensive suite)
Button SizeSmallMedium
Seek Bar❌ Not available✅ Available
Heading Text❌ Not available✅ Available
Play/Pause Control❌ Auto-playing✅ User-controlled
Navigation Controls❌ Not available✅ Previous/Next
Social Features❌ Not available✅ Share/Like
Fullscreen TransitionClick placeholder or inline playerDedicated fullscreen button or inline player
Optimal Use CasesFeeds, carousels, discoveryDedicated players, courses

Best Practices

Choosing the Right Mode

Use Preview Mode When:

  • ✅ Displaying videos in feeds or lists
  • ✅ Auto-playing content for discovery
  • ✅ Minimal interaction is desired
  • ✅ Screen space is limited
  • ✅ Users primarily click to open fullscreen

Use Interactive Mode When:

  • ✅ Providing dedicated video experiences
  • ✅ Users need timeline navigation
  • ✅ Social features are important
  • ✅ Educational or training content
  • ✅ Users control playback timing

Style Customization

Start with Base Styles

// Always start with base() and customize
val customPreviewStyle = BlazeVideosInlinePreviewPlayerStyle.base().apply {
    // Your customizations here
}

Did this page help you?