Kaltura Plugin
Single Sign On
Getting Started
If you are looking to integrate Annoto as a widget without influencing website layout, as an overlay on top your existing video player, you are in the right place :)
At the moment we support the following players:
- Wistia
- YouTube
- Vimeo
- Kaltura
- JwPlayer
- VideoJS
- FlowPlayer
- H5P
- OpenEdx
- HTML5
- Custom Player
Setup
Simply add the following script:
1
<script src="https://cdn.annoto.net/widget/latest/bootstrap.js"></script>
Copied!
And bootstrap Annoto with the desired Application configuration:
1
<script>
2
// Minimal Application configuration
3
var config = {
4
/* set to your client id after registration. */
5
clientId: '',
6
widgets: [
7
{
8
player: {
9
/* type of the player */
10
type: 'youtube',
11
/* DOM element or DOM query selector of the player */
12
element: '#player-element'
13
}
14
}
15
],
16
};
17
18
window.Annoto.boot(config);
19
</script>
Copied!
If you are using a javascript module loader such as RequireJS. Annoto exposes a standard UMD. For example for requireJS:
1
requirejs(["https://cdn.annoto.net/widget/latest/bootstrap.js"], function(Annoto) {
2
//This function is called when annoto-bootstrap.js is loaded.
3
Annoto.boot(config);
4
});
Copied!
Configuration
Annoto application providers flexibility in how it integrates in the website. For full configuration options, please refer to the Config Reference. Annoto API Typescript interfaces is available via the @annoto/widget-api package.
Using the API
Annoto application exposes an API. To get access to the API use the "ready" event.
For example to load new application configuration attaching the widget to new dynamically loaded video, or just switching to another video on the page:
Typescript
Javascript
1
import { Annoto, IAnnotoApi, IConfig } from '@annoto/widget-api';
2
3
interface Global extends Window {
4
Annoto: Annoto;
5
}
6
const global = window as Global;
7
8
const config: IConfig = {
9
/* ... */
10
};
11
12
let annotoAPI: IAnnotoApi;
13
const userToken = '...';
14
global.Annoto.on('ready', (api: IAnnotoApi) => {
15
annotoAPI = api;
16
// Authenticate SSO User
17
annotoApi.auth(userToken);
18
});
19
global.Annoto.boot(config);
20
21
function yourTrigger(newConfiguration) {
22
annotoAPI.load(newConfiguration).then(() => {
23
console.log('Loaded new Configuration!');
24
}).catch((err) => {
25
console.error(err);
26
});
27
}
Copied!
1
// Application configuration
2
var config = {
3
/* ... */
4
};
5
6
var annotoAPI;
7
var userToken = '...';
8
window.Annoto.on('ready', function (api) {
9
annotoAPI = api;
10
// Authenticate SSO User
11
annotoApi.auth(userToken);
12
});
13
window.Annoto.boot(config);
14
15
function yourTrigger(newAnnotoApplicationConfiguration) {
16
annotoAPI.load(newAnnotoApplicationConfiguration, function(err) {
17
if (err) {
18
// error while loading the new configuration
19
return;
20
}
21
console.log('Loaded new Configuration!');
22
});
23
}
Copied!
Browser Compatibility
Annoto is compatible with all major evergreen browsers (Edge, Chrome, Mozilla, Safari).
Chrome usually gives best user experience.
Last modified 3mo ago
Export as PDF
Copy link