LogoLogo
Home
  • Introduction
  • Widget
    • Getting Started
    • Advanced Workflows
    • Theming
    • API Reference
    • Playground
  • dashboard
    • Course Dashboard Embed
  • Annoto Player
    • Getting Started
    • Advanced Workflows
    • API Reference
    • Playground
  • Kaltura Plugin
    • Getting Started
    • Setup the Plugin
    • Customise Annoto Widget configuration
    • Using Annoto Widget API
  • Kaltura Plugin (V2 Legacy)
    • Getting Started
    • Setup using Universal Studio (KMC)
    • Customise Annoto Widget configuration
    • Using Annoto Widget API
    • Setup using Javascript (Optional)
  • Wistia Plugin
    • Getting Started
    • Setup Annoto Plugin
    • Customise Widget Configuration
    • Using Widget API
  • Integrations
    • SSO (Single Sign On)
    • Webhook
Powered by GitBook
On this page
  • Listen to Kaltura Player events
  • Modify Annoto configuration
  • Single Sign On
  • Asynchronous Widget Bootstrap

Was this helpful?

Export as PDF
  1. Kaltura Plugin (V2 Legacy)

Customise Annoto Widget configuration

PreviousSetup using Universal Studio (KMC)NextUsing Annoto Widget API

Last updated 29 days ago

Was this helpful?

When the Annoto plugin is loaded by the Kaltura player, it triggers custom events that allows you to get access to the and the for full customisation and control of the widget.

Listen to Kaltura Player events

To subscribe to Kaltura player events please use Kaltura player API:

kWidget.addReadyCallback(function (playerId) {
        var player = document.getElementById(playerId);
        player.kBind('annotoPluginSetup', function (params) {
                var config = params.config;
                // Modify the Annoto configuration
        });
        player.kBind('annotoPluginReady', function (annotoApi) {
                // Make use of the Annoto API
        });
});

For detailed information on the Kaltura player API, please refer to

Modify Annoto configuration

annotoPluginSetup is triggered first by the Annoto plugin and provides opportunity to modify the Annoto widget configuration before the .

Once the widget is bootstrapped by the plugin annotoPluginReady is triggered and provides access to the .

Below is an example of modifying some basic widget options:

player.kBind('annotoPluginSetup', function (params) {
    var config = params.config;

    config.clientId = 'eyJhbGciOiJ...';
    config.locale = 'en';

    config.hooks.getPageUrl = function() {
        return window.location.href;;
    };
    
    // https://annoto.github.io/widget-api/interfaces/config_hooks.IHooks.html#mediaDetails
    config.hooks.mediaDetails = function(params) {
        return {
            ...params?.details,
            // Optionaly use your own video identifier
            // https://annoto.github.io/widget-api/interfaces/config_media_details.IMediaDetails.html#id
            // id: 'unique_video_identifier',
        };
    };
    
    config.hooks.ssoAuthRequestHandle = function() {
        // trigger user login
        // https://annoto.github.io/widget-api/interfaces/config_hooks.IHooks.html#ssoAuthRequestHandle
        window.location.replace('https://example.com/login');
    };
});

config is already setup by the Kaltura Annoto plugin, so we need only to override the required configuration, such as clientId, getPageUrl hook, etc. DO NOT CHANGE THE PLAYER TYPE OR PLAYER ELEMENT CONFIG.

Single Sign On

player.kBind('annotoPluginReady', function (annotoApi) {
    // token is the generated user authentication JWT token
    annotoApi.auth(token);
});

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.

var delayDoneCallback;
var annotoConfig;
player.kBind('annotoPluginSetup', function (params) {
    
    // Set params.await to the following function:
    params.await = function (doneCb) {
        delayDoneCallback = doneCb;
    };
    annotoConfig = params.config;
});

// do some async work and when ready call the delayDoneCallback:

setTimeout(function() {
    // Modify the Annoto configuration asynchronously
    annotoConfig.clientId = 'eyJhbGciOiJ...';
    delayDoneCallback();
}, 200);

Until delayDoneCallback is called, the widget won't be bootstrapped and annotoPluginReady won't be triggered.

If doneCb is not called, the widget is not bootstrapped. This can be used to dynamically decide on which videos to load the annoto plugin.

For the default widget configuration used by the plugin please refer to:

The plugin exposes annotoPluginReady event that provides access to the for implementing the functionality.

https://github.com/Annoto/kaltura-plugin
http://player.kaltura.com/docs/api
SSO
configuration
API
widget is bootstrapped
Annoto API
API