Advanced Workflows

Annoto application container

Annoto widget position is set as absolute meaning it doesn't influence the website layout. By default the application is contained inside a single DIV that is appended to the BODY.
If you require different behaviour, you can specify a DIV to serve as annoto container:
1
<div id="annoto-app"></div>
Copied!
This is especially useful if BODY is not your main scrollable layout.
As a rule of thumb always place the container in the same scrollable element as your video.
When supported by the player, Annoto timeline is automatically embedded inside the player controls by the application.

Custom Video Player

Annoto providers ends users, advanced interaction with video content. In order to do it Annoto requires access to video player API. Before Annoto can perform any action it must obtain the media source and the duration of the media.
We already support a variety of widely used player types, and constantly adding new ones. If you are using a custom player or player we don't support yet, you have 2 options:
    1.
    Implement a PlayerAdaptorApi and set it in PlayerConfig of the widget configuration. Contributions are very welcome and appreciated :)
    2.
    Contact us, we are happy to help.

Analytics Events

Annoto widget exposes api to subscribe to analytics events so that can be used in custom integrations, for example ingested and analyzed by custom BI systems.
To listen to the events use the familiar Annoto.on() api.
The widget provides two types of events:

Stats Events

Discrete events of user actions such as submit a comment, vote, read a reply, click on timestamp, first video play, etc.
1
Annoto.on('stats_events', function (ev) {
2
console.log(ev);
3
});
Copied!
For more details on the event callback please refer to the AnnotoStatsEventCallback interface. For full list of event types, please refer to StateTypeEnum.

Video Benchmark Events

Video analytics events that provides details about the current and historical accumulated video consumption of the user.
1
Annoto.on('video_benchmark', function (ev) {
2
console.log(ev);
3
});
Copied!
For more details on the event callback please refer to the AnnotoVideoBenchmarkCallback definition. For details about the event properties please refer to IVideoBenchmarkEvent.
Last modified 3mo ago