Timeline markers are a common way to show important points on a timeline. They can mark chapters, highlight events like goals, or show where ads will be.

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

• Statically through the UIConfig
• Dynamically through the UIManager API

Static markers

Static markers serve as a starting point if the markers do not change throughout the course of the stream. 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 (addTimelinMarker) and remove (removeTimelineMarker) markers to highlight specific events or indicate where ads are placed within a VOD.

This API is currently unavailable in our Native SDKs. However, it can still be achieved with a custom UI and a CustomMessageHandler.