[object Object] Icon

Encoding
Learn how to create, start, manage and modify Encodings

[object Object] Icon

Player
Learn how to create, start, manage and modify Players

[object Object] Icon

Analytics
Learn how to create, start, manage and modify Analyticss

Docs Home
User shortcuts for search
Focus by pressing f
Hide results by pressing Esc
Navigate via   keys

Tue May 28 2019

How to add Timeline Markers

OverviewLink Icon

The ability to add 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.

image


What is a timeline marker?Link Icon

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
  • 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 ConfigurationLink Icon

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.

1var playerConfiguration = {
2 key: 'YOUR_PLAYER_KEY_HERE',
3 ui: {
4 metadata: {
5 markers: [
6 { time: 24, title: 'Salto on the edge' },
7 { time: 69, title: 'Interview - Marcus Gustafsson' },
8 { time: 105, title: 'Parcour rating explained' },
9 { time: 188, duration: 11, title: 'And we have a winner!' },
10 ],
11 },
12 },
13 };

Source ConfigurationLink Icon

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:

1var sourceConfig = {
2 title: "Bitmovin Player",
3 description: "See how you can easily play markers on the timeline to highlight certain moments in your content!",
4 dash: "https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd",
5 hls: "https://bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8",
6 progressive: "https://bitmovin-a.akamaihd.net/content/MI201109210084_1/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4",
7 markers: [
8 { time: 24, title: 'Salto on the edge' },
9 { time: 69, title: 'Interview - Marcus Gustafsson' },
10 { time: 105, title: 'Parcour rating explained' },
11 { time: 188, duration: 11, title: 'And we have a winner!' }, ],
12};

UI ConfigurationLink Icon

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.

1var playerElement = document.querySelector('#my-player');
2
3var playerConfiguration = {
4 key: 'YOUR_PLAYER_KEY_HERE',
5 ui: false,
6};
7
8var uiConfig = {
9 metadata: {
10 markers: [
11 { time: 24, title: 'Salto on the edge' },
12 { time: 69, title: 'Interview - Marcus Gustafsson' },
13 { time: 105, title: 'Parcour rating explained' },
14 { time: 188, duration: 11, title: 'And we have a winner!' },
15 ],
16 },
17};
18
19var player = new bitmovin.player.Player(playerElement, playerConfiguration);
20var myUiManager = new bitmovin.playerui.UIFactory.buildDefaultUI(player, uiConfig);

UI Manager APILink Icon

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.

1var playerElement = document.querySelector('#player');
2var playerConfiguration = {
3 key: 'YOUR_PLAYER_KEY_HERE',
4 ui: false,
5};
6
7var timelineMarkers = [
8 { time: 24, title: 'Salto on the edge' },
9 { time: 69, title: 'Interview - Marcus Gustafsson' },
10 { time: 105, title: 'Parcour rating explained' },
11 { time: 188, duration: 11, title: 'And we have a winner!', cssClasses: ['seekbar-marker-interval'] },
12];
13
14var player = new bitmovin.player.Player(playerElement, playerConfiguration);
15var myUiManager = new bitmovin.playerui.UIFactory.buildDefaultUI(player);
16
17//Once player/UI is ready you can interact with their respective API
18player.on("ready", function() {
19 //Add all available Timeline markers to the UI
20 timelineMarkers.map(function(marker) {
21 myUiManager.addTimelineMarker(marker);
22 });
23});
24
25//myUIManager.getTimelineMarkers() returns all available timelime markers
26//myUIManager.removeTimelineMarker(timelineMarkers[0]) can be used to remove an already added marker again

Customize CSSLink Icon

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:

1var timelineMarkers = [
2 { time: 24, title: 'Salto on the edge' },
3 { time: 69, title: 'Interview - Marcus Gustafsson' },
4 { time: 105, title: 'Parcour rating explained' },
5 { cssClasses: ['seekbar-marker-interval'], time: 188, duration: 11, title: 'And we have a winner!' },
6];

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:

1.bmpui-ui-seekbar .bmpui-seekbar .bmpui-seekbar-markers > .bmpui-seekbar-marker-interval {
2 border-color: rgba(255, 255, 0, 0.4);
3}

More details about customising the styling of our Player UI can be found in our CSS class reference.

ExamplesLink Icon

All the configuration examples of this tutorial can be found in our Github repository bitmovin-player-demo as fully working examples as well.

Give us feedback