Video Events

Core video playback events that track the video’s state and progress.

Need to integrate events? See the Quick Start Guide for the basic integration pattern.

Playback Events

`play`

Fired when video starts playing. Data:

{
  time: 45.2,        // Current playback time in seconds
  session_id: "abc123" // Device/session identifier
}

player.on('play', function (event) {
  console.log('Video started at', event.detail.time);
});

`paused`

Fired when video is paused. Data:

{
  time: 45.2,        // Time when video was paused
  session_id: "abc123" // Device/session identifier
}

player.on('paused', function (event) {
  console.log('Video paused at', event.detail.time);
});

`ended`

Fired when video playback reaches the end. Data:

{
  time: 180.5,       // Final playback time
  session_id: "abc123" // Device/session identifier
}

player.on('ended', function (event) {
  console.log('Video completed at', event.detail.time);
});

`time`

Fired continuously during playback to track progress. Data:

{
  time: 67.8,        // Current playback time in seconds
  session_id: "abc123" // Device/session identifier
}

player.on('time', function (event) {
  console.log('Current time:', event.detail.time);
});

Frequency: Fired during active playback when video is unmuted and not paused.

Orientation Events

`portrait`

Fired when video orientation changes to portrait. Data:

{
  time: 12.3,        // Current playback time
  session_id: "abc123" // Device/session identifier
}

player.on('portrait', function (event) {
  document.body.classList.add('video-portrait');
});

`landscape`

Fired when video orientation changes to landscape. Data:

{
  time: 12.3,        // Current playback time
  session_id: "abc123" // Device/session identifier
}

player.on('landscape', function (event) {
  document.body.classList.remove('video-portrait');
});

User Interaction Events

`interact`

Fired when user first interacts with the player. Data:

{
  time: 5.1,         // Current playback time
  session_id: "abc123" // Device/session identifier
}

player.on('interact', function (event) {
  console.log('User first interacted at', event.detail.time);
  // Enable additional features after interaction
  enableAdvancedControls();
});

`enter-fullscreen`

Fired when video enters fullscreen mode. Data:

{
  time: 30.2,        // Current playback time
  session_id: "abc123" // Device/session identifier
}

player.on('enter-fullscreen', function (event) {
  console.log('Entered fullscreen at', event.detail.time);
  // Hide elements that should not show in fullscreen
  document.querySelectorAll('.hide-on-fullscreen').forEach(el => {
    el.style.display = 'none';
  });
});

`exit-fullscreen`

Fired when video exits fullscreen mode. Data:

{
  time: 45.8,        // Current playback time
  session_id: "abc123" // Device/session identifier
}

player.on('exit-fullscreen', function (event) {
  console.log('Exited fullscreen at', event.detail.time);
  // Restore hidden elements
  document.querySelectorAll('.hide-on-fullscreen').forEach(el => {
    el.style.removeProperty('display');
  });
});

Overlay Events

`continue-watching`

Fired when the continue watching overlay is displayed for returning users. Data:

{
  time: 67.3,        // Time when overlay was shown
  session_id: "abc123" // Device/session identifier
}

player.on('continue-watching', function (event) {
  console.log('Continue watching overlay shown at', event.detail.time);
  // Track that user saw continue watching option
  analytics.track('continue_watching_shown', {
    video_time: event.detail.time
  });
});

`exit-intent`

Fired when the exit-intent overlay is shown because the viewer looked ready to leave. Configure the triggers under Video → Customize → Exit Intent (pointer leaving toward the browser chrome, browser back button, or switching tabs). Data:

{
  reason: "pointer-leave-top", // "pointer-leave-top" | "back-button" | "tab-blur"
  time: 42.6,                  // Time when the overlay was shown
  session_id: "abc123"         // Device/session identifier
}

player.on('exit-intent', function (event) {
  console.log('Exit intent fired:', event.detail.reason);
  // Reveal your own retention offer on the page
  document.querySelector('#retention-offer').style.display = 'block';
});

`exit-intent-dismissed`

Fired when the viewer closes the exit-intent overlay (clicks the backdrop). Data:

{
  reason: "pointer-leave-top", // The trigger that showed the overlay
  time: 43.1,
  session_id: "abc123"
}

player.on('exit-intent-dismissed', function (event) {
  console.log('Exit intent dismissed');
});

Complete Integration Example

document.addEventListener('TrackPlayReady', function (e) {
  let player = e.detail.player;
  
  // Listen to all video events
  player.on('play', function (event) {
    console.log('Video started at', event.detail.time);
  });
  
  player.on('paused', function (event) {
    console.log('Video paused at', event.detail.time);
  });
  
  player.on('ended', function (event) {
    console.log('Video completed at', event.detail.time);
  });
  
  player.on('time', function (event) {
    console.log('Current time:', event.detail.time);
  });
  
  player.on('enter-fullscreen', function (event) {
    console.log('Entered fullscreen at', event.detail.time);
  });
  
  player.on('exit-fullscreen', function (event) {
    console.log('Exited fullscreen at', event.detail.time);
  });
  
  // Overlay events
  player.on('continue-watching', function (event) {
    console.log('Continue watching overlay shown at', event.detail.time);
  });

  player.on('exit-intent', function (event) {
    console.log('Exit intent fired:', event.detail.reason);
  });
});

Data Structure

All video events include these standard fields:

time: Current video playback time in seconds
session_id: Unique device/session identifier

Timed Events - Custom events at specific times
User Events - Interface interaction events
Pixel Events - Conversion tracking events

Get Started

Viewer identity

The Player

Embedding

Analytics

Split Testing

Integrations

Events Reference

Video Events

Video Events

Playback Events

`play`

`paused`

`ended`

`time`

Orientation Events

`portrait`

`landscape`

User Interaction Events

`interact`

`enter-fullscreen`

`exit-fullscreen`

Overlay Events

`continue-watching`

`exit-intent`

`exit-intent-dismissed`

Complete Integration Example

Data Structure

​Video Events

​Playback Events

​play

​paused

​ended

​time

​Orientation Events

​portrait

​landscape

​User Interaction Events

​interact

​enter-fullscreen

​exit-fullscreen

​Overlay Events

​continue-watching

​exit-intent

​exit-intent-dismissed

​Complete Integration Example

​Data Structure

​Related Events

Video Events

Playback Events

`play`

`paused`

`ended`

`time`

Orientation Events

`portrait`

`landscape`

User Interaction Events

`interact`

`enter-fullscreen`

`exit-fullscreen`

Overlay Events

`continue-watching`

`exit-intent`

`exit-intent-dismissed`

Complete Integration Example

Data Structure

Related Events