Event timeline

To test this feature and view the example code, please see the Browsers SDK 1 Example Code Quick Start guide.

The CONNECT Player SDK includes an Event Timeline to support feedback and analysis of performance tracking or playback issues.

Example code

The example code is built upon the basic-playback example and provides a basic implementation of displaying and filtering events captured by the SDK. The Event Timeline is disabled by default, so one of the first things to do is to enable it:

JS

OTV.eventTimeline.enableTimeline(true);

By passing false to the above function, you can disable the timeline when it is no longer required.

There are several functions available to access the events in the timeline, allowing for specific subsets of events to be retrieved or all the events together.

JS

let allEvents = OTV.eventTimeline.getTimelineList();
let last10Events = OTV.eventTimeline.getTimelineList({ xNumber: 10 });
let playbackEvents = OTV.eventTimeline.getTimelineList({
xType: OtvEventType.playback
});
let dateRangeEvents = OTV.eventTimeline.getTimelineList({
xFrom: startDate,
xTo: endDate
});

To keep the list of events at a manageable size, you can remove events older than a specific Date. Passing the current date clears all events:

JS

OTV.eventTimeline.removeTimeline(new Date());

There is no limit to the number of events that the timeline can store, so we advise you not to run it for long periods without implementing a means to prune its contents periodically.

OtvEvent

OtvEvent comprises a time, eventType, command and extra.

The eventType property is populated with one of the static properties of OtvEventType, and the command property is similarly populated with one of the static properties of the OtvEventCommandXXX classes.
The extra property provides additional information that changes depending on the eventType and command . It is stored as a JSON String that is keyed with one or more of the static properties of OtvEventExtraKey.

All documented events are available when using DASH streams, though not all are available when using HLS streams, due to limitations in accessing this information.

OtvEventTimelineAnalyzer

OtvEventTimelineAnalyzer can be used to provide some simple analysis of the events in the timeline, including the amount of time it took to start or zap between streams:

JS

let startTime = OTV.eventTimelineAnalyzer.getStartDuration(
"http://stream1.mpd"
)[0].duration;
let zapTime = OTV.eventTimelineAnalyzer.getZapDuration(
"http://stream1.mpd",
"http://stream2.mpd"
);

The analysis provided by OtvEventTimelineAnalyzer is undefined if you are playing back multiple streams at the same time.

Custom Events

Your own custom events can be added to the timeline to track additional events from your code:

JS

OTV.eventTimeline.addToTimeline(
"your-custom-type",
"your-custom-command",
"optional-extra-info"
);