> ## Documentation Index
> Fetch the complete documentation index at: https://docs.trackplay.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Video Events

> Reference for all video playback events

# Video Events

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

<Note>
  Need to integrate events? See the [Quick Start Guide](/get-started/quick-start) for the basic integration pattern.
</Note>

## Playback Events

### `play`

Fired when video starts playing.

**Data:**

```javascript theme={null}
{
  time: 45.2,        // Current playback time in seconds
  session_id: "abc123" // Device/session identifier
}
```

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

### `paused`

Fired when video is paused.

**Data:**

```javascript theme={null}
{
  time: 45.2,        // Time when video was paused
  session_id: "abc123" // Device/session identifier
}
```

```javascript theme={null}
player.on('paused', function (event) {
  console.log('Video paused at', event.detail.time);
});
```

### `ended`

Fired when video playback reaches the end.

**Data:**

```javascript theme={null}
{
  time: 180.5,       // Final playback time
  session_id: "abc123" // Device/session identifier
}
```

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

### `time`

Fired continuously during playback to track progress.

**Data:**

```javascript theme={null}
{
  time: 67.8,        // Current playback time in seconds
  session_id: "abc123" // Device/session identifier
}
```

```javascript theme={null}
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:**

```javascript theme={null}
{
  time: 12.3,        // Current playback time
  session_id: "abc123" // Device/session identifier
}
```

```javascript theme={null}
player.on('portrait', function (event) {
  document.body.classList.add('video-portrait');
});
```

### `landscape`

Fired when video orientation changes to landscape.

**Data:**

```javascript theme={null}
{
  time: 12.3,        // Current playback time
  session_id: "abc123" // Device/session identifier
}
```

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

## User Interaction Events

### `interact`

Fired when user first interacts with the player.

**Data:**

```javascript theme={null}
{
  time: 5.1,         // Current playback time
  session_id: "abc123" // Device/session identifier
}
```

```javascript theme={null}
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:**

```javascript theme={null}
{
  time: 30.2,        // Current playback time
  session_id: "abc123" // Device/session identifier
}
```

```javascript theme={null}
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:**

```javascript theme={null}
{
  time: 45.8,        // Current playback time
  session_id: "abc123" // Device/session identifier
}
```

```javascript theme={null}
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:**

```javascript theme={null}
{
  time: 67.3,        // Time when overlay was shown
  session_id: "abc123" // Device/session identifier
}
```

```javascript theme={null}
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:**

```javascript theme={null}
{
  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
}
```

```javascript theme={null}
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:**

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

```javascript theme={null}
player.on('exit-intent-dismissed', function (event) {
  console.log('Exit intent dismissed');
});
```

## Complete Integration Example

```javascript theme={null}
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

## Related Events

* **[Timed Events](/events/timed-events)** - Custom events at specific times
* **[User Events](/events/user-events)** - Interface interaction events
* **[Pixel Events](/events/pixel-events)** - Conversion tracking events