Getting Started

If you are looking for industry leading Video Player with dual synchronous video playback, advanced layout capabilities and the power of Annoto interactivity, you are in the right place :)
Setup
The player is officially available via CDN and npm.
Annoto works out of the box with not only HTML <script> tag, but also with all major bundlers/packagers/builders, such as Browserify, WebPack, etc.
NPM
CDN
$ npm install @annoto/player
The package includes full typings and can be used in typescript/ES6/flow projects.
<body>
    <script src="https://player.annoto.net/index.js"></script>
</body>
<script>
    // Annoto modules is available at 'nn' global object:
    // nn.annotoPlayer
</script>
Creating a Player
Annoto player is exposed as UMD module, meaning it offers compatibility with the most popular script loaders and can be imported as commonjs/amd/es6. If you are not using any standard loader the player will be exposed on window as global variables.
The simplest way to create a player is using the annotoPlayer() method:
Typescript
JS
HTML
import { annotoPlayer, PlayerOptions, PlayerServices } from '@annoto/player';
​
const options: PlayerOptions;
const services: PlayerServices;
​
annotoPlayer(document.querySelector('annoto-player'), options, services).then((player: AnnotoPlayer) => {
    loadWidget(player); 
​
    return this.player.loadSrc({
        src: 'https://www.youtube.com/watch?v=1T9EZi7KJcc',
        type: 'video/youtube'
    });
}).catch((err) => {
    console.error('player setup error: ', err);
});
var options;
var services;
​
nn.annotoPlayer(document.querySelector('annoto-player'), options, services).then(function(player) {
    loadWidget(player); 
​
    return this.player.loadSrc({
        src: 'https://www.youtube.com/watch?v=1T9EZi7KJcc',
        type: 'video/youtube'
    });
}).catch(function (err) {
    console.error('player setup error: ', err);
});
<body>
    <annoto-player></annoto-player>
</body>
This will create a new AnnotoPlayer instance and setup it for usage. After you have the player instance it can be used to load video sources, setup the Annoto widget and much more.
 Notice the loadWidget(player) function call, we will implement it when we talk about setting up the widget. Loading the widget can be done asynchronous like we are doing in the example above.
Player Options
Annoto Player extends standard VideoJS options with some advanced functionality, for more details, please refer to the PlayerOptions.
PlayerOptions extends VideoJS options, so all options supported by the videojs player can be used.
Player services
The player accepts a number of optional services. The most important one is Authentication Provider, for proper Widget Single Sign On functionality the service must be implemented.
Setup the Widget
Setting up and loading Annoto Widget is a 2 step process:
import { IAnnotoApi, IConfig } from '@annoto/widget-api';
import { AnnotoPlayer } from '@annoto/player';
​
function loadWidget(player: AnnotoPlayer) {
    const widgetConfig: IConfig;
​
    return player.setupWidget(widgetConfig).then(() => { // #1
    
        window.Annoto.on('ready', (api: IAnnotoApi) => {
            console.log('widget api is ready: ', api);
        });
        
        return player.loadWidget();                 // #2
    }).catch((err) => {
        console.error('Annoto widget setup err: ', err);
    });
}
1.First we setup the widget by calling player.setupWidget(widgetConfig), this will setup the widget and will allow to obtain the Widget API. 
2.After the widget is setup, we can load it by calling `player.loadWidget()`.
All the options are optional, but to use the Annoto Widget in production (not in Demo mode), you would need to set the clientId provided by Annoto.
The Widget Configuration widgetConfig.widgets property is not supported and will be replaced internally by the player.
​
Last modified 1yr ago