Cue points are a powerful feature that allows you to trigger custom actions or events at specific times during video playback.

This guide demonstrates how to manage cue points in the player, including adding, removing, and retrieving cue points. It also shows how to handle the 'cuepoint' event.

Adding Cue Points to the Player

To add a cue point to the player, use the addCuePoint method. This method takes an object with the time when the cuepoint should be triggered (in seconds) and value (custom data) properties. When a cue point is reached during playback, the player emits a 'cuepoint' event.

<script type="module">
  import { Player } from 'https://e.video-cdn.net/mi-player-sdk/mi-player-sdk.js';

  // Connect the SDK to the player
  const player = new Player('mi-embedded-video');

  // Add a cue point at 10 seconds
  player
    .addCuePoint({
      time: 10,
      value: { customData: 'customData' }, // value can be whatever you need, and is optional
    })
    .then((cuePointId) => {
      console.log(`Cue point added with id: ${cuePointId}`);
    })
    .catch((error) => {
      console.error('Error adding cue point:', error);
    });

  // Add an event listener for the 'cuepoint' event
  player.on('cuepoint', (event) => {
    const cuepoint = event.cuepoint;
    console.log(`Cue point triggered at ${cuepoint.time} seconds: ${JSON.stringify(event.cuepoint.value)}`);
  });
</script>
Copy

Removing Cue Points from the Player

To remove a cue point, use the removeCuePoint method with the cue point's id. You can get the cue point id from the return of the addCuePoint method, or use the getCuePoints to find the cue point you want to remove.

Here's an example on how to remove all cue points from the player:

<script type="module">
  import { Player } from 'https://e.video-cdn.net/mi-player-sdk/mi-player-sdk.js';

  // Connect the SDK to the player
  const player = new Player('mi-embedded-video');

  // Get all cue points
  player
    .getCuePoints()
    .then((cuePoints) => {
      // Remove all of them from the player
      return Promise.all(
        cuePoints.map(cuePoint) => player.removeCuePoint(cuePoint.id)
      );
    })
    .then(() => {
      console.log('Removed all cue points successfully.');
    })
    .catch((error) => {
      console.error('Error:', error);
    });
</script>
Copy