---
title: "Register callback event"
slug: "register-callback-event"
updated: 2024-01-18T14:17:26Z
published: 2024-01-18T14:17:26Z
canonical: "help.movingimage.com/register-callback-event"
---

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

# Register callback event

## **JavaScript API - Supported Events**

You can register callback events for a variety of events, including HTML5 media events and Moving Image-specific events. This allows you to trigger actions in your JavaScript code when these events occur.

### **Registering and unregistering callback events**

To register a callback event, use the `Player.registerEventListener()` function. This function takes three arguments:

- `eventName`: The name of the event.
- `callback`: A function to be called when the event is triggered.
- `priority` (optional): An integer value that determines the order in which callback functions are called. Higher priorities are called first.

To unregister a callback event, use the `Player.unregisterEventListener()` function. This function takes two arguments:

- `eventName`: The name of the event.
- `callback`: The function to be unregistered.

### **Supported events**

The following events are supported:

- All known HTML5 media events (see Media Events: [https://www.eventbrite.com/d/pa--media/events/](https://www.eventbrite.com/d/pa--media/events/) for a list).
- Moving Image-specific events:
  - `chapterclicked`: Triggered when the user clicks on a chapter.
  - `lightadstarted`: Triggered when a light ad begins playing.

#### **Example**

The following example shows how to register callback events for the `playing` and `pause` events:

**HTML**

```plainText
<div id="player_container"></div>
<div id="while_playing" style="display: none">video is playing!</div>
```

**JavaScript**

```plainText
function playingCallback(event) {
  var whilePlaying = document.getElementById('while_playing');
  whilePlaying.style.display = "block";
}

function pauseCallback(event) {
  var whilePlaying = document.getElementById('while_playing');
  whilePlaying.style.display = "none";
}

// Create a new player instance.
function createPlayer() {
  var initPlayer = {
    success: function(playerApi) {
      playerApi.registerEventListener('playing', playingCallback);
      playerApi.registerEventListener('pause', pauseCallback);
    },
    parameters: {
      configType: 'vmpro',
      playerId: '<PlayerID>',
      videoId: '<VideoID>',
      apiUrl: '//d.video-cdn.net/play',
      flashPath: '//e.video-cdn.net/v2/'
    }
  };

  VideoPlayer.Collection.addPlayerById('player_container', initPlayer);
}

// Add the player.
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//e.video-cdn.net/v2/embed.js';
head.appendChild(script);

script.onload = (function() {
  createPlayer();
});
```

When the video starts playing, the `playingCallback()` function will be called and the `while_playing` element will be displayed. When the video is paused, the `pauseCallback()` function will be called and the `while_playing` element will be hidden.

#### **Optimization suggestions**

- The example code above can be optimized by moving the `createPlayer()` function to the bottom of the `&lt;body&gt;` element. This will ensure that the player is not created until the DOM is fully loaded.
- The `script.onload` event handler can be simplified using an arrow function:

**JavaScript**

```plainText
script.onload = () => createPlayer();
```

- The `while_playing` element can be hidden by default by adding the following CSS rule:

**CSS**

```plainText
#while_playing {
  display: none;
}
```