💡

For adding Timeline Markers via our Bitmovin Player iOS & Android SDKs check out How to add Timeline Markers on Mobile.

There are two different ways how to define timeline markers in our UI:

• Statically through the UIConfig or SourceConfig
• Dynamically through the UIManager API

Static markers

Static markers serve as a starting point when the markers do not change throughout the course of the stream.

The simplest way to add markers is by defining them directly in the SourceConfig, like this:

const sourceConfig = {
  dash: 'https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
  markers: [
    { time: 10, title: 'Marker 1' },
    { time: 65, duration: 1, title: 'Marker 2' },
    { time: 105, duration: 10, title: 'Marker 3' },
  ]
};

You can find further examples in our public samples repository (see the examples starting with 'timelineMarkers')

Aside from defining the timeline markers in the SourceConfig, these markers can be customized directly through the UIConfig. In this example, we utilize static markers to emphasize specific segments within the stream.

See here to get the full interface description of TimelineMarkers.

Static markers can either be provided through the UIConfig, the PlayerConfig or the SourceConfig.

Dynamic markers

A more advanced use case is to add dynamic markers, e.g., for goals during a football game in a live stream. To get access to the API, we need to have access to the UIManager instance managing the desired UI instance.

📘

Learn more about the UIManager in UI Architecture

This example demonstrates how to utilize the dynamic Timeline markers API on an UIManager instance. It can be used to dynamically add (addTimelineMarker) and remove (removeTimelineMarker) markers to highlight specific events or indicate where ads are placed within a VOD.