# Cuepoints plugin

With the Cuepoints plugin, you can insert cues programmatically into your Wowza Flowplayer media. Cues provide start and end points relative to the video content, and use the browser's VTTCue engine to augment and enrich the playback experience. For example, you can use this plugin to inject timing data into a video with the purpose of a product placement or other key engagement moment.

To see the Cuepoints plugin in action, you can view this demo.

## Before you start

Before you use this plugin with the standalone player, we recommend the following steps:

* Read about [embedding the core player](/docs/wowza-flowplayer/player/embed/embed-with-standalone/) in your site by adding the minimum CSS and JavaScript player components.
* Make sure you have a player token. For more, see [Token configuration](/docs/wowza-flowplayer/player/configure/#token-configuration). Tokens aren't needed for local development.
* The instructions on this page generally assume you're using the Wowza Flowplayer CDN to embed the player in your site. If you're using npm, see our [npm instructions](/docs/wowza-flowplayer/player/embed/embed-with-standalone/#use-npm) or our [TypeScript guide](/docs/wowza-flowplayer/guides/add-the-player-using-typescript/).


## Install the plugin

To install the Cuepoints plugin, load it next to the core player:


```html
<!-- Load standard player skin -->
<link rel="stylesheet" href="https://cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css">
<!-- Load player script -->
<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>

<!-- Load plugin -->
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/cuepoints.min.js"></script>
```


```js
// Import player library and basic CSS for player
import flowplayer from "@flowplayer/player";
import "@flowplayer/player/flowplayer.css";

// Import plugin
import Cuepoints from "@flowplayer/player/plugins/cuepoints";
```

## Add HTML elements

embed
## Configure the plugin

The plugin can be set up at the top-level configuration under the `cuepoints` namespace. The `cuepoints` array accepts a collection of objects that must contain at least
`startTime` and `endTime` properties. Each property represents a start and end time, in seconds, where you may want to insert a dynamic interaction.

| Property | Description |
|  --- | --- |
| `cuepoints` *array* | Array of objects that determines when cue points are inserted into the player. These properties are used inside the array: `startTime`: Numeric value in seconds (or fractions) to add the cuepoint.`endTime`: Numeric value in seconds (or fractions) to remove the cuepoint.`text`: Message to be triggered by the cuepoint. |
| `draw_cuepoints` *boolean* | Determines if cuepoints should display in the timeline and could help with debugging. By default, the cuepoints are transparent and without any styling. You can style cues with the `fp-cuepoint` class. |


info
The `end` and `start` properties were changed to `endTime` and `startTime` with the v3.x releases. The `draw_cuepoints` property was removed from v3.0 until v3.5 and reintroduced with v3.6.

#### Example

The following example configures the player with your source, then adds cuepoints at the `0.5`, `5`, `10`, and `20` second marks. The end time for each cue point is then specified, and a message is assigned for each cuepoint. To see how to make cuepoints visible on the timeline, check the **CSS** tab.


```JavaScript
// Configure the player and cuepoints
const player = flowplayer('#player', {
  src: "https://edge.flowplayer.org/bauhaus.m3u8",
  cuepoints: [
    { startTime: 0.5, endTime: 3, text: "Cuepoint 1" },
    { startTime: 5, endTime: 7, text: "Cuepoint 2" },
    { startTime: 10, endTime: 15, text: "Cuepoint 3" },
    { startTime: 20, endTime: 24, text: "Cuepoint 4" }
  ],
  draw_cuepoints: true
});
```


```CSS
.fp-cuepoint {
  background-color: #00abcd !important;
  height: 100%;
  cursor: pointer;
  width: 5px;
}
```

## Listen to plugin events

This section describes the events you can capture to control and manage cuepoints within your player instance. To understand event handling differences between CDN or npm implementations, see [Plugin events](/docs/wowza-flowplayer/plugins/about-plugins/#plugin-events).

| CDN event | npm event | Description |
|  --- | --- | --- |
| `flowplayer.cuepoints.events.CUEPOINTS` | `Cuepoints.events.CUEPOINTS` | Emitted when new cuepoints are added. |
| `flowplayer.cuepoints.events.CUEPOINT_START` | `Cuepoints.events.CUEPOINT_START` | Fires when a cuepoint begins. |
| `flowplayer.cuepoints.events.CUEPOINT_END` | `Cuepoints.events.CUEPOINT_END` | Fires when a cuepoint ends. |


#### Example

If we build on the configuration example earlier on this page, we can create these snippets to listen for cuepoint start and end events:


```javascript
const player = flowplayer('#player', {
  src: "https://edge.flowplayer.org/bauhaus.m3u8",
  cuepoints: [
    { startTime: 0.5, endTime: 3, text: "Cuepoint 1" },
    { startTime: 5, endTime: 7, text: "Cuepoint 2" },
    { startTime: 10, endTime: 15, text: "Cuepoint 3" },
    { startTime: 20, endTime: 24, text: "Cuepoint 4" }
  ],
  draw_cuepoints: true
});

// Listen for cuepoint start event
player.on(flowplayer.cuepoints.events.CUEPOINT_START, function (ev) {
  console.log("Cuepoint started", ev.detail.cuepoint.text);
});

// Listen for cuepoint end event
player.on(flowplayer.cuepoints.events.CUEPOINT_END, function () {
  console.log("Cuepoint ended");
});
```


```javascript
const player = flowplayer('#player', {
  src: "https://edge.flowplayer.org/bauhaus.m3u8",
  cuepoints: [
    { startTime: 0.5, endTime: 3, text: "Cuepoint 1" },
    { startTime: 5, endTime: 7, text: "Cuepoint 2" },
    { startTime: 10, endTime: 15, text: "Cuepoint 3" },
    { startTime: 20, endTime: 24, text: "Cuepoint 4" }
  ],
  draw_cuepoints: true
});

// Listen for cuepoint start event
player.on(Cuepoints.events.CUEPOINT_START, function (ev) {
  console.log("Cuepoint started", ev.detail.cuepoint.text);
});

// Listen for cuepoint end event
player.on(Cuepoints.events.CUEPOINT_END, function () {
  console.log("Cuepoint ended");
});
```

### Add and remove cuepoints

To add and remove cuepoints while playing your media, emit the `CUEPOINTS` event. Then modify the player's `opts.cuepoints` property using ordinary array methods.


```javascript
player.emit(flowplayer.cuepoints.events.CUEPOINTS,{
  cuepoints: (player.opts.cuepoints || []).concat({
    startTime: 30,
    endTime: 33,
    text: "Cuepoint 5"
  })
});
```


```javascript
player.emit(Cuepoints.events.CUEPOINTS,{
  cuepoints: (player.opts.cuepoints || []).concat({
    startTime: 30,
    endTime: 33,
    text: "Cuepoint 5"
  })
});
```