Hotspots Editor#

The Hotspots Editor is an advanced module for the video.js framework that builds upon the Hotspots module, allowing users to not only display hotspots but also create, edit, and configure them dynamically within the video player. This module serves as an interactive extension, providing an intuitive interface for defining and modifying hotspot properties such as timing, position, size, and appearance.

Note: While the Hotspots module handles the display of hotspots, the Hotspots Editor enables their creation and editing. But it is not required enabling 2 modules at the same time.

Features#

• Multiple hotspot types (up to six types of hotspots):
  • html
  • image
  • link
  • none
  • page
  • text
• Customizable appearance
  • Add borders to any hotspot type.
  • Set titles for page, html, none and link hotspots
  • Add icons to html, none and link hotspots
  • Choose from 13 different font families for text hotspots (modifiable in the code).
• Flexible configuration
  • Define any size and duration for each hotspot within the video player boundaries.
  • Use the valuehandler option to either pass a textarea element ID or a function to handle the hotspots array data.

Limitations#

The module is incompatible with the Podcast module, audio-only mode, or the audio tag. Any of these configurations will prevent the module from functioning as intended.

Usage#

Options example#

To handle hotspot data, use the valuehandler option. This can either:

1. Link to a textarea element's ID to automatically update its content.
2. Provide a custom function for processing the hotspots array.

Example 1: Using a Custom Function The example below demonstrates how to dynamically create and populate a textarea element with the hotspot data:

window.initPlayer('my-video', {
  hotspotsEditorPlugin: {
    valuehandler: (hotspots) => {
      const textarea = document.querySelector('.hotspot-output') as HTMLTextAreaElement | undefined;

      if (textarea) {
        textarea.value = JSON.stringify(hotspots);
        return;
      }

      const main = document.querySelector('main');
      if (!main) return;

      const newTextarea = main.appendChild(document.createElement('textarea'));
      newTextarea.setAttribute('class', 'hotspot-output');
      newTextarea.value = JSON.stringify(hotspots);
    },
  },
});

Example 2: Using a Predefined Textarea Element If you already have a textarea element on the page, simply pass its ID to the valuehandler option:

const player = videojs('my-video', {
  hotspotsEditorPlugin: {
    valuehandler: 'textarea',
  },
});