H5P Guides

Events

Events are actions triggered on or inside H5P content. They make it easy to do operations based on what's happening with the content. On this page, we'll have a look at which events H5P content generate, and how we can hook into them.

If you want to learn how to use events in your content type or why you should, please check out the Using the Event Dispatcher guide.

Common Events

H5P content can generate any kind of custom events. The ones listed here are the most common ones.

xAPI

The xAPI events are loaded with information about the actions the user does. The xAPI statements are better explained in the H5P and xAPI section.

instance.on('xAPI', function (event) {
  if (event.getScore() > event.getMaxScore()){
    console.log('The user has exceeded our expectations!');
  }
});

resize

The resize event is triggered every time the content container potentially have changed size. This is commonly used to changed the size of containers that wraps the H5P content, or to change the size of tasks and sub-content used inside the H5P.

No event data available.

enterFullScreen

Triggered when the user enters full-screen mode. Useful for updating your full-screen state icon.

No event data available.

exitFullScreen

Triggered when the user leaves full-screen mode. Useful for updating the UI.

No event data available.

focus

This event is used when the content tries to grab focus in the browser. For example, after fullscreen has been entered the content can set its focus back to the previous element. In Course Presentation, this is used for keyboard navigation to continue working.

No event data available.

instance.on('focus', function () {
  // The element in focus has changed. Set it back to our input field.
  $textArea.focus();
});

domChanged

Triggered when content is inserted into the page. Gives 3rd party scripts an opportunity to add their customizations.

  • $target – jQuery object container the content is being attached to.
  • library – Name of the library being attached.
  • key – H5P operation type.
instance.on('domChanged', function (event) {
  if (event.data.key === 'newLibrary' && event.data.library === 'H5P.InteractiveVideo') {
    // A new interactive video has been added to the page.
    // Let's add our custom watermark to it.
    new CustomWatermark(event.data.$target, 'Copyright (c) H5P');
  }
});

External Event Dispatcher

H5P has exposed an external event dispatcher where the CMS or browser can register event listeners. This means that we can detect every time some H5P content on the page resizes, or if the user has completed a task.

You can test this out on any page that has an H5P task on it. Open your browser's console(Ctrl/Cmd+Shift+J) and insert the following:

H5P.externalDispatcher.on('xAPI', function (event) {
  console.log(event.data.statement);
});

This will print out every xAPI statement the users generates when using the content. 
You can do the same for all H5P events.