Kaltura Plugin
Single Sign On
Customise Annoto Widget configuration
When the Annoto plugin is loaded by the Kaltura player, it triggers custom events that allows you to get access to the configuration and the API for full customisation and control of the widget.
Listen to Kaltura Player events
To subscribe to Kaltura player events please use Kaltura player API:
1
kWidget.addReadyCallback(function (playerId) {
2
var player = document.getElementById(playerId);
3
player.kBind('annotoPluginSetup', function (params) {
4
var config = params.config;
5
// Modify the Annoto configuration
6
});
7
player.kBind('annotoPluginReady', function (annotoApi) {
8
// Make use of the Annoto API
9
});
10
});
Copied!
For detailed information on the Kaltura player API, please refer to http://player.kaltura.com/docs/api
Modify Annoto configuration
annotoPluginSetup is triggered first by the Annoto plugin and provides opportunity to modify the Annoto widget configuration before the widget is bootstrapped.Once the widget is bootstrapped by the plugin
annotoPluginReady is triggered and provides access to the Annoto API.Below is an example of modifying some basic widget options:
1
player.kBind('annotoPluginSetup', function (params) {
2
var config = params.config;
3
var widget = config.widgets[0];
4
var ux = config.ux || {};
5
var align = config.align || {};
6
var features = config.features || {};
7
8
config.ux = ux;
9
config.align = align;
10
config.features = features;
11
12
config.clientId = 'eyJhbGciOiJ...';
13
config.position = 'right';
14
config.demoMode = false;
15
config.locale = 'en';
16
17
features.tabs = true;
18
align.vertical = 'top';
19
/**
20
* Attach the ssoAuthRequestHandle hook.
21
* https://github.com/Annoto/widget-api/blob/master/lib/config.d.ts#L159
22
*/
23
ux.ssoAuthRequestHandle = function() {
24
// In case user is not logged in and tries to submit content
25
// trigger user login
26
window.location.replace('https://example.com/login');
27
};
28
});
Copied!
config is already setup by the Kaltura Annoto plugin, so we need only to override the required configuration, such as clientId, features, etc. DO NOT CHANGE THE PLAYER TYPE OR PLAYER ELEMENT CONFIG.
For the default widget configuration used by the plugin please refer to: https://github.com/Annoto/kaltura-plugin
Asynchronous Widget Bootstrap
Advanced topic
In some cases you might not have the required configuration for the Annoto Widget when
annotoPluginSetup is triggered, or would want to postpone the bootstrap of the widget until some condition is met.1
var delayDoneCallback;
2
var annotoConfig;
3
player.kBind('annotoPluginSetup', function (params) {
4
5
// Set params.await to the following function:
6
params.await = function (doneCb) {
7
delayDoneCallback = doneCb;
8
};
9
annotoConfig = params.config;
10
});
11
12
// do some async work and when ready call the delayDoneCallback:
13
14
setTimeout(function() {
15
// Modify the Annoto configuration asynchronously
16
annotoConfig.clientId = 'eyJhbGciOiJ...';
17
delayDoneCallback();
18
}, 200);
Copied!
Until
delayDoneCallback is called, the widget won't be bootstrapped and annotoPluginReady won't be triggered.
Export as PDF
Copy link