StreamsPlaybackEncodingBitmovin Dashboard

## Overview

Adding a marker to your playback timeline enables you to highlight specific positions (Chapters, Ad Breaks, special moments, etc) in your content to your viewers, so they can navigate and understand its structure with ease. You can add those markers to the timeline of the player. They are part of the `bitmovin-player-ui` and be either provided as part of the

  1. [player configuration](🔗),

  2. [source configuration](🔗),

  3. [UI configuration](🔗),

  4. or on-demand using the [UI Manager API](🔗).





## What is a Timeline Marker?

This component comes as part of our open source player UI framework and provides a few properties to alter its appearance, and if clicked the player will seek to the given time in its configuration. Click [here](🔗) to get to its full interface description.

  • `time` - position in the playback timeline it shall be placed at

  • `duration` - marks a whole region on the timeline instead one single position. Starts at `time`

  • `title` - Text that is shown when the cursor hovers above it

  • `imageUrl` - Image that is shown above timeline marker

  • `cssClasses` - takes an array of CSS class names that are applied to it

Knowing all its capabilities now, lets continue with providing their configuration to the player UI.

## Player configuration

Through the player configuration you can either enable/disable the player UI using the `ui` property providing a boolean value, or you provide it with a `UIConfig` that is used by the UIManager to configure it by default. A full example can be found [here](🔗).


## Source configuration
You can add the UI configuration for markers to the source configuration of the player. It expects an array of objects, where each object has a `time` property, that defines where the marker should be placed on the time, and a `title` property, which is shown when the mouse cursor points to the marker. A full example can be found [here](🔗).
The player configuration would look like the following:

## UI configuration
If you are already using a customized version of our UI, or your own UI structure, you are already using the UI manager of our player UI framework most likely. When initialising this one, you can provide this marker configuration along with the UI configuration. The full example can be found [here](🔗).

## UI Manager API
The third way is to set them dynamically using the UI Manager API. As soon as the the player and its API is ready (e.g. `ready` event has been fired), you can start using the UI API call to add marker to the timeline. The full example can be found [here](🔗).

## Custom CSS
In addition to the previous UI Manager API example, now we also add a custom CSS class called `seekbar-marker-interval` to the `cssClasses` property of the last marker in the configuration:

By default, the UI framework expects a prefix like `bmpui` for its CSS classes. When providing a CSS class in a UI configuration this prefix has to be omitted (see the example below) therefore, so our CSS class definition would look like the following:

More details about customising the styling of our Player UI can be found in our [CSS class reference](🔗).
## Examples
All the configuration examples of this tutorial can be found in our Github repository [bitmovin-player-demo](🔗) as [fully working examples](🔗) as well.