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
| Feature | Preview Mode | Interactive Mode |
|---|---|---|
| Primary Purpose | Lightweight preview | Full interaction |
| Placeholder Click | Opens fullscreen player | No click behavior |
| Button Count | 2 (mute, replay) | 10+ (comprehensive suite) |
| Button Size | Small | Medium |
| 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 Transition | Click placeholder or inline player | Dedicated fullscreen button or inline player |
| Optimal Use Cases | Feeds, carousels, discovery | Dedicated 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
}Updated about 2 months ago
