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
$ npm install @annoto/player

The package includes full typings and can be used in typescript/ES6/flow projects.

CDN
<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
Typescript
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);
});
JS
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);
});
HTML
<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 API. The default options can be found here.

Player services

The player accepts a number of optional services. The most important one is AuthProviderApi, 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:

function loadWidget(player: AnnotoPlayer) {
const options: WidgetOptions;
return player.setupWidget(options).then(() => { // #1
return player.loadWidget(); // #2
}).catch((err) => {
console.error('Annoto widget setup err: ', err);
});
}
  1. First we setup the widget by calling player.setupWidget(options), this is required only once for the lifecycle of the application, but can be safely called multiple types to update/change the widget options.

  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.

If player.setupWidget(options) is called multiple times, the new provided options will be merged with previous options so you only need to provide the required changes. For the changes to take effect the widget needs to be reloaded by a call to player.loadWidget()

Changing the clientId after the first setup is currently not supported.