Player Options

​

Visual & Controls

​

Autoplay Settings

• Autoplay enabled/disabled
• Custom autoplay video (different preview video)
• Autoplay time range (specific start/end times)
• Pulsating effects during autoplay
• Custom autoplay templates with HTML/CSS

• When enabled, videos may start playing immediately
• play event may fire automatically on page load
• Continue watching takes precedence over autoplay for returning users

​

Thumbnail Images

• Landscape thumbnail (for desktop/wide screens)
• Portrait thumbnail (for mobile/narrow screens)
• Orientation-aware display (shows appropriate thumbnail based on video orientation)
• Draggable positioning with visual canvas editor
• Custom image uploads to BunnyCDN storage

1. Navigate to the Thumbnail tab in video customization
2. Upload separate images for landscape and portrait orientations
3. Use the visual canvas editor to position thumbnails precisely
4. Deploy changes to make thumbnails live

• Thumbnails display when autoplay is disabled and video has not started
• Automatically adapts to video orientation (landscape/portrait)
• thumbnail overlay can be triggered programmatically
• Works seamlessly with continue watching and pause menu features

• Supports JPEG, PNG, GIF, and WebP formats (up to 10MB)
• Images are uploaded to workspace-specific CDN folders
• URLs are stored in thumbnail_options.landscape_image and thumbnail_options.portrait_image
• Positioning data stored in overlay configuration for canvas editor

​

Style & Appearance

• Main color (primary brand color)
• Background color (player background)
• Controls bar style (default vs. solid)
• Control visibility (show/hide individual controls)

• Center play button
• Corner play button
• Classic progress bar
• Video time display
• Rewind/forward buttons
• Fullscreen button
• Settings button (speed controls)
• Play in fullscreen (auto-fullscreen mode)

• Available controls affect which user interactions are possible
• Auto-fullscreen mode triggers fullscreen event immediately
• Control visibility affects user experience and event frequency

​

Progress Bar

• Smart progress (non-linear progress display)
• Progress bar colors and styling
• Height and background customization
• Classic vs. modern progress bar styles

• Progress visualization affects user engagement
• Smart progress may show different completion percentages
• Custom styling does not affect time event data

​

Functional Features

​

Continue Watching

• Enable/disable continue watching
• Minimum watch time threshold (how long before it is considered “watched”)
• Custom templates for continue watching overlay
• Continue/restart button styling and behavior

• continue-watching event fires when overlay is shown
• Minimum watch time determines when feature activates
• Only works for returning users who meet watch time threshold

​

Smart Orientation

• Enable/disable smart orientation
• Orientation-specific styling and behavior
• Automatic layout adjustments

• portrait and landscape events fire based on video dimensions
• Affects responsive design requirements
• May trigger layout changes automatically

​

Captions & Overlays

• Caption display and styling
• Custom paused overlays with HTML/CSS
• Overlay positioning and timing
• Text styling and colors

• Custom overlays may affect user interactions
• Paused overlays can include interactive elements
• Overlay events may be available depending on configuration

​

Advanced Features

​

Turbo Mode

• Enable/disable turbo mode
• Preloading strategies
• Bandwidth optimization

• May affect metadata event timing
• Can influence video loading speed
• Affects user experience but not event data

​

Playback Controls

• Default playback speed
• Available speed options
• Skip intervals (rewind/forward amounts)
• Playback shortcuts and hotkeys

• Speed changes affect playback timing
• Skip intervals affect user interaction patterns
• Shortcuts may trigger playback events

​

Event-Related Configuration

​

Timed Events

• Event names are completely custom
• Trigger timing can be time-based or percentage-based
• Call frequency affects how often events fire
• Subsequent visits may have different event names

• Event names must match your JavaScript listeners
• Timing precision depends on video playback
• Session-based events require proper handling

​

Conversion Pixels

• Pixel types determine event naming convention
• Trigger conditions affect when pixel events fire
• Session limits control firing frequency
• Custom pixels can execute arbitrary JavaScript

• Pixel events complement your existing tracking
• Event naming follows predictable patterns
• Session limits prevent pixel spam

​

User Event Tracking

• Content engagement tracking (scroll, hover, click)
• Targeted elements only (data-trackplay attributes)
• Interaction sensitivity settings

• These interactions are tracked automatically
• Not available as player events (they are tracked separately)
• Use data-trackplay attributes for targeted tracking

​

Configuration Dependencies

​

Autoplay + Continue Watching

• Continue watching overrides autoplay for returning users
• Autoplay settings apply to first-time visitors
• Both features can be enabled simultaneously

​

Fullscreen + Style

• Fullscreen behavior depends on control visibility
• Auto-fullscreen mode requires fullscreen button to be enabled
• Style settings affect fullscreen appearance

​

Timed Events + Pixels

• Both can trigger at the same time points
• Pixels fire independently of timed events
• Session limits apply to both separately

​

User Tracking + Targeted Elements

• When targeted elements is enabled, only data-trackplay elements are tracked
• General content engagement tracking is disabled
• Affects what interactions are monitored

​

Best Practices for Integration

​

Handle Configuration Variations

// Example: Handle optional features gracefully
document.addEventListener('TrackPlayReady', function (e) {
  let player = e.detail.player;
  
  // Always handle core events
  player.on('play', handlePlay);
  player.on('paused', handlePaused);
  
  // Handle optional events that may not exist
  player.on('continue-watching', handleContinueWatching);
  player.on('fullscreen', handleFullscreen);
  
  // Handle custom events (these are configuration-dependent)
  player.on('show_cta', handleCTA);
  player.on('special_offer', handleOffer);
});

​

Test Different Scenarios

• Test with different control configurations
• Verify behavior with autoplay enabled/disabled
• Check continue watching with various minimum watch times
• Test fullscreen behavior with different style settings

​

Responsive Design

• Handle both portrait and landscape orientations
• Prepare for auto-fullscreen mode
• Design for different control bar styles
• Consider various progress bar configurations

​

Related Documentation