Listening video events in player

By listening to events, you can track key moments like when a video starts, pauses, ends, or encounters an error. This capability is particularly useful for triggering additional actions or analytics during playback. In this guide, we’ll walk through how you can use this feature, followed by two practical examples.

Why listen to video events?

The HTML element triggers various media events throughout its lifecycle, such as:

• play: When the video starts playing.
• pause: When the video is paused.
• ended: Triggered when the video playback is complete.
• timeupdate: Periodically trigerred as the video plays, giving updates on the current time.
• error: Fired when the video encounters a playback issue.

By having fp-player listen to these events, you gain access to detailed control over video playback, enabling you to:

• Implement custom behaviors like updating UI components, show ads, or triggering analytics.
• Handle errors gracefully by displaying user-friendly messages or troubleshooting advice.
• Create engaging, interactive experiences by responding to specific moments in the video.

How to make fp-player listen to events

To listen for video events in the fp-player, you can use the addEventListener() method. This method allows you to listen for events on the video element and execute custom JavaScript functions when these events are triggered.

Here's a basic example of setting up event listeners for play, pause, and ended events:

const fpPlayer = document.getElementById('fp-player'); 

// Access the underlying <video> element 
const videoElement = fpPlayer.querySelector('video'); 

// Add event listeners 
videoElement.addEventListener('play', function() { 
  console.log('The video has started playing.'); 
}); 

videoElement.addEventListener('pause', function() { 
  console.log('The video has been paused.'); 
}); 
 
videoElement.addEventListener('ended', function() { 
  console.log('The video has finished playing.'); 
}); 

In this example, the querySelector() method is used to locate the underlying <video> element inside the fp-player element, enabling event listeners to be attached.

Example 1: Tracking playback progress with timeupdate

The timeupdate event is useful for tracking video progress in real-time, such as updating a custom progress bar or triggering certain actions at specific times. Here’s how you can set up a listener to update the playback progress dynamically:

Example 2: Error handling with the error event

Playback errors can occur due to network issues, unsupported formats, or other reasons. By listening to the error event, you can display user-friendly error messages and guide users through potential solutions:

const fpPlayer = document.getElementById('fp-player'); 

const videoElement = fpPlayer.querySelector('video'); 
const errorMessage = document.getElementById('error-message'); // Assume this is an error message element 

 

// Listen for the error event 
videoElement.addEventListener('error', function() { 
  const error = videoElement.error; 
 
  switch (error.code) { 
    case 1: 
      errorMessage.textContent = "Video loading was aborted."; 
      break; 
    case 2: 
      errorMessage.textContent = "A network error caused the video to fail."; 
      break; 
    case 3: 
      errorMessage.textContent = "The video file is corrupt or unsupported."; 
      break; 
    case 4: 
      errorMessage.textContent = "The video format is not supported."; 
      break; 
    default: 
      errorMessage.textContent = "An unknown error occurred during video playback."; 
      break; 
  } 
  console.error('Error Code: ', error.code); 
}); 

Explanation:

• error event: This event fires when a video playback issue arises, such as an unsupported format or network error.
• Custom error handling: The error object contains a code property that helps identify the type of problem. This example uses the code to display relevant error messages, improving the user experience by making issues clearer.