Interface TimelineMarker

Marks a position on the playback timeline, e.g. a chapter or an ad break.

interface TimelineMarker {
    cssClasses?: string[];
    duration?: number;
    imageUrl?: string;
    time: number;
    title?: string;
}

Properties

cssClasses?: string[]

Optional CSS classes that are applied to the marker on a SeekBar and can be used to differentiate different types of markers by their style (e.g. different color of chapter markers and ad break markers). The CSS classes are also propagated to a connected SeekBarLabel.

Multiple classes can be added to allow grouping of markers into types (e.g. chapter markers, ad break markers) by a shared class and still identify and style each marker with distinct classes (e.g. ['marker-type-chapter', 'chapter-number-1']).

duration?: number

Optional duration that makes the marker mark an interval instead of a single moment in time.

imageUrl?: string

Url to timeline marker image Prefered small image sizes (~50px) with aspect ratio of 1:1 Best performing with SVG format

time: number

The time in the playback timeline (e.g. SeekBar) that should be marked.

title?: string

Optional title text of the marked position, e.g. a chapter name. Will be rendered in the SeekBarLabel attached to a SeekBar.